/* bundle-shell — built by dev/site/build-bundles.php from: core/tokens, core/reset, core/typography, core/utilities, core/ornaments, core/patterns, core/buttons, core/forms, core/motion, site/header, site/nav, site/mobile-nav, site/ticker, site/footer, site/page-head, site/pagination, library/search-box */
@charset "UTF-8";
:root {
color-scheme: light;
--dt-indigo: #372860; --dt-indigo-deep: #382A50;
--dt-gold: #CFAD67; --dt-gold-deep: #BD9F5E; --dt-gold-rule: #D1AB66;
--dt-gold-50: #E5D1AB; --dt-gold-30: #EEE2CA; --dt-gold-20: #F2E9D9; --dt-gold-10: #F7F3EA;
--dt-cream: #FFFCDE; --dt-white: #FFFFFF; --dt-mist: #F1F3F4; --dt-line: #DBDDDE; --dt-ink: #221F20;
--dt-indigo-950: #1C1535; --dt-indigo-900: #241A42; --dt-indigo-700: #2E2354;
--dt-gold-heading: #A18750; --dt-gold-text: #7D6940;  --dt-muted-dark: #B9AFD0;
--dt-gap: var(--dt-white);
--dt-arch: var(--dt-gold);
--dt-halo: var(--dt-gold-50);
--dt-rosette: var(--dt-gold);
--dt-icon: var(--dt-indigo);
--dt-girih: var(--dt-indigo-deep);
--dt-indigo-600: #4A3B7A;
--dt-indigo-100: #ECE9F3;
--dt-indigo-050: #F6F4FA;
--dt-muted: #5E5866;
--dt-muted-2: #7A7482;
--dt-danger: #9B2F2F;
--dt-ok: #2F6B4F;
--dt-focus: var(--dt-gold-heading);
--font-display: "Noto Naskh Arabic", "Amiri", serif;
--font-sub: "Vazirmatn", "IBM Plex Sans Arabic", system-ui, sans-serif;
--font-body: "Amiri", "Noto Naskh Arabic", serif;
--font-footer: "Amiri", "Noto Naskh Arabic", serif;
--fs-h1: clamp(2rem, 1.2rem + 3vw, 2.85rem);
--fs-sub: clamp(1.5rem, 1.1rem + 1.6vw, 2.05rem);
--fs-h2: clamp(1.65rem, 1.15rem + 1.9vw, 2.35rem);
--fs-h3: 1.3rem;
--fs-card: 1.3rem;
--fs-label: 1.1rem;
--fs-body: 1.125rem;
--fs-sm: .9375rem;
--fs-xs: .8125rem;
--lh-body: 1.9;
--r-0: 0;
--r-sm: 3px;
--r: 4px;
--r-lg: 8px;
--hair: 1px solid var(--dt-indigo);
--hair-gold: 1px solid var(--dt-gold);
--sh-soft: 0 1px 2px rgba(28, 21, 53, .06), 0 6px 18px rgba(28, 21, 53, .07);
--sh-lift: 0 10px 28px rgba(28, 21, 53, .14), 0 2px 6px rgba(28, 21, 53, .08);
--sh-panel: 0 8px 18px rgba(0, 0, 0, .2);
--ease: cubic-bezier(.2, .7, .2, 1);
--ease-io: cubic-bezier(.65, 0, .35, 1);
--spring: cubic-bezier(.34, 1.45, .64, 1);
--maxw: 1200px;
--read: 38rem;
--read-wide: 46rem;
--gutter: 16px;
--header-h: 80px;
--section-y: 56px;
}
@media (min-width: 720px) {
:root { --gutter: 24px; --section-y: 72px; }
}
@media (min-width: 1100px) {
:root { --section-y: 88px; }
}
.on-indigo { --dt-gap: var(--dt-indigo-900); --dt-icon: var(--dt-gold); --dt-girih: var(--dt-gold); --dt-halo: #6E5E93; }
.on-cream { --dt-gap: var(--dt-cream); }
.on-gold10 { --dt-gap: var(--dt-gold-10); }
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: calc(var(--header-h) + 12px);
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--dt-ink);
background: var(--dt-white);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-kerning: normal;
overflow-x: clip;
}
img, svg, video, picture { max-width: 100%; }
img { display: block; height: auto; }
picture { display: block; }
[hidden] { display: none !important; }
h1, h2, h3, h4, h5 { margin: 0 0 .5em; font-weight: 700; line-height: 1.35; color: var(--dt-indigo); }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
dl, dd { margin: 0; }
figure { margin: 0; }
blockquote { margin: 0; }
address { font-style: normal; }
table { border-collapse: collapse; }
a {
color: var(--dt-indigo);
text-decoration-color: var(--dt-gold);
text-decoration-thickness: 1px;
text-underline-offset: .3em;
}
a:hover { color: var(--dt-indigo-600); text-decoration-color: var(--dt-gold-heading); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--dt-focus);
outline-offset: 3px;
border-radius: 2px;
}
::selection { background: rgba(207, 173, 103, .4); color: var(--dt-ink); }
mark {
color: inherit;
background: linear-gradient(180deg, transparent 40%, rgba(207, 173, 103, .5) 40%, rgba(207, 173, 103, .5) 90%, transparent 90%);
padding: 0 .08em;
}
hr { border: 0; border-top: 1px solid var(--dt-line); margin: 2rem 0; }
html.is-locked, html.is-locked body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-delay: 0s !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
transition-delay: 0s !important;
scroll-behavior: auto !important;
}
}
.t-display { font-family: var(--font-display); }
.t-sub { font-family: var(--font-sub); }
.t-body { font-family: var(--font-body); }
h1, .h1 {
font-family: var(--font-display);
font-size: var(--fs-h1);
font-weight: 700;
line-height: 1.3;
color: var(--dt-indigo);
}
h2, .h2 {
font-family: var(--font-display);
font-size: var(--fs-h2);
font-weight: 700;
line-height: 1.35;
}
h3, .h3 {
font-family: var(--font-sub);
font-size: var(--fs-h3);
font-weight: 700;
line-height: 1.5;
}
h4, .h4 {
font-family: var(--font-sub);
font-size: var(--fs-label);
font-weight: 700;
line-height: 1.55;
}
.subhead {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 .6em;
font-family: var(--font-sub);
font-size: var(--fs-h3);
font-weight: 700;
line-height: 1.5;
color: var(--dt-gold-text);
}
.subhead::before {
content: "";
flex: none;
width: 14px;
height: 14px;
background: url("../../img/theme/bullet-diamond.svg") center / contain no-repeat;
}
.subhead--lg { font-size: 1.5rem; color: var(--dt-gold-heading); }
.subhead--indigo { color: var(--dt-indigo); }
.on-indigo .subhead { color: var(--dt-gold); }
.lead {
font-family: var(--font-body);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.85;
color: var(--dt-indigo);
}
.justify { text-align: justify; text-justify: inter-word; }
strong, b { font-weight: 700; }
.prose strong, .prose b, .text strong { color: var(--dt-indigo); }
.label {
font-family: var(--font-sub);
font-size: var(--fs-sm);
font-weight: 700;
color: var(--dt-indigo);
}
.kicker {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-sub);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0;
color: var(--dt-gold-text);
}
.kicker::before {
content: "";
width: 9px;
height: 9px;
background: url("../../img/theme/star-small.svg") center / contain no-repeat;
}
.caption {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 10px 0 0;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 700;
line-height: 1.6;
color: var(--dt-gold-text);
}
.caption::before {
content: "";
flex: none;
width: 11px;
height: 11px;
margin-top: .45em;
background: url("../../img/theme/caption-marker.svg") center / contain no-repeat;
}
.caption--rule { align-items: center; }
.caption--rule::before { margin-top: 0; }
.caption--rule::after {
content: "";
flex: 1 1 40px;
align-self: center;
min-width: 40px;
height: 5px;
margin-inline-start: 12px;
background:
linear-gradient(var(--dt-indigo), var(--dt-indigo)) center / 100% 1px no-repeat,
linear-gradient(var(--dt-indigo), var(--dt-indigo)) left center / 1px 5px no-repeat;
}
[dir="ltr"] .caption--rule::after { background-position: center, right center; }
.honorific { font-size: .7em; vertical-align: .35em; line-height: 1; white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.ltr { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.date {
font-family: var(--font-sub);
font-size: var(--fs-xs);
font-weight: 500;
color: var(--dt-gold-text);
}
.container {
width: 100%;
max-width: calc(var(--maxw) + 2 * var(--gutter));
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--read { max-width: calc(var(--read) + 2 * var(--gutter)); }
.container--wide { max-width: calc(1320px + 2 * var(--gutter)); }
.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .6); }
.section--flush-top { padding-top: 0; }
.section--gold { background: var(--dt-gold-10); --dt-gap: var(--dt-gold-10); }
.section--mist { background: var(--dt-mist); }
.section--indigo {
color: var(--dt-cream);
background: var(--dt-indigo-900);
--dt-gap: var(--dt-indigo-900);
}
.section--indigo h2, .section--indigo h3 { color: var(--dt-cream); }
.section-head {
display: grid;
justify-items: center;
gap: 6px;
margin-bottom: clamp(26px, 3vw, 40px);
text-align: center;
}
.section-head__lead { max-width: 60ch; margin: 0; color: var(--dt-muted); font-size: 1.0625rem; }
.section-head--start { justify-items: start; text-align: start; }
.section-foot { display: flex; justify-content: center; margin-top: clamp(26px, 3vw, 40px); }
.icon {
display: inline-block;
width: 1.15em;
height: 1.15em;
flex: none;
vertical-align: -.2em;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.icon-flip { transform: scaleX(-1); }
.theme-icon { display: inline-block; width: 26px; height: auto; flex: none; }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
top: 8px;
inset-inline-start: 8px;
z-index: 1000;
padding: 10px 16px;
background: var(--dt-indigo);
color: var(--dt-cream);
font-family: var(--font-sub);
font-weight: 700;
text-decoration: none;
transform: translateY(-160%);
transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; color: var(--dt-cream); }
.muted { color: var(--dt-muted); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }
.flow > * + * { margin-top: .75em; }
.grid { display: grid; gap: clamp(18px, 2.4vw, 32px); }
.grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.photo {
position: relative;
display: block;
overflow: hidden;
background: var(--dt-gold-10);
outline: 1px solid var(--dt-indigo);
outline-offset: -1px;
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo > picture { width: 100%; height: 100%; }
.photo--bar { outline: 0; border-bottom: 3px solid var(--dt-indigo); }
.photo--plain { outline: 0; background: none; }
.ratio-43 { aspect-ratio: 4 / 3; }
.ratio-32 { aspect-ratio: 3 / 2; }
.ratio-169 { aspect-ratio: 16 / 9; }
.ratio-1 { aspect-ratio: 1; }
.ratio-34 { aspect-ratio: 3 / 4; }
.photo--empty {
display: grid;
place-items: center;
background: var(--dt-gold-10) url("../../img/theme/girih-panel.svg") center / 240px 208px;
}
.photo--empty img { width: 40%; height: auto; object-fit: contain; opacity: .5; }
.toast {
position: fixed;
z-index: 300;
left: 50%;
bottom: 24px;
padding: 10px 18px;
background: var(--dt-indigo-900);
color: var(--dt-cream);
font-family: var(--font-sub);
font-size: var(--fs-sm);
box-shadow: var(--sh-lift);
transform: translate(-50%, 20px);
opacity: 0;
transition: transform .25s var(--ease), opacity .25s;
pointer-events: none;
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.arch-title {
position: relative;
isolation: isolate;
display: inline-block;
margin: 0;
padding-top: .62em;
font-family: var(--font-display);
font-weight: 700;
line-height: 1.3;
text-align: center;
color: var(--dt-indigo);
}
.arch-title::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 50%;
width: 1.9em;
height: 1.88em;
transform: translateX(-50%);
background: var(--arch-c, var(--dt-gold));
-webkit-mask: url("../../img/theme/arch-title.svg") center / contain no-repeat;
mask: url("../../img/theme/arch-title.svg") center / contain no-repeat;
pointer-events: none;
}
.arch-title--pale { --arch-c: var(--dt-gold-30); }
.arch-title--h1 { font-size: var(--fs-h1); }
.arch-title--h2 { font-size: var(--fs-h2); }
.on-indigo .arch-title, .section--indigo .arch-title { color: var(--dt-cream); --arch-c: var(--dt-gold); }
.arch-sub {
margin: .15em 0 0;
font-family: var(--font-display);
font-size: var(--fs-sub);
font-weight: 600;
line-height: 1.45;
color: var(--dt-indigo);
}
.arch-sub--gold { font-family: var(--font-sub); font-size: 1.25rem; font-weight: 700; color: var(--dt-gold-text); }
.rule {
position: relative;
height: 1px;
margin-block: 28px;
border: 0;
background: var(--dt-indigo);
}
.rule::before, .rule::after {
content: "";
position: absolute;
top: -2px;
width: 1px;
height: 5px;
background: var(--dt-indigo);
}
.rule::before { inset-inline-start: 0; }
.rule::after { inset-inline-end: 0; }
.rule--cartouche {
height: 22px;
background:
url("../../img/theme/cartouche-h.svg") right 38px center / 79px 22px no-repeat,
linear-gradient(var(--dt-indigo), var(--dt-indigo)) center / 100% 1px no-repeat;
}
.rule--cartouche::before, .rule--cartouche::after { top: 8.5px; }
[dir="ltr"] .rule--cartouche { background-position: left 38px center, center; }
.band-divider {
position: relative;
height: 22px;
margin-block: clamp(24px, 3vw, 36px);
background:
url("../../img/theme/band-divider.svg") center / min(523.7px, 78%) 22px no-repeat,
linear-gradient(var(--dt-indigo), var(--dt-indigo)) center / 100% 1px no-repeat;
}
.band-divider::before, .band-divider::after {
content: "";
position: absolute;
top: 8.5px;
width: 1px;
height: 5px;
background: var(--dt-indigo);
}
.band-divider::before { inset-inline-start: 0; }
.band-divider::after { inset-inline-end: 0; }
.band-divider--md { background-size: min(262.9px, 70%) 22px, 100% 1px; background-image: url("../../img/theme/cartouche-h-md.svg"), linear-gradient(var(--dt-indigo), var(--dt-indigo)); }
.cols-orn { display: grid; gap: 28px; }
.vrule {
position: relative;
display: block;
height: 22px;
background:
url("../../img/theme/cartouche-h.svg") center / 79px 22px no-repeat,
linear-gradient(var(--dt-indigo), var(--dt-indigo)) center / 100% 1px no-repeat;
}
@media (min-width: 760px) {
.cols-orn { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); gap: 0; }
.cols-orn--wide-start { grid-template-columns: minmax(0, 1.45fr) 48px minmax(0, 1fr); }
.cols-orn--wide-end { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1.45fr); }
.vrule {
align-self: stretch;
height: auto;
margin-inline: auto;
width: 22px;
background:
url("../../img/theme/cartouche-v.svg") center 23px / 22px 79px no-repeat,
linear-gradient(var(--dt-indigo), var(--dt-indigo)) center / 1px 100% no-repeat;
}
.vrule::before, .vrule::after {
content: "";
position: absolute;
left: 8.5px;
width: 5px;
height: 1px;
background: var(--dt-indigo);
}
.vrule::before { top: 0; }
.vrule::after { bottom: 0; }
.vrule--mid { background-position: center, center; }
}
.list-diamond, .list-dot { list-style: none; padding: 0; margin: 0; display: grid; gap: .45em; }
.list-diamond > li, .list-dot > li { position: relative; padding-inline-start: 24px; }
.list-diamond > li::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: .62em;
width: 13px;
height: 13px;
background: url("../../img/theme/bullet-diamond.svg") center / contain no-repeat;
}
.list-dot > li { padding-inline-start: 18px; }
.list-dot > li::before {
content: "";
position: absolute;
inset-inline-start: 2px;
top: .8em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--dt-gold);
}
.list-folio { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.list-folio > li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; }
.folio {
display: inline-grid;
place-items: center;
width: 36px;
height: 31px;
flex: none;
padding-top: 1px;
background: url("../../img/theme/folio-medallion.svg") center / contain no-repeat;
color: var(--dt-white);
font-family: var(--font-body);
font-size: .9rem;
font-weight: 700;
line-height: 1;
}
.folio--lg { width: 48px; height: 42px; font-size: 1.15rem; }
.folio-rule { display: flex; align-items: center; justify-content: center; gap: 10px; }
.folio-rule::before, .folio-rule::after { content: ""; width: 33px; height: 1px; background: var(--dt-gold-rule); }
.num-badge {
display: inline-grid;
place-items: center;
width: 36px;
height: 66px;
flex: none;
padding-top: 2px;
background: url("../../img/theme/number-badge.svg") center / contain no-repeat;
color: var(--dt-indigo);
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 700;
line-height: 1;
}
.num-badge--sm { width: 27px; height: 50px; font-size: 1rem; }
.label-box {
display: grid;
place-items: center;
aspect-ratio: 246.3 / 94.1;
padding: 4% 17%;
background: url("../../img/theme/label-box.svg") center / 100% 100% no-repeat;
color: var(--dt-indigo);
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
line-height: 1.55;
text-align: center;
}
.halo {
position: relative;
display: inline-grid;
place-items: center;
width: 58px;
height: 58px;
flex: none;
background: url("../../img/theme/arch-halo.svg") center / contain no-repeat;
}
.halo img { width: 27px; height: auto; margin-top: 4px; }
.halo--lg { width: 84px; height: 84px; }
.halo--lg img { width: 38px; }
.star-rule { display: flex; align-items: center; justify-content: center; gap: 10px; }
.star-rule::before, .star-rule::after { content: ""; flex: 0 1 33px; height: 1px; background: var(--dt-gold-rule); }
.star-rule > i {
width: 9px;
height: 9px;
background: url("../../img/theme/star-small.svg") center / contain no-repeat;
}
.kicker-line {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0;
font-family: var(--font-sub);
font-size: .9063rem;
font-weight: 700;
color: var(--dt-gold-text);
}
.kicker-line::before, .kicker-star {
content: "";
flex: none;
width: 11px;
height: 11px;
background: url("../../img/theme/bullet-diamond.svg") center / contain no-repeat;
}
.kicker-star { display: inline-block; vertical-align: -1px; }
.kicker-line::after { content: ""; width: 48px; height: 1px; background: linear-gradient(to left, var(--dt-gold), rgba(207, 173, 103, 0)); }
[dir="ltr"] .kicker-line::after { background: linear-gradient(to right, var(--dt-gold), rgba(207, 173, 103, 0)); }
.on-indigo .kicker-line { color: var(--dt-gold); }
.split-title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-h2);
font-weight: 700;
line-height: 1.35;
color: var(--dt-indigo);
text-wrap: balance;
}
.on-indigo .split-title { color: var(--dt-cream); }
.section-head--split {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 14px 24px;
margin-bottom: clamp(26px, 3.2vw, 42px);
padding-bottom: 18px;
text-align: start;
background:
url("../../img/theme/star-small.svg") right bottom / 9px 9px no-repeat,
linear-gradient(to left, var(--dt-gold) 0, var(--dt-gold-50) 18%, rgba(229, 209, 171, 0) 70%) right calc(100% - 4px) / 100% 1px no-repeat;
}
[dir="ltr"] .section-head--split { background-position: left bottom, left calc(100% - 4px); }
.section-head--split .section-head__titles { display: grid; gap: 6px; justify-items: start; }
.section-head--split .section-head__lead { margin-top: 2px; }
.section-head--split .section-head__more { flex: none; }
.on-indigo .section-head--split { background-image: url("../../img/theme/star-small.svg"), linear-gradient(to left, var(--dt-gold), rgba(207, 173, 103, .3) 18%, rgba(207, 173, 103, 0) 70%); }
.arch-window {
position: relative;
isolation: isolate;
aspect-ratio: 400 / 560;
}
.arch-window > picture, .arch-window > img, .arch-window > .photo-empty {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
-webkit-mask: url("../../img/theme/arch-window.svg") center / 100% 100% no-repeat;
mask: url("../../img/theme/arch-window.svg") center / 100% 100% no-repeat;
}
.arch-window img { width: 100%; height: 100%; object-fit: cover; }
.arch-window::after {
content: "";
position: absolute;
z-index: 1;
inset: -16px;
background: var(--dt-gold);
-webkit-mask: url("../../img/theme/arch-window-line.svg") center / 100% 100% no-repeat;
mask: url("../../img/theme/arch-window-line.svg") center / 100% 100% no-repeat;
pointer-events: none;
}
.has-corner { position: relative; isolation: isolate; }
.has-corner::before {
content: "";
position: absolute;
z-index: -1;
bottom: 0;
left: 0;
width: min(386px, 34vw);
aspect-ratio: 386.4 / 653.5;
max-height: 88%;
background: url("../../img/theme/corner-girih.svg") left bottom / contain no-repeat;
pointer-events: none;
}
.has-corner--end::before { left: auto; right: 0; transform: scaleX(-1); }
.has-corner--both::after {
content: "";
position: absolute;
z-index: -1;
bottom: 0;
right: 0;
width: min(300px, 26vw);
aspect-ratio: 386.4 / 653.5;
max-height: 70%;
background: url("../../img/theme/corner-girih.svg") left bottom / contain no-repeat;
transform: scaleX(-1);
opacity: .8;
pointer-events: none;
}
@media (max-width: 719px) {
.has-corner::before { width: 46vw; opacity: .7; }
.has-corner--both::after { display: none; }
}
.girih-faint { position: relative; isolation: isolate; }
.girih-faint::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background: url("../../img/theme/girih-page.svg") center top / 266px 230.6px;
-webkit-mask-image: radial-gradient(ellipse 60% 90% at 50% 0%, #000 10%, transparent 75%);
mask-image: radial-gradient(ellipse 60% 90% at 50% 0%, #000 10%, transparent 75%);
pointer-events: none;
}
.girih-gold { position: relative; isolation: isolate; }
.girih-gold::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background: url("../../img/theme/girih-gold.svg") center / 336px 291.3px;
opacity: var(--girih-o, .1);
pointer-events: none;
}
.girih-cover {
background: var(--dt-gold) url("../../img/theme/girih-cover.svg") center / 336px 291.3px;
color: var(--dt-indigo-deep);
--dt-focus: var(--dt-indigo-deep);
--dt-gap: var(--dt-gold);
}
.girih-half { position: relative; isolation: isolate; background: var(--dt-gold); color: var(--dt-indigo-deep); --dt-focus: var(--dt-indigo-deep); }
.girih-half::before {
content: "";
position: absolute;
z-index: -1;
inset: 0 auto 0 0;
width: min(50%, 672.6px);
background: url("../../img/theme/girih-cover.svg") right center / 672.6px 583px;
}
[dir="ltr"] .girih-half::before { inset: 0 0 0 auto; background-position: left center; }
@media (max-width: 859px) {
.girih-half::before { inset: 0; width: auto; opacity: .35; }
}
.rosette {
position: absolute;
z-index: -1;
width: 196px;
height: 188px;
background: url("../../img/theme/rosette.svg") center / contain no-repeat;
pointer-events: none;
}
.rosette--alt { background-image: url("../../img/theme/rosette-alt.svg"); }
.has-rosette { position: relative; isolation: isolate; }
.duotone { filter: url("#duotone"); }
.duotone-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.basmala { display: block; width: 88px; height: auto; margin: 0 auto 10px; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 46px;
padding: 8px 22px;
border: 1px solid transparent;
border-radius: var(--r);
font-family: var(--font-sub);
font-size: .9688rem;
font-weight: 700;
line-height: 1.3;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .15s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn .icon { font-size: 1.05em; }
.btn--primary { background: var(--dt-indigo); color: var(--dt-cream); border-color: var(--dt-indigo); }
.btn--primary:hover { background: var(--dt-indigo-700); border-color: var(--dt-indigo-700); color: var(--dt-white); }
.btn--primary .icon { color: var(--dt-gold); }
.btn--outline { background: transparent; color: var(--dt-indigo); border-color: var(--dt-gold); }
.btn--outline:hover { background: var(--dt-gold-10); border-color: var(--dt-gold-heading); color: var(--dt-indigo); }
.btn--outline .icon { color: var(--dt-gold-heading); }
.btn--gold { background: var(--dt-gold); color: var(--dt-indigo-deep); border-color: var(--dt-gold-deep); }
.btn--gold:hover { background: #D8BA7C; color: var(--dt-indigo-950); }
.btn--ghost { background: var(--dt-white); color: var(--dt-indigo); border-color: var(--dt-line); }
.btn--ghost:hover { border-color: var(--dt-indigo); color: var(--dt-indigo); }
.btn--quiet { background: transparent; color: var(--dt-indigo); padding-inline: 10px; min-height: 40px; }
.btn--quiet:hover { background: var(--dt-gold-10); }
.btn--sm { min-height: 38px; padding: 5px 16px; font-size: .875rem; }
.btn--lg { min-height: 54px; padding: 10px 30px; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn.is-done { border-color: var(--dt-ok); color: var(--dt-ok); }
.on-indigo .btn--outline, .section--indigo .btn--outline { color: var(--dt-cream); border-color: var(--dt-gold); }
.on-indigo .btn--outline:hover, .section--indigo .btn--outline:hover { background: rgba(207, 173, 103, .14); color: var(--dt-white); }
.on-indigo .btn--primary { background: var(--dt-gold); color: var(--dt-indigo-deep); border-color: var(--dt-gold); }
.on-indigo .btn--primary .icon { color: var(--dt-indigo); }
.on-indigo .btn--primary:hover { background: #D8BA7C; }
.icon-btn {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--dt-line);
border-radius: 50%;
background: var(--dt-white);
color: var(--dt-indigo);
font-size: 1.15rem;
cursor: pointer;
transition: background-color .2s, border-color .2s, color .2s;
}
.icon-btn:hover { border-color: var(--dt-gold); background: var(--dt-gold-10); }
.more-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-sub);
font-size: .9375rem;
font-weight: 700;
color: var(--dt-indigo);
text-decoration: none;
}
.more-link .icon { color: var(--dt-gold-heading); transition: transform .25s var(--ease); }
.more-link:hover { color: var(--dt-indigo-600); }
.more-link:hover .icon { transform: translateX(-4px); }
.on-indigo .more-link, .section--indigo .more-link { color: var(--dt-cream); }
.on-indigo .more-link .icon, .section--indigo .more-link .icon { color: var(--dt-gold); }
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 30px;
padding: 2px 12px;
border: 1px solid var(--dt-gold-50);
border-radius: var(--r-sm);
background: var(--dt-white);
color: var(--dt-indigo);
font-family: var(--font-sub);
font-size: .8125rem;
font-weight: 500;
line-height: 1.5;
text-decoration: none;
white-space: nowrap;
}
a.chip:hover { border-color: var(--dt-gold); background: var(--dt-gold-10); }
.chip--gold { background: var(--dt-gold); border-color: var(--dt-gold); color: var(--dt-indigo-deep); font-weight: 700; }
.chip--indigo { background: var(--dt-indigo); border-color: var(--dt-indigo); color: var(--dt-cream); }
.chip--soft { background: var(--dt-gold-10); border-color: transparent; }
.chip__count { color: var(--dt-muted-2); font-variant-numeric: tabular-nums; }
.field { display: grid; gap: 6px; min-width: 0; }
.field__label {
font-family: var(--font-sub);
font-size: .9375rem;
font-weight: 700;
color: var(--dt-indigo);
}
.field__label .req { color: var(--dt-danger); margin-inline-start: 2px; }
.field__hint { margin: 0; font-family: var(--font-sub); font-size: .8125rem; color: var(--dt-muted-2); }
.field__error {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
font-family: var(--font-sub);
font-size: .8438rem;
font-weight: 500;
color: var(--dt-danger);
}
.input, .select, .textarea {
width: 100%;
min-height: 48px;
padding: 10px 14px;
border: 1px solid #CFCAD8;
border-radius: var(--r);
background: var(--dt-white);
color: var(--dt-ink);
font-family: var(--font-sub);
font-size: 1rem;
line-height: 1.6;
transition: border-color .2s, box-shadow .2s;
}
.textarea { min-height: 170px; resize: vertical; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.8; }
.input::placeholder, .textarea::placeholder { color: #6E6878; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--dt-gold); }
.input:focus, .select:focus, .textarea:focus {
outline: none;
border-color: var(--dt-indigo);
box-shadow: 0 0 0 3px rgba(207, 173, 103, .35);
}
.field.is-invalid .input, .field.is-invalid .textarea, .field.is-invalid .select,
.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
border-color: var(--dt-danger);
background: #FFFBFA;
}
.select {
appearance: none;
-webkit-appearance: none;
padding-inline-end: 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23372860' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-position: 14px 50%;
background-size: 16px 16px;
background-repeat: no-repeat;
}
.check {
display: flex;
align-items: center;
gap: 10px;
min-height: 40px;
cursor: pointer;
font-family: var(--font-sub);
font-size: .9375rem;
}
.check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--dt-indigo); cursor: pointer; }
.hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alert {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 4px 14px;
align-items: start;
padding: 16px 18px;
border: 1px solid;
border-inline-start-width: 4px;
border-radius: var(--r);
font-family: var(--font-sub);
font-size: .9375rem;
line-height: 1.7;
}
.alert > .icon { font-size: 1.35rem; margin-top: 2px; }
.alert__title { margin: 0; font-weight: 700; font-size: 1rem; }
.alert p { margin: 0; }
.alert ul { margin: 6px 0 0; padding-inline-start: 18px; }
.alert--error { border-color: #E3B7B1; border-inline-start-color: var(--dt-danger); background: #FDF5F3; color: #5E1D1D; }
.alert--error > .icon { color: var(--dt-danger); }
.alert--success { border-color: var(--dt-gold-50); border-inline-start-color: var(--dt-gold-heading); background: var(--dt-gold-10); color: var(--dt-indigo); }
.alert--success > .icon { color: var(--dt-gold-heading); }
.alert--info { border-color: var(--dt-indigo-100); border-inline-start-color: var(--dt-indigo); background: var(--dt-indigo-050); color: var(--dt-indigo); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: translate3d(0, -6px, 0) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes rise-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes failsafe-show { to { opacity: 1; transform: none; } }
@keyframes ticker-rtl { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(50%, 0, 0); } }
@keyframes spin { to { transform: rotate(360deg); } }
.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease); }
html.js .reveal:not(.is-in) { opacity: 0; transform: translate3d(0, 24px, 0); }
html.js:not(.reveal-ready) .reveal:not(.is-in) { animation: failsafe-show 0s 3s forwards; }
.reveal-stagger > * { transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js .reveal-stagger:not(.is-in) > * { opacity: 0; transform: translate3d(0, 18px, 0); }
html.js:not(.reveal-ready) .reveal-stagger:not(.is-in) > * { animation: failsafe-show 0s 3s forwards; }
.reveal.is-instant, .reveal-stagger.is-instant > * { transition: none; }
.reveal-stagger.is-in > :nth-child(2) { transition-delay: .07s; }
.reveal-stagger.is-in > :nth-child(3) { transition-delay: .14s; }
.reveal-stagger.is-in > :nth-child(4) { transition-delay: .21s; }
.reveal-stagger.is-in > :nth-child(5) { transition-delay: .28s; }
.reveal-stagger.is-in > :nth-child(6) { transition-delay: .35s; }
.reveal-stagger.is-in > :nth-child(n+7) { transition-delay: .42s; }
.topbar {
position: relative;
z-index: 41;
background: var(--dt-indigo-900);
color: var(--dt-muted-dark);
font-family: var(--font-sub);
font-size: .8125rem;
line-height: 1.5;
}
.topbar__inner {
display: flex;
align-items: center;
gap: 8px 22px;
min-height: 38px;
}
.topbar__slogan {
display: flex;
align-items: center;
gap: 9px;
margin: 0;
font-family: var(--font-display);
font-size: .875rem;
font-weight: 600;
color: var(--dt-gold);
white-space: nowrap;
}
.topbar__star { width: 8px; height: 8px; background: url("../../img/theme/star-small.svg") center / contain no-repeat; }
.topbar__info, .topbar__social { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.topbar__info { gap: 18px; margin-inline-start: auto; }
.topbar__info li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.topbar__info .icon { color: var(--dt-gold); width: 1em; height: 1em; }
.topbar a { color: var(--dt-cream); text-decoration: none; }
.topbar a:hover { color: var(--dt-white); text-decoration: underline; text-decoration-color: var(--dt-gold); }
.topbar__social { gap: 2px; padding-inline-start: 14px; border-inline-start: 1px solid rgba(207, 173, 103, .25); }
.topbar__social a { display: inline-grid; place-items: center; width: 30px; height: 30px; color: var(--dt-gold); }
.topbar__social a:hover { color: var(--dt-cream); }
.topbar__social .icon { width: 1.05em; height: 1.05em; }
@media (max-width: 1023px) { .topbar__slogan { display: none; } }
@media (max-width: 599px) {
.topbar__inner { justify-content: space-between; }
.topbar__info { margin-inline-start: 0; gap: 12px; }
.topbar__info .topbar__city, .topbar__social { display: none; }
}
html.js .open-status[data-pending] { visibility: hidden; }
html:not(.js) .open-status[data-pending] { display: none; }
.open-status {
display: inline-flex;
align-items: center;
gap: 7px;
font-weight: 500;
white-space: nowrap;
}
.open-status::before {
content: "";
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: #E08A7E;
box-shadow: 0 0 0 3px rgba(224, 138, 126, .2);
}
.open-status.is-open::before { background: #5BD08A; box-shadow: 0 0 0 3px rgba(91, 208, 138, .22); }
.topbar .open-status { color: var(--dt-cream); }
.site-header {
position: sticky;
top: 0;
z-index: 40;
background: rgba(255, 255, 255, .97);
border-bottom: 1px solid var(--dt-gold-30);
transition: box-shadow .25s var(--ease), background-color .25s;
}
@supports (backdrop-filter: blur(8px)) {
.site-header { background: rgba(255, 255, 255, .88); backdrop-filter: saturate(1.4) blur(12px); }
}
.site-header::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, var(--dt-gold-deep), var(--dt-gold) 30%, #E9D193 50%, var(--dt-gold) 70%, var(--dt-gold-deep));
}
.site-header.is-stuck { box-shadow: 0 8px 26px rgba(28, 21, 53, .08); }
.site-header__bar {
display: flex;
align-items: center;
gap: 22px;
min-height: var(--header-h);
padding-top: 3px;
}
.site-brand {
display: inline-flex;
align-items: center;
gap: 12px;
flex: none;
color: var(--dt-indigo);
text-decoration: none;
}
.site-brand:hover { color: var(--dt-indigo); }
.site-brand__emblem img { width: auto; height: 56px; }
.site-brand__text { display: grid; gap: 1px; }
.site-brand__name {
font-family: var(--font-display);
font-size: 1.3125rem;
font-weight: 700;
line-height: 1.25;
white-space: nowrap;
}
.site-brand__place {
display: flex;
align-items: center;
gap: 7px;
padding-top: 3px;
border-top: 1px solid var(--dt-gold-rule);
font-family: var(--font-display);
font-size: .8125rem;
font-weight: 600;
line-height: 1.5;
color: var(--dt-gold-text);
white-space: nowrap;
}
.site-brand__star { width: 7px; height: 7px; background: url("../../img/theme/star-small.svg") center / contain no-repeat; }
.site-header__tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; flex: none; }
.site-header__search-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 44px;
min-height: 44px;
padding: 6px 12px;
border: 1px solid var(--dt-gold-50);
border-radius: 999px;
background: var(--dt-white);
color: var(--dt-indigo);
font-family: var(--font-sub);
font-size: .875rem;
font-weight: 700;
cursor: pointer;
transition: background-color .2s, border-color .2s, color .2s;
}
.site-header__search-btn .icon { color: var(--dt-gold-heading); font-size: 1.05rem; }
.site-header__search-btn:hover { border-color: var(--dt-gold); background: var(--dt-gold-10); }
.site-header__search-btn[aria-expanded="true"] { background: var(--dt-indigo); border-color: var(--dt-indigo); color: var(--dt-cream); }
.site-header__search-btn[aria-expanded="true"] .icon { color: var(--dt-gold); }
.site-header__search-label { display: none; }
@media (min-width: 1440px) {
.site-header__search-btn { padding-inline: 16px 18px; }
.site-header__search-label { display: inline; }
}
.site-header__menu-btn {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 6px 14px;
border: 1px solid var(--dt-indigo);
border-radius: 999px;
background: var(--dt-indigo);
color: var(--dt-cream);
font-family: var(--font-sub);
font-size: .9375rem;
font-weight: 700;
}
.site-header__menu-btn .icon { color: var(--dt-gold); font-size: 1.2rem; }
@media (min-width: 1200px) {
.site-header__menu-btn { display: none; }
.site-header__tools { margin-inline-start: 0; }
}
@media (max-width: 599px) {
:root { --header-h: 66px; }
.site-header__bar { gap: 10px; }
.site-brand { gap: 9px; }
.site-brand__emblem img { height: 44px; }
.site-brand__name { font-size: 1.125rem; }
.site-brand__place { font-size: .75rem; }
.site-header__menu-btn { padding-inline: 11px; }
.site-header__menu-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 359px) { .site-brand__place { display: none; } }
.header-search {
position: absolute;
inset-inline: 0;
top: 100%;
z-index: 5;
padding: 18px 0 22px;
background: var(--dt-gold-10);
border-bottom: 1px solid var(--dt-gold-50);
box-shadow: 0 16px 30px rgba(28, 21, 53, .12);
animation: pop-in .22s var(--ease);
}
.header-search__inner { position: relative; display: grid; gap: 10px; max-width: calc(820px + 2 * var(--gutter)); }
.header-search__label {
display: flex;
align-items: center;
gap: 9px;
margin: 0;
font-family: var(--font-display);
font-size: 1.0625rem;
font-weight: 700;
color: var(--dt-indigo);
}
.header-search__mark { width: 12px; height: 12px; background: url("../../img/theme/bullet-diamond.svg") center / contain no-repeat; }
.header-search__close { position: absolute; top: -6px; inset-inline-end: var(--gutter); width: 38px; height: 38px; }
.site-main { flex: 1 0 auto; display: block; }
.site-main:focus { outline: none; }
.site-nav { display: none; }
@media (min-width: 1200px) {
.site-nav { display: block; margin-inline-start: auto; }
}
.site-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.site-nav__item { position: relative; display: flex; align-items: center; }
.site-nav__link {
position: relative;
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 6px 10px;
font-family: var(--font-sub);
font-size: .9688rem;
font-weight: 500;
line-height: 1.4;
color: var(--dt-ink);
text-decoration: none;
white-space: nowrap;
transition: color .2s;
}
.has-menu > .site-nav__link { padding-inline-end: 0; }
.site-nav__link:hover { color: var(--dt-gold-text); }
.site-nav__link::after {
content: "";
position: absolute;
left: 50%;
right: 50%;
bottom: 2px;
height: 2px;
border-radius: 2px;
background: var(--dt-gold);
transition: left .25s var(--ease), right .25s var(--ease);
}
.site-nav__item:hover > .site-nav__link::after, .site-nav__item.is-open > .site-nav__link::after { left: 10px; right: 10px; }
.has-menu:hover > .site-nav__link::after, .has-menu.is-open > .site-nav__link::after { right: 10px; left: 0; }
.site-nav__item.is-active > .site-nav__link { color: var(--dt-indigo); font-weight: 700; }
.site-nav__item.is-active > .site-nav__link::after { left: 10px; right: 10px; }
.site-nav__item.is-active.has-menu > .site-nav__link::after { left: 0; }
.site-nav__toggle {
display: inline-grid;
place-items: center;
width: 24px;
height: 36px;
padding: 0;
border: 0;
background: none;
color: var(--dt-gold-heading);
cursor: pointer;
}
.site-nav__toggle .icon { width: .95em; height: .95em; transition: transform .25s var(--ease); }
.site-nav__item.is-open .site-nav__toggle .icon { transform: rotate(180deg); }
.site-nav__menu {
position: absolute;
top: calc(100% + 18px);
inset-inline-start: -10px;
z-index: 10;
min-width: 230px;
padding: 10px;
background: var(--dt-white);
border: 1px solid var(--dt-gold-50);
border-top: 2px solid var(--dt-gold);
border-radius: 0 0 8px 8px;
box-shadow: 0 22px 48px rgba(28, 21, 53, .16);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity .18s, transform .22s var(--ease), visibility 0s .22s;
}
.site-nav__menu::before { content: ""; position: absolute; inset-inline: 0; top: -21px; height: 20px; }
.site-nav__menu::after {
content: "";
position: absolute;
top: -6px;
inset-inline-start: 28px;
width: 10px;
height: 10px;
background: url("../../img/theme/star-small.svg") center / contain no-repeat;
}
.site-nav__item.is-open > .site-nav__menu,
.site-nav__menu:focus-within {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity .18s, transform .22s var(--ease), visibility 0s;
}
@media (hover: hover) and (pointer: fine) {
.site-nav__item.has-menu:hover > .site-nav__menu {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity .18s .06s, transform .22s .06s var(--ease), visibility 0s .06s;
}
}
.site-nav__item.is-closed > .site-nav__menu { opacity: 0 !important; visibility: hidden !important; }
.site-nav__menu ul { display: grid; gap: 1px; list-style: none; margin: 0; padding: 0; }
.site-nav__menu a {
display: flex;
align-items: center;
gap: 10px;
min-height: 40px;
padding: 6px 12px;
font-family: var(--font-sub);
font-size: .9063rem;
font-weight: 500;
line-height: 1.5;
color: var(--dt-ink);
text-decoration: none;
white-space: nowrap;
transition: background-color .15s, color .15s;
}
.site-nav__menu a:hover, .site-nav__menu a:focus-visible { background: var(--dt-gold-10); color: var(--dt-indigo); }
.site-nav__menu--list a::before {
content: "";
flex: none;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--dt-gold);
}
.site-nav__menu--departments { width: 520px; padding: 14px; }
.site-nav__menu--departments ul { grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.site-nav__menu--departments a { white-space: normal; min-height: 52px; font-weight: 700; color: var(--dt-indigo); }
.halo--sm { width: 38px; height: 38px; }
.halo--sm img { width: 18px; margin-top: 3px; }
.site-nav__all { margin: 10px 12px 2px; padding-top: 10px; border-top: 1px solid var(--dt-gold-30); width: calc(100% - 24px); }
.mobile-nav { position: fixed; inset: 0; z-index: 200; }
.mobile-nav__backdrop {
position: absolute;
inset: 0;
background: rgba(20, 14, 40, .55);
opacity: 0;
transition: opacity .3s var(--ease);
}
.mobile-nav__panel {
position: absolute;
top: 0;
bottom: 0;
inset-inline-start: 0;
display: flex;
flex-direction: column;
width: min(390px, 88vw);
background: var(--dt-indigo-900);
color: var(--dt-cream);
box-shadow: -18px 0 40px rgba(0, 0, 0, .3);
transform: translateX(100%);
transition: transform .35s var(--ease);
overflow: hidden;
isolation: isolate;
}
[dir="ltr"] .mobile-nav__panel { transform: translateX(-100%); }
.mobile-nav__panel::before {
content: "";
position: absolute;
z-index: -1;
inset: auto 0 0 0;
height: 60%;
background: url("../../img/theme/girih-gold.svg") center bottom / 336px 291.3px;
opacity: .07;
-webkit-mask-image: linear-gradient(180deg, transparent, #000 70%);
mask-image: linear-gradient(180deg, transparent, #000 70%);
pointer-events: none;
}
.mobile-nav.is-open .mobile-nav__backdrop { opacity: 1; }
.mobile-nav.is-open .mobile-nav__panel { transform: none; }
.mobile-nav__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid rgba(207, 173, 103, .22);
}
.mobile-nav__brand {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 700;
color: var(--dt-cream);
text-decoration: none;
}
.mobile-nav__emblem img { height: 44px; width: auto; }
.mobile-nav__close { background: transparent; border-color: rgba(207, 173, 103, .4); color: var(--dt-gold); }
.mobile-nav__close:hover { background: rgba(207, 173, 103, .12); border-color: var(--dt-gold); }
.mobile-nav__search { padding: 14px 16px 6px; }
.mobile-nav__search .search-box__field { box-shadow: none; }
.mobile-nav__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 16px; }
.mobile-nav__list { list-style: none; margin: 0; padding: 0; }
.mobile-nav__item { border-bottom: 1px solid rgba(207, 173, 103, .12); }
.mobile-nav__row { display: flex; align-items: center; }
.mobile-nav__row > a {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
min-height: 50px;
padding: 6px 12px;
font-family: var(--font-display);
font-size: 1.0625rem;
font-weight: 600;
color: var(--dt-cream);
text-decoration: none;
}
.mobile-nav__item.is-active > .mobile-nav__row > a { color: var(--dt-gold); }
.mobile-nav__item.is-active > .mobile-nav__row > a::before {
content: "";
width: 10px;
height: 10px;
background: url("../../img/theme/bullet-diamond.svg") center / contain no-repeat;
}
.mobile-nav__toggle {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border: 0;
border-inline-start: 1px solid rgba(207, 173, 103, .15);
background: none;
color: var(--dt-gold);
}
.mobile-nav__toggle .icon { transition: transform .25s var(--ease); }
.mobile-nav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.mobile-nav__sub { list-style: none; margin: 0 0 8px; padding: 0 22px 0 0; }
.mobile-nav__sub a {
display: flex;
align-items: center;
gap: 9px;
min-height: 42px;
padding: 4px 10px;
font-family: var(--font-sub);
font-size: .9375rem;
color: var(--dt-muted-dark);
text-decoration: none;
}
.mobile-nav__sub a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--dt-gold); flex: none; }
.mobile-nav__sub a:hover { color: var(--dt-cream); }
.mobile-nav__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
border-top: 1px solid rgba(207, 173, 103, .22);
font-family: var(--font-sub);
font-size: .9063rem;
}
.mobile-nav__phone { display: inline-flex; align-items: center; gap: 8px; color: var(--dt-cream); text-decoration: none; white-space: nowrap; }
.mobile-nav__phone .icon { color: var(--dt-gold); }
.mobile-nav__social { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.mobile-nav__social a { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(207, 173, 103, .35); border-radius: 50%; color: var(--dt-gold); }
.mobile-nav__social a:hover { background: var(--dt-gold); color: var(--dt-indigo-deep); }
@media (min-width: 1200px) { .mobile-nav { display: none !important; } }
.ticker {
position: relative;
z-index: 2;
color: var(--dt-indigo);
background: var(--dt-gold-10);
border-bottom: 1px solid var(--dt-gold-50);
font-family: var(--font-body);
font-size: 1rem;
}
.ticker__inner { display: flex; align-items: center; gap: 12px; min-height: 42px; }
.ticker__label {
display: inline-flex;
align-items: center;
gap: 8px;
flex: none;
padding-inline-end: 14px;
border-inline-end: 1px solid var(--dt-gold-50);
font-family: var(--font-display);
font-weight: 700;
color: var(--dt-gold-text);
}
.ticker__mark { width: 11px; height: 11px; background: url("../../img/theme/bullet-diamond.svg") center / contain no-repeat; }
.ticker__viewport {
position: relative;
flex: 1;
min-width: 0;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__track {
display: flex;
width: max-content;
margin: 0;
white-space: nowrap;
animation: ticker-rtl var(--ticker-dur, 45s) linear infinite;
will-change: transform;
}
.ticker__item { padding-inline: 2.5rem; }
.ticker__item::after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-inline-start: 2.5rem;
vertical-align: .1em;
background: url("../../img/theme/star-small.svg") center / contain no-repeat;
}
.ticker:hover .ticker__track,
.ticker.is-paused .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }
.ticker__toggle {
flex: none;
display: inline-grid;
place-items: center;
width: 32px;
height: 32px;
border: 1px solid var(--dt-gold-50);
border-radius: 50%;
background: var(--dt-white);
color: var(--dt-indigo);
}
.ticker__toggle:hover { border-color: var(--dt-gold); }
.ticker__toggle .icon { width: 1em; height: 1em; }
.ticker__toggle .icon-play-media { display: none; }
.ticker.is-paused .ticker__toggle .icon-play-media { display: inline-block; }
.ticker.is-paused .ticker__toggle .icon-pause { display: none; }
@media (max-width: 599px) { .ticker__label span:last-child { display: none; } .ticker__label { padding-inline-end: 8px; } }
@media (prefers-reduced-motion: reduce) {
.ticker__track { animation: none; width: auto; white-space: normal; }
.ticker__item[aria-hidden="true"], .ticker__toggle { display: none; }
.ticker__item { padding-inline: 0; }
.ticker__item::after { display: none; }
.ticker__viewport { -webkit-mask-image: none; mask-image: none; }
}
.site-footer {
--ft-w: 1000px;
position: relative;
isolation: isolate;
margin-top: 64px;
color: var(--dt-muted-dark);
background:
radial-gradient(ellipse 45% 90% at 100% 0%, rgba(207, 173, 103, .1), transparent 70%),
linear-gradient(180deg, var(--dt-indigo-900), var(--dt-indigo-950));
border-top: 3px solid var(--dt-gold);
font-family: var(--font-sub);
font-size: .875rem;
line-height: 1.75;
}
.site-main:has(> .contact-band:last-child) + .site-footer, .page-home .site-footer { margin-top: 0; }
.site-footer::after {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background: url("../../img/theme/girih-gold.svg") center top / 336px 291.3px;
opacity: .06;
-webkit-mask-image: linear-gradient(180deg, #000 30%, transparent);
mask-image: linear-gradient(180deg, #000 30%, transparent);
pointer-events: none;
}
.site-footer::before {
content: "";
position: absolute;
top: -19px;
left: 50%;
width: 36px;
height: 36px;
transform: translateX(-50%);
background: url("../../img/theme/star-cover.svg") center / contain no-repeat;
filter: drop-shadow(0 2px 4px rgba(28, 21, 53, .35));
pointer-events: none;
}
.site-footer a:not(.btn) { color: var(--dt-cream); text-decoration: none; text-underline-offset: .3em; }
.site-footer a:not(.btn):hover { color: var(--dt-white); text-decoration: underline; text-decoration-color: var(--dt-gold); }
.site-footer a:focus-visible, .site-footer button:focus-visible { outline-color: var(--dt-gold); }
.site-footer p { margin: 0; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer address { font-style: normal; }
.site-footer__main {
display: grid;
gap: 26px 40px;
align-items: start;
padding-block: 36px 28px;
}
.site-footer__main > * { min-width: 0; }
@media (min-width: 1000px) {
.site-footer__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.1fr); }
}
.ft-brand-col { display: grid; gap: 14px; justify-items: start; }
.ft-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.site-footer a.ft-brand:hover { text-decoration: none; }
.ft-brand__picture { display: block; flex: none; line-height: 0; }
.ft-brand__emblem { display: block; width: 58px; height: auto; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35)); }
.ft-brand__name { display: grid; gap: 0; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; line-height: 1.5; color: var(--dt-cream); }
.ft-brand__name small { font-family: var(--font-body); font-size: .875rem; font-weight: 400; color: var(--dt-gold); }
.social { display: flex; flex-wrap: wrap; gap: 6px; }
.social__link {
display: inline-grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid rgba(207, 173, 103, .4);
background: rgba(255, 255, 255, .04);
font-size: .875rem;
transition: background-color .2s, border-color .2s, color .2s;
}
.site-footer .social__link { color: var(--dt-gold); }
.site-footer .social__link:hover { background: var(--dt-gold); border-color: var(--dt-gold); color: var(--dt-indigo-deep); text-decoration: none; }
.site-footer h2 {
margin: 0 0 10px;
padding-bottom: 6px;
font-family: var(--font-display);
font-size: .9688rem;
font-weight: 700;
line-height: 1.4;
color: var(--dt-gold);
border-bottom: 1px solid rgba(207, 173, 103, .22);
}
.ft-nav { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px; }
.ft-links { display: grid; gap: 4px 18px; }
.ft-group--wide .ft-links { grid-template-columns: repeat(2, minmax(0, max-content)); }
.site-footer .ft-links a { display: inline-block; padding-block: 2px; font-size: .875rem; line-height: 1.7; color: #D4CDE6; }
.site-footer .ft-links a:hover { color: var(--dt-white); text-decoration: underline; text-decoration-color: var(--dt-gold); }
.ft-contact { display: grid; gap: 7px; font-size: .875rem; }
.ft-contact li { display: flex; align-items: flex-start; gap: 9px; }
.ft-contact .icon { flex: none; width: 15px; height: 15px; margin-top: .3em; color: var(--dt-gold); }
.ft-contact address { font-style: normal; color: #D4CDE6; line-height: 1.7; }
.ft-contact .ltr { direction: ltr; unicode-bidi: isolate; }
.ft-sep { color: rgba(207, 173, 103, .6); }
.ft-hours > div { display: grid; gap: 4px; justify-items: start; }
.open-status--pill {
margin: 0;
padding: 0 10px;
border-radius: 999px;
font-size: .75rem;
font-weight: 600;
line-height: 1.9;
color: var(--dt-cream);
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .11);
}
.hours { display: grid; gap: 0; margin: 0; }
.hours__row { display: flex; gap: 6px; line-height: 1.7; }
.hours__row dt { font-weight: 700; color: var(--dt-cream); white-space: nowrap; }
.hours__row dd { margin: 0; color: #CFC8E0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hours__row.is-closed dt, .hours__row.is-closed dd { color: #9D93BA; font-weight: 500; }
.site-footer__bottom { border-top: 1px solid rgba(207, 173, 103, .18); background: rgba(0, 0, 0, .18); }
.site-footer__bottom-inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 2px 24px;
padding-block: 10px;
font-size: .78rem;
line-height: 1.7;
color: #A69DC2;
}
@media (max-width: 999px) and (min-width: 700px) {
.site-footer__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ft-nav { grid-row: span 2; }
}
@media (max-width: 699px) {
.site-footer__main { padding-block: 30px 22px; gap: 22px; }
.ft-group--wide .ft-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}
.page-head {
position: relative;
isolation: isolate;
margin-bottom: clamp(26px, 3.4vw, 44px);
padding-block: 18px clamp(64px, 6vw, 84px);
overflow: hidden;
text-align: center;
color: var(--dt-cream);
background:
radial-gradient(ellipse 40% 75% at 50% 42%, rgba(207, 173, 103, .17), rgba(207, 173, 103, 0) 70%),
linear-gradient(180deg, var(--dt-indigo-900), var(--dt-indigo-950));
}
.page-head::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background: url("../../img/theme/girih-gold.svg") center top / 336px 291.3px;
opacity: .11;
-webkit-mask-image: radial-gradient(ellipse 34% 90% at 50% 45%, transparent 0 40%, #000 90%);
mask-image: radial-gradient(ellipse 34% 90% at 50% 45%, transparent 0 40%, #000 90%);
pointer-events: none;
}
.page-head::after {
content: "";
position: absolute;
z-index: -1;
left: 50%;
top: 34px;
bottom: 10px;
width: min(760px, 92vw);
transform: translateX(-50%);
background: rgba(207, 173, 103, .16);
-webkit-mask: url("../../img/theme/arch-window-line.svg") center top / 100% 100% no-repeat;
mask: url("../../img/theme/arch-window-line.svg") center top / 100% 100% no-repeat;
pointer-events: none;
}
.page-head > .container { position: relative; display: grid; justify-items: center; gap: 4px; }
.page-head .breadcrumb { justify-self: stretch; margin-bottom: clamp(20px, 3vw, 38px); }
.page-head .breadcrumb ol { color: var(--dt-muted-dark); }
.page-head .breadcrumb a { color: #D4CDE6; }
.page-head .breadcrumb a:hover { color: var(--dt-white); text-decoration-color: var(--dt-gold); }
.page-head .breadcrumb [aria-current] { color: var(--dt-gold); }
.page-head .arch-title { margin-top: 6px; max-width: 26ch; color: var(--dt-cream); --arch-c: var(--dt-gold); text-wrap: balance; }
.page-head .arch-sub { color: var(--dt-gold); }
.page-head .arch-sub--gold { color: var(--dt-gold); }
.page-head .kicker { color: var(--dt-gold); }
.page-head__kicker { margin: 0 0 4px; }
.page-head__lead {
max-width: 62ch;
margin: 10px auto 0;
font-size: 1.1875rem;
line-height: 1.85;
color: #D1CAE3;
}
.page-head .star-rule { margin-top: 18px; }
.page-head .star-rule::before, .page-head .star-rule::after { flex-basis: 64px; }
.page-head .title-rule::before { background: linear-gradient(to left, var(--dt-gold), rgba(207, 173, 103, 0)); width: 90px; }
.page-head .title-rule::after { background: linear-gradient(to right, var(--dt-gold), rgba(207, 173, 103, 0)); width: 90px; }
.page-head--pale .arch-title { --arch-c: rgba(207, 173, 103, .55); }
.page-head--post .arch-title { max-width: 34ch; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.35rem); }
.page-head--flush { padding-bottom: 64px; }
.page-head .basmala { width: 78px; margin-bottom: 6px; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .35)); }
.page-head__halo { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .3)); }
.page-head--icon .arch-title::before { display: none; }
.page-head--icon .arch-title { padding-top: 0; }
.page-head--icon .page-head__halo {
width: 96px;
height: 96px;
margin: 0 0 18px;
background: radial-gradient(circle at 50% 38%, #FFFEF4, var(--dt-cream) 60%, #F1E6C3);
border-radius: 50%;
box-shadow: 0 0 0 3px var(--dt-gold), 0 0 0 9px rgba(207, 173, 103, .14), 0 0 0 10px rgba(207, 173, 103, .55), 0 14px 30px rgba(0, 0, 0, .4);
filter: none;
}
.page-head--icon .page-head__halo img { width: 46px; height: auto; margin: 0; }
.page-head__merlons {
position: absolute;
inset: auto 0 -1px 0;
height: 18px;
background: var(--dt-white);
-webkit-mask: url("../../img/theme/merlons.svg") center bottom / 32px 18px repeat-x;
mask: url("../../img/theme/merlons.svg") center bottom / 32px 18px repeat-x;
pointer-events: none;
}
.title-rule { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px auto 0; }
.title-rule::before, .title-rule::after { content: ""; width: 64px; height: 1px; background: var(--dt-gold-rule); }
.title-rule > i { width: 9px; height: 9px; background: url("../../img/theme/star-small.svg") center / contain no-repeat; }
.breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
list-style: none;
margin: 0;
padding: 0;
font-family: var(--font-sub);
font-size: .8438rem;
color: var(--dt-muted-2);
}
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.breadcrumb li + li::before {
content: "";
flex: none;
width: 7px;
height: 7px;
background: url("../../img/theme/bullet-diamond.svg") center / contain no-repeat;
opacity: .8;
}
.breadcrumb a { color: var(--dt-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--dt-indigo); text-decoration: underline; }
.breadcrumb [aria-current] {
max-width: 44ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 700;
color: var(--dt-indigo);
}
@media (max-width: 599px) { .breadcrumb [aria-current] { max-width: 22ch; } }
.pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 10px;
margin-top: clamp(28px, 4vw, 44px);
font-family: var(--font-sub);
}
.pagination__pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.pagination__pages a, .pagination__gap {
display: inline-grid;
place-items: center;
min-width: 40px;
min-height: 44px;
padding: 0 6px;
font-family: var(--font-body);
font-size: 1.125rem;
font-weight: 700;
color: var(--dt-indigo);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color .2s, border-color .2s;
}
.pagination__pages a:hover { color: var(--dt-gold-heading); border-bottom-color: var(--dt-gold); }
.pagination__current {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 96px;
min-height: 44px;
padding-inline: 4px;
background: url("../../img/theme/folio-medallion.svg") center / 44px 38px no-repeat;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 700;
line-height: 1;
color: var(--dt-white);
}
.pagination__current::before, .pagination__current::after { content: ""; width: 22px; height: 1px; background: var(--dt-gold-rule); }
.pagination__gap { min-width: 22px; padding: 0; color: var(--dt-muted-2); }
.pagination__edge {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 0 16px;
border: 1px solid var(--dt-gold-50);
border-radius: var(--r);
background: var(--dt-white);
font-size: .9375rem;
font-weight: 700;
color: var(--dt-indigo);
text-decoration: none;
transition: border-color .2s, background-color .2s;
}
a.pagination__edge:hover { border-color: var(--dt-gold); background: var(--dt-gold-10); }
.pagination__edge .icon { color: var(--dt-gold-heading); }
.pagination__edge.is-disabled { color: #B3ABBC; border-style: dashed; background: transparent; }
.pagination__edge.is-disabled .icon { color: inherit; }
.pagination__status { flex-basis: 100%; margin: 0; text-align: center; font-size: .8125rem; color: var(--dt-muted-2); }
@media (max-width: 559px) {
.pagination { gap: 6px; }
.pagination__pages li.is-far { display: none; }
.pagination__edge { padding: 0 12px; }
.pagination__edge span { display: none; }
.pagination__current { min-width: 70px; }
.pagination__current::before, .pagination__current::after { width: 10px; }
}
.search-box { position: relative; }
.search-box__field {
position: relative;
display: flex;
align-items: center;
gap: 6px;
padding: 5px;
border: 1px solid #CFCAD8;
border-radius: var(--r);
background: var(--dt-white);
transition: box-shadow .2s, border-color .2s;
}
.search-box__field:focus-within {
border-color: var(--dt-indigo);
box-shadow: 0 0 0 3px rgba(207, 173, 103, .35);
}
.search-box__icon { flex: none; display: grid; place-items: center; width: 34px; padding-inline-start: 6px; color: var(--dt-gold-heading); }
.search-box__input {
flex: 1 1 auto;
width: 0;
min-width: 0;
min-height: 42px;
padding: 6px 4px;
border: 0;
background: transparent;
color: var(--dt-ink);
font-family: var(--font-sub);
font-size: 1rem;
}
.search-box__input::placeholder { color: #6E6878; opacity: 1; }
.search-box__input:focus { outline: none; }
.search-box__input::-webkit-search-cancel-button { cursor: pointer; }
.search-box__submit { flex: none; min-height: 42px; padding-inline: 22px; }
.search-box__submit .icon { display: none; }
.search-box--hero .search-box__field {
padding: 7px;
border: 1px solid var(--dt-gold);
box-shadow: 0 16px 40px rgba(12, 8, 30, .42), 0 0 0 5px rgba(207, 173, 103, .14);
}
.search-box--hero .search-box__field:focus-within {
box-shadow: 0 16px 40px rgba(12, 8, 30, .42), 0 0 0 5px rgba(207, 173, 103, .42);
}
.search-box--hero .search-box__icon { width: 44px; font-size: 1.35rem; }
.search-box--hero .search-box__input { min-height: 54px; font-size: clamp(1.05rem, .95rem + .5vw, 1.25rem); }
.search-box--hero .search-box__submit { min-height: 54px; padding-inline: 32px; font-size: 1.05rem; }
.on-indigo .search-box--hero .search-box__submit { background: var(--dt-indigo); color: var(--dt-cream); border-color: var(--dt-indigo); }
.on-indigo .search-box--hero .search-box__submit .icon { color: var(--dt-gold); }
@media (max-width: 519px) {
.search-box--hero .search-box__submit { padding-inline: 16px; }
.search-box--hero .search-box__submit span { display: none; }
.search-box--hero .search-box__submit .icon { display: inline-block; font-size: 1.3rem; }
.search-box--hero .search-box__icon { display: none; }
.search-box--hero .search-box__input { padding-inline-start: 14px; }
}
.search-box__examples {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 16px;
font-family: var(--font-sub);
font-size: .9375rem;
}
.search-box__examples-label { color: var(--dt-gold); font-weight: 700; }
.chip--light { background: rgba(255, 255, 255, .06); border-color: rgba(207, 173, 103, .4); color: var(--dt-cream); }
.chip--light:hover, a.chip--light:hover { background: rgba(207, 173, 103, .16); border-color: var(--dt-gold); color: var(--dt-white); }
.chip--light .chip__count { color: var(--dt-muted-dark); }
.search-box--compact .search-box__field { box-shadow: none; }
.search-box--header .search-box__field { border-color: var(--dt-gold-50); }
.suggest {
position: absolute;
z-index: 60;
top: calc(100% + 8px);
inset-inline: 0;
max-height: min(70vh, 460px);
overflow: auto;
overscroll-behavior: contain;
padding: 6px;
border: 1px solid var(--dt-gold-50);
border-top: 3px solid var(--dt-indigo);
border-radius: var(--r);
background: var(--dt-white);
box-shadow: var(--sh-lift);
text-align: start;
color: var(--dt-ink);
transform-origin: top center;
animation: pop-in .18s var(--ease);
}
.suggest .loader { display: none; padding: 10px 12px; }
.suggest.is-loading .loader { display: flex; }
.suggest.is-loading .suggest__list:empty { display: none; }
.suggest__list { list-style: none; }
.suggest__opt {
display: grid;
gap: 1px;
padding: 9px 12px;
border-radius: var(--r-sm);
cursor: pointer;
line-height: 1.5;
}
.suggest__opt + .suggest__opt { margin-top: 2px; }
.suggest__opt:hover { background: var(--dt-gold-10); }
.suggest__opt.is-active { background: var(--dt-indigo-100); box-shadow: inset -3px 0 0 var(--dt-indigo); }
.suggest__title { font-family: var(--font-body); font-weight: 700; font-size: 1.08rem; color: var(--dt-ink); }
.suggest__vol { margin-inline-start: 8px; font-family: var(--font-sub); font-size: .78rem; font-weight: 700; color: var(--dt-gold-text); }
.suggest__author { font-family: var(--font-sub); font-size: .8438rem; color: var(--dt-muted); }
.suggest__opt--all {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
border-top: 1px dashed var(--dt-gold-50);
border-radius: 0 0 var(--r-sm) var(--r-sm);
color: var(--dt-indigo);
font-family: var(--font-sub);
font-weight: 700;
font-size: .9375rem;
}
.suggest__empty { padding: 8px 12px; color: var(--dt-muted); font-size: .9375rem; }
.loader { display: inline-flex; align-items: center; gap: 12px; color: var(--dt-muted); font-family: var(--font-sub); font-size: .9063rem; }
.loader__book { position: relative; flex: none; width: 40px; height: 26px; perspective: 180px; }
.loader__book::before, .loader__book::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 50%;
background: var(--dt-white);
border: 1.5px solid var(--dt-indigo);
}
.loader__book::before { left: 0; border-radius: 3px 0 0 3px; border-right-width: .75px; }
.loader__book::after { right: 0; border-radius: 0 3px 3px 0; border-left-width: .75px; }
.loader__page {
position: absolute;
z-index: 1;
top: 1px;
bottom: 1px;
left: 1.5px;
width: calc(50% - 1.5px);
background: linear-gradient(90deg, var(--dt-gold-30), var(--dt-white));
border: 1px solid rgba(55, 40, 96, .45);
border-radius: 2px 0 0 2px;
transform-origin: 100% 50%;
animation: page-flip 1.5s var(--ease-io) infinite;
}
.loader__page:nth-child(2) { animation-delay: .25s; }
.loader__page:nth-child(3) { animation-delay: .5s; }
.loader__text { white-space: nowrap; }
@keyframes page-flip { 0% { transform: rotateY(0deg); } 45%, 100% { transform: rotateY(180deg); } }
@media (prefers-reduced-motion: reduce) { .loader__page { animation: none; display: none; } }