/* Fukahâ — site styles
   After the template of İSAR (isar.org.tr): Titillium Web, a teal ground with burgundy, green and
   navy bands, white cards with soft corners. Logical properties throughout, so the Arabic pages
   mirror without separate rules. */

:root {
  --paper: #f5f6fa;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --ink: #2f343b;
  --muted: #5f6670;
  --line: #e2e5ea;
  --line-strong: #c9d0d8;
  --primary: #006f85;
  --primary-2: #00819a;
  --primary-ink: #ffffff;
  --teal: #0091ad;
  --teal-dark: #007a91;
  --brown: #741d2d;
  --green: #5aaa95;
  --navy: #1f3a4d;
  --link: #00819a;
  --accent: #741d2d;
  --accent-soft: #e3f2f5;
  --rubric: #005d70;
  --focus: #0091ad;
  --row-hover: #eaf5f8;
  --row-alt: #f8f9fb;
  --shadow: 0 5px 15px rgb(0 0 0 / 5%);
  --shadow-2: 0 5px 15px rgb(0 0 0 / 10%);
  --brand-ink: #0091ad;
  --num-ink: #0091ad;
  --head-ink: #0086a0;
  --t-doktora: #8a2a3a;
  --t-yl: #00738a;
  --m-hanefi: #1f6f5c; --m-maliki: #85491f; --m-safii: #34507f; --m-hanbeli: #7a3e62; --m-zahiri: #5d5d27;
  --cover-doktora: #741d2d;
  --cover-yl: #1f4e5f;
  --pattern-opacity: 0.16;

  --font-display: "Titillium Web", "Noto Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Titillium Web", "Noto Sans", "Segoe UI", system-ui, sans-serif;
  --font-ar: "Noto Naskh Arabic", "Amiri", "Geeza Pro", serif;
  --font-ar-display: "Amiri", "Noto Naskh Arabic", serif;

  --wrap: 1320px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 10px;
  --radius-s: 6px;
  color-scheme: light;
}

/* dark: the page script always sets data-theme; the media query covers visitors without script */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f161b; --surface: #172128; --surface-2: #1d2a32; --ink: #e5eaee; --muted: #9ba8b2;
    --line: #26343d; --line-strong: #364752; --primary: #0a4250; --primary-2: #0b6a7e; --primary-ink: #ffffff;
    --teal: #0b6a7e; --teal-dark: #0a5566; --brown: #5a1824; --green: #2f6b5b; --navy: #15293a;
    --link: #62c9de; --accent: #e7a6b2; --accent-soft: #163640; --rubric: #9adfed; --focus: #62c9de;
    --row-hover: #1a2f38; --row-alt: #141d23; --pattern-opacity: 0.12;
    --shadow: 0 5px 15px rgb(0 0 0 / 25%); --shadow-2: 0 5px 18px rgb(0 0 0 / 40%);
    --brand-ink: #62c9de; --num-ink: #62c9de; --head-ink: #62c9de; --t-doktora: #f0a9b5; --t-yl: #8fd6e6;
    --m-hanefi: #9fd4c6; --m-maliki: #e9b58c; --m-safii: #a9bde6; --m-hanbeli: #e0a9c9; --m-zahiri: #d4d49a;
    --cover-doktora: #4d1520; --cover-yl: #123845;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --paper: #0f161b; --surface: #172128; --surface-2: #1d2a32; --ink: #e5eaee; --muted: #9ba8b2;
    --line: #26343d; --line-strong: #364752; --primary: #0a4250; --primary-2: #0b6a7e; --primary-ink: #ffffff;
    --teal: #0b6a7e; --teal-dark: #0a5566; --brown: #5a1824; --green: #2f6b5b; --navy: #15293a;
    --link: #62c9de; --accent: #e7a6b2; --accent-soft: #163640; --rubric: #9adfed; --focus: #62c9de;
    --row-hover: #1a2f38; --row-alt: #141d23; --pattern-opacity: 0.12;
    --shadow: 0 5px 15px rgb(0 0 0 / 25%); --shadow-2: 0 5px 18px rgb(0 0 0 / 40%);
    --brand-ink: #62c9de; --num-ink: #62c9de; --head-ink: #62c9de; --t-doktora: #f0a9b5; --t-yl: #8fd6e6;
    --m-hanefi: #9fd4c6; --m-maliki: #e9b58c; --m-safii: #a9bde6; --m-hanbeli: #e0a9c9; --m-zahiri: #d4d49a;
    --cover-doktora: #4d1520; --cover-yl: #123845;
    color-scheme: dark;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.06rem/1.6 var(--font-body);
  font-variant-numeric: lining-nums;
  overflow-x: hidden;
}
html[lang="ar"] body { font-family: var(--font-ar); font-size: 1.08rem; line-height: 1.85; }
[lang="ar"] { font-family: var(--font-ar); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--rubric); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; margin: 0 0 0.5em; }
html[lang="ar"] :is(h1, h2, h3) { font-family: var(--font-ar-display); font-weight: 700; line-height: 1.4; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip { position: absolute; inset-inline-start: 1rem; top: -4rem; z-index: 50; background: var(--surface); padding: 0.6rem 1rem; border-radius: var(--radius-s); }
.skip:focus { top: 1rem; }
.eyebrow { font: 600 0.95rem/1.3 var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--head-ink); margin: 0 0 0.5rem; }
html[lang="ar"] .eyebrow { font: 400 1.05rem/1.5 var(--font-ar); }

/* the lattice pattern, coloured through a mask */
.pattern, .page-head-pattern, .pattern-band, .band::before, .cover a::after, .index-blank {
  -webkit-mask: url("/assets/img/pattern.svg") 0 0 / 80px 80px repeat;
  mask: url("/assets/img/pattern.svg") 0 0 / 80px 80px repeat;
}

/* ---------- header ----------
   As on İSAR: over the picture at the top of the home page it is clear; on every other page, and
   once the page scrolls or a panel opens, it is solid teal. */

:root { --header-h: 6.25rem; }
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 40; color: #fff;
  background: var(--teal); box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
  transition: background-color 0.3s, box-shadow 0.3s;
}
.page-home .site-header:not(.is-solid) { background: transparent; box-shadow: none; }
.site-header::before {
  content: ""; position: absolute; inset: 0 0 -3rem; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(rgb(0 0 0 / 45%), rgb(0 0 0 / 0%)); transition: opacity 0.3s;
}
.page-home .site-header:not(.is-solid)::before { opacity: 1; }
.header-in { display: flex; align-items: center; gap: 2rem; min-height: var(--header-h); transition: min-height 0.3s; }
/* eleven sections do not fit the width of the content, so the bar runs the width of the screen */
.site-header .wrap { max-width: none; }
.site-header.is-solid .header-in { min-height: 4.5rem; }

.brand { display: inline-flex; align-items: center; gap: 0.7rem; color: inherit; text-decoration: none; flex-shrink: 0; }
.brand:hover { color: inherit; }
.mark { height: 3.3rem; width: auto; aspect-ratio: 100 / 106; color: inherit; flex-shrink: 0; }
.brand-name { font: 700 1.75rem/1 var(--font-display); letter-spacing: 0.01em; }
.brand-sep { width: 1px; height: 1.8rem; background: currentColor; opacity: 0.55; }
.brand-ar { font: 400 1.45rem/1 var(--font-ar-display); }

.site-nav { margin-inline-start: auto; }
.site-nav ul { display: flex; gap: 0.2rem clamp(0.8rem, 1.1vw, 1.6rem); list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: block; padding-block: 0.4rem; color: inherit; text-decoration: none; white-space: nowrap;
  font-size: 0.92rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size 0.25s;
}
html[dir="rtl"] .site-nav a { background-position: 100% 100%; }
html[lang="ar"] .site-nav a { font-family: var(--font-ar); font-size: 1.05rem; letter-spacing: 0; text-transform: none; }
.site-nav a:hover { color: inherit; background-size: 100% 2px; }
.site-nav a[aria-current="page"] { background-size: 100% 2px; }
/* a section with branches opens them in a list below it */
.site-nav .has-sub { position: relative; }
.site-nav .has-sub > a { display: flex; align-items: center; gap: 0.4rem; }
.site-nav .has-sub > a .chev-d { width: 0.35rem; height: 0.35rem; }
.sub-nav {
  position: absolute; top: 100%; inset-inline-start: -1rem; z-index: 5; min-width: 15rem; margin: 0; padding: 0.4rem; list-style: none;
  background: var(--surface); color: var(--ink); border-radius: var(--radius); box-shadow: 0 12px 30px rgb(0 0 0 / 18%);
  opacity: 0; visibility: hidden; translate: 0 6px; transition: opacity 0.2s, translate 0.2s, visibility 0s linear 0.2s;
}
.site-nav .has-sub:hover .sub-nav, .site-nav .has-sub:focus-within .sub-nav { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 0.2s, translate 0.2s; }
.site-nav .sub-nav { display: block; }
.sub-nav a { padding: 0.55rem 0.8rem !important; border-radius: var(--radius-s); color: var(--ink) !important; text-transform: none; letter-spacing: 0; font-size: 0.98rem; background: none !important; }
.sub-nav a:hover { background: var(--row-hover) !important; color: var(--link) !important; }
.sub-nav a[aria-current="page"] { color: var(--link) !important; }

.header-tools { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; margin-inline-start: 0.6rem; }
.site-nav + .header-tools { margin-inline-start: clamp(1rem, 1.6vw, 2rem); }
@media (max-width: 1500px) and (min-width: 1341px) { .brand-sep, .brand-ar { display: none; } }
.icon-btn {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 0; border-radius: 50%;
  background: none; color: inherit; cursor: pointer;
}
.icon-btn:hover { background: rgb(255 255 255 / 18%); }
.icon-btn svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn[hidden] { display: none; }
/* the search opens from a pill, as the search box in İSAR's header */
.search-btn { width: 4.6rem; border-radius: 20px; justify-items: end; padding-inline: 0.8rem; background: rgb(255 255 255 / 22%); }
.search-btn:hover { background: rgb(255 255 255 / 32%); }
.theme-btn .i-sun, :root[data-theme="dark"] .theme-btn .i-moon { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
.tools-sep { display: none; }
.lang-menu { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 0.35rem; height: 2.4rem; padding: 0 0.5rem; border: 0; border-radius: var(--radius-s);
  background: none; color: inherit; cursor: pointer; font: 600 0.98rem var(--font-body); letter-spacing: 0.05em;
}
.lang-btn:hover { background: rgb(255 255 255 / 18%); }
.chev-d { width: 0.4rem; height: 0.4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s; }
.lang-btn[aria-expanded="true"] .chev-d { transform: translateY(1px) rotate(-135deg); }
.lang-list {
  position: absolute; top: calc(100% + 0.5rem); inset-inline-end: 0; min-width: 11rem; margin: 0; padding: 0.35rem; list-style: none;
  background: var(--surface); color: var(--ink); border-radius: var(--radius); box-shadow: 0 10px 30px rgb(0 0 0 / 18%);
}
.lang-list[hidden] { display: none; }
.lang-list a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.7rem; color: var(--ink); text-decoration: none; border-radius: var(--radius-s); }
.lang-list a:hover { background: var(--row-hover); }
.lang-list a[aria-current] { color: var(--link); font-weight: 600; }
.lang-list a[lang="ar"] span:first-child { font-family: var(--font-ar); }
.lang-code { color: var(--muted); font-size: 0.85rem; letter-spacing: 0.04em; }
.menu-btn { display: none; }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 1.5rem; height: 3px; border-radius: 2px; background: currentColor; position: relative; transition: transform 0.2s; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; inset-inline-start: 0; }
.menu-icon::before { top: -7px; } .menu-icon::after { top: 7px; }
.menu-btn[aria-expanded="true"] .menu-icon { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-icon::before { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-icon::after { transform: translateY(-7px) rotate(-45deg); }

.search-panel { background: var(--surface); color: var(--ink); box-shadow: 0 10px 20px rgb(0 0 0 / 10%); }
.search-panel[hidden] { display: none; }
.search-form { display: flex; gap: 0.6rem; padding-block: 1rem 1.1rem; }
.search-form select, .search-form input {
  font: inherit; font-size: 1.05rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: var(--radius-s); padding: 0.55rem 0.8rem; min-height: 2.9rem;
}
.search-form input { flex: 1; min-width: 0; }
.search-form button { border: 0; border-radius: var(--radius-s); background: var(--primary-2); color: var(--primary-ink); font: 600 1.02rem var(--font-body); padding: 0 1.5rem; cursor: pointer; }
.search-form button:hover { background: var(--primary); }

@media (max-width: 1340px) {
  .site-nav + .header-tools { margin-inline-start: auto; }
  .menu-btn { display: grid; }
  .site-nav {
    position: absolute; inset-inline: 0; top: 100%; display: none; margin: 0;
    background: var(--surface); color: var(--ink); box-shadow: 0 16px 30px -18px rgb(0 0 0 / 40%);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding: 0.4rem var(--gutter) 1.2rem; max-width: var(--wrap); margin-inline: auto; }
  .site-nav a { padding-block: 0.8rem; border-bottom: 1px solid var(--line); font-size: 1.05rem; background: none; }
  .site-nav a:hover { background: none; color: var(--link); }
  .site-nav a[aria-current="page"] { color: var(--link); background: none; }
  .site-nav .has-sub > a .chev-d { display: none; }
  .sub-nav { position: static; opacity: 1; visibility: visible; translate: none; box-shadow: none; padding: 0 0 0 1.2rem; min-width: 0; background: none; }
  html[dir="rtl"] .sub-nav { padding: 0 1.2rem 0 0; }
  .sub-nav a { border-radius: 0; border-bottom: 1px solid var(--line); padding: 0.65rem 0 !important; }
}
@media (max-width: 560px) {
  :root { --header-h: 4.5rem; }
  .header-in { gap: 0.5rem; }
  .brand { gap: 0.5rem; }
  .brand-name { font-size: 1.4rem; }
  .brand-ar { font-size: 1.15rem; }
  .brand-sep { height: 1.4rem; }
  .mark { height: 2.4rem; }
  .header-tools { gap: 0; }
  .icon-btn { width: 2.2rem; height: 2.2rem; }
  .search-btn { width: 2.4rem; padding: 0; justify-items: center; }
  .search-form { flex-wrap: wrap; }
  .search-form select { flex: 1 1 100%; }
}
@media (max-width: 380px) { .brand-sep, .brand-ar { display: none; } }

/* ---------- home: showcase ----------
   A full-screen slide show, as İSAR's: a darkened picture, a large title, a few lines and an
   outlined button; dots at the foot and a mouse that points down to the page. */

.showcase { position: relative; isolation: isolate; background: #111; color: #fff; overflow: hidden; }
.slides { position: relative; height: 100vh; height: 100svh; min-height: 38rem; max-height: 62rem; }
.slide { position: absolute; inset: 0; isolation: isolate; visibility: hidden; opacity: 0; transition: opacity 1.1s ease, visibility 0s linear 1.1s; }
.slide.is-active { visibility: visible; opacity: 1; z-index: 1; transition: opacity 1.1s ease; }
.slide-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); }
.slide.is-active .slide-img { animation: settle 9s cubic-bezier(0.2, 0.6, 0.3, 1) both; }
@keyframes settle { from { transform: scale(1.08); } to { transform: scale(1.01); } }
.slide::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgb(0 0 0 / 70%) 0%, rgb(0 0 0 / 40%) 100%);
}
html[dir="rtl"] .slide::after { background: linear-gradient(270deg, rgb(0 0 0 / 70%) 0%, rgb(0 0 0 / 40%) 100%); }
.slide-in { height: 100%; display: flex; align-items: center; }
.slide-text { max-width: 44rem; padding-block: var(--header-h) 5rem; padding-inline-start: clamp(0rem, 5vw, 4.2rem); }

/* the lines of the active slide rise in turn, on first load and at every change */
.slide.is-active .slide-text > * { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.slide.is-active .slide-text > :nth-child(1) { animation-delay: 0.35s; }
.slide.is-active .slide-text > :nth-child(2) { animation-delay: 0.5s; }
.slide.is-active .slide-text > :nth-child(3) { animation-delay: 0.65s; }
.slide.is-active .slide-text > :nth-child(4) { animation-delay: 0.8s; }
.slide.is-active .slide-text > :nth-child(5) { animation-delay: 0.95s; }
@keyframes rise { from { opacity: 0; transform: translateY(1.4rem); } to { opacity: 1; transform: none; } }
.showcase-controls, .scroll-cue { animation: appear 1.2s ease 1s both; }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }

.slide-kind {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; margin: 0 0 1.2rem; padding: 0.2rem 0.9rem;
  border-radius: 20px; background: rgb(255 255 255 / 16%); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.04em; color: #fff;
}
.kind-line { display: none; }
.slide-meta { color: rgb(255 255 255 / 80%); font-weight: 400; }
.slide-meta::before { content: "·"; margin-inline-end: 0.6rem; }
.slide-ar { font: 400 clamp(1.8rem, 2.8vw, 2.4rem)/1.4 var(--font-ar-display); color: #fff; opacity: 0.9; margin: 0 0 0.2rem; max-width: 34rem; text-align: end; }
html[dir="rtl"] .slide-ar { text-align: start; }
.slide h2 { font-size: clamp(2.3rem, 4.2vw, 3.4rem); line-height: 1.18; font-weight: 600; margin: 0 0 1.4rem; max-width: 20ch; }
html[lang="ar"] .slide h2, .slide h2[lang="ar"] { font-family: var(--font-ar-display); font-weight: 700; line-height: 1.4; font-size: clamp(2.2rem, 4vw, 3.4rem); }
.slide h2 a { color: #fff; text-decoration: none; }
.slide h2 a:hover { color: #fff; }
.slide-sum {
  font-size: clamp(1.02rem, 1.2vw, 1.15rem); line-height: 1.65; color: rgb(255 255 255 / 90%); max-width: 36rem; margin: 0 0 2.2rem;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.slide-cta { display: flex; align-items: center; margin: 0; }
.cta-line { display: none; }
.cta {
  display: inline-block; min-width: 10rem; padding: 0.7rem 2.2rem; border: 1px solid #fff; border-radius: 8px; text-align: center;
  color: #fff; text-decoration: none; font-size: 1rem; font-weight: 400; transition: background-color 0.25s, color 0.25s;
}
html[lang="ar"] .cta { font-size: 1.05rem; }
.cta:hover { background: #fff; color: #1b1b1b; }
.slide-credit {
  position: absolute; inset-inline-end: var(--gutter); bottom: 1.3rem; z-index: 2; margin: 0; max-width: 40ch;
  font-size: 0.78rem; line-height: 1.4; color: rgb(255 255 255 / 60%); text-align: end;
}
.slide-credit a { color: inherit; }

/* symposium slides: the short title on one side, the poster on the other */
.slide-event::after { background: linear-gradient(90deg, rgb(0 0 0 / 78%) 0%, rgb(0 0 0 / 55%) 100%); }
html[dir="rtl"] .slide-event::after { background: linear-gradient(270deg, rgb(0 0 0 / 78%) 0%, rgb(0 0 0 / 55%) 100%); }
.slide-event .slide-in { justify-content: space-between; gap: clamp(2rem, 5vw, 5rem); }
.slide-event .slide-text { flex: 1 1 30rem; }
.slide-event .slide-sum { -webkit-line-clamp: 2; }
.poster-frame {
  text-decoration: none; flex: 0 0 auto; display: block; margin-block: calc(var(--header-h) + 1rem) 5rem; padding: 0;
  border-radius: var(--radius); overflow: hidden; box-shadow: 0 1.4rem 3rem rgb(0 0 0 / 50%);
}
.poster-frame img { display: block; height: min(58vh, 34rem); width: auto; max-width: 38vw; object-fit: contain; }
.slide.is-active .poster-frame { animation: frame-in 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s both; }
@keyframes frame-in { from { opacity: 0; transform: translateY(1.8rem); } to { opacity: 1; transform: none; } }
.poster-card {
  height: min(58vh, 34rem); aspect-ratio: 4 / 5; display: flex; flex-direction: column; justify-content: center; gap: 0.9rem;
  padding: 2.2rem 2rem; text-align: center; color: #fff; background: linear-gradient(135deg, #0091ad, #1f3a4d);
}
.pc-kind { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(255 255 255 / 80%); }
html[lang="ar"] .pc-kind { letter-spacing: 0; font-size: 1rem; }
.pc-title { font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.2; font-weight: 700; }
html[lang="ar"] .pc-title { font-family: var(--font-ar-display); line-height: 1.5; }
.pc-rule { width: 3rem; height: 2px; background: rgb(255 255 255 / 70%); margin: 0.4rem auto; }
.pc-when { font-size: 1.25rem; font-weight: 600; }
.pc-place { font-size: 1.05rem; }
.pc-org { font-size: 0.9rem; line-height: 1.45; color: rgb(255 255 255 / 75%); }

/* dots and a pause button at the foot */
.showcase-controls { position: absolute; inset-inline: 0; bottom: 2.6rem; z-index: 3; }
.controls-in { display: flex; align-items: center; gap: 0.6rem; }
.dots { display: flex; align-items: center; gap: 0.2rem; }
.dot { width: 1.4rem; height: 1.4rem; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / 45%); transition: background-color 0.2s, transform 0.2s; }
.dot:hover::before { background: rgb(255 255 255 / 80%); }
.dot[aria-current="true"]::before { background: #fff; transform: scale(1.15); }
.round-btn {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: none; color: inherit; border: 1px solid rgb(255 255 255 / 60%); transition: background-color 0.2s, border-color 0.2s;
}
.round-btn:hover { background: rgb(255 255 255 / 12%); border-color: #fff; }
.round-btn svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html[dir="rtl"] .round-btn svg { scale: -1 1; }
.round-btn.small { width: 2rem; height: 2rem; border-color: transparent; opacity: 0.75; }
.round-btn.small:hover { opacity: 1; border-color: rgb(255 255 255 / 60%); }
.chev-s { width: 0.55rem; height: 0.55rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.chev-s.next { transform: translateX(-1px) rotate(45deg); }
.chev-s.prev { transform: translateX(1px) rotate(-135deg); }
html[dir="rtl"] .chev-s { scale: -1 1; }
.pp { width: 0.55rem; height: 0.65rem; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.showcase-toggle:not(.is-playing) .pp { width: 0; height: 0; border-block: 0.4rem solid transparent; border-left: 0.6rem solid currentColor; border-right: 0; margin-left: 3px; }
html[dir="rtl"] .pp { scale: -1 1; }
/* the mouse */
.scroll-cue { position: absolute; left: 50%; bottom: 2.2rem; z-index: 3; translate: -50% 0; width: 1.75rem; height: 2.9rem; border: 2px solid rgb(255 255 255 / 80%); border-radius: 1rem; }
.scroll-cue span { position: absolute; left: 50%; top: 0.55rem; width: 2px; height: 0.55rem; margin-left: -1px; border-radius: 1px; background: #fff; animation: wheel 1.8s ease-in-out infinite; }
.scroll-cue:hover { border-color: #fff; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(-3px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(9px); } }

@media (max-width: 760px) {
  .slides { min-height: 34rem; }
  .slide::after, html[dir="rtl"] .slide::after { background: linear-gradient(0deg, rgb(0 0 0 / 80%) 0%, rgb(0 0 0 / 55%) 55%, rgb(0 0 0 / 35%) 100%); }
  .slide-in { align-items: center; justify-content: center; }
  .slide-text { padding: var(--header-h) 0 6rem; text-align: center; }
  .slide-kind, .slide-cta { justify-content: center; }
  .slide-ar { text-align: center; font-size: 1.6rem; max-width: none; }
  html[dir="rtl"] .slide-ar { text-align: center; }
  .slide h2 { font-size: clamp(1.9rem, 8vw, 2.4rem); margin: 0 auto 1rem; }
  .slide-sum { -webkit-line-clamp: 3; margin: 0 auto 1.6rem; font-size: 0.98rem; }
  .cta { padding: 0.65rem 2rem; }
  .slide-credit { inset-inline: var(--gutter); text-align: center; bottom: 0.6rem; font-size: 0.72rem; max-width: none; }
  .showcase-controls { bottom: 2rem; }
  .controls-in { justify-content: center; }
  .scroll-cue { display: none; }
  .slide-event .slide-in { flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 1.4rem; }
  .slide-event .slide-text { flex: 0 0 auto; padding-block: 0 5.5rem; }
  .poster-frame { order: -1; margin: 0 auto; }
  .poster-frame img { height: 28svh; max-width: 70vw; }
  .poster-card { height: 28svh; padding: 1rem; gap: 0.4rem; }
  .pc-title { font-size: 1.2rem; }
  .pc-org { display: none; }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue span { animation: none; } }

/* ---------- home: intro and search ---------- */

.intro { background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.intro-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 1.5rem 4rem; align-items: end; padding-block: 2.6rem 2.8rem; }
.intro h1 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); color: var(--head-ink); margin: 0 0 0.6rem; max-width: 28ch; }
.intro-text p { margin: 0; color: var(--muted); max-width: 40rem; }
.intro-search label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.4rem; }
.search-row { display: flex; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 30px; overflow: hidden; }
.search-row:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.search-row input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1.02rem; padding: 0.7rem 1.1rem; color: var(--ink); }
.search-row input:focus { outline: none; }
.search-row button { border: 0; background: var(--primary-2); color: var(--primary-ink); font: 600 1rem var(--font-body); padding: 0 1.6rem; cursor: pointer; }
html[lang="ar"] .search-row button { font-family: var(--font-ar); }
.search-row button:hover { background: var(--primary); }
@media (max-width: 860px) { .intro-in { grid-template-columns: minmax(0, 1fr); } }

/* ---------- home: section heads, as İSAR's: a teal title, two arrows and a "view all" button ---------- */

.sec-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem 1.6rem; margin-bottom: 1.8rem; }
.sec-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 600; color: var(--head-ink); margin: 0; }
.sec-head .btn-pill { margin-inline-start: auto; }
.sec-lead { color: var(--muted); margin: -1rem 0 1.4rem; max-width: 44rem; }
.sec-arrows { display: flex; align-items: center; }
.arrow-btn { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--head-ink); cursor: pointer; }
.arrow-btn + .arrow-btn { border-inline-start: 1px solid var(--line-strong); }
.arrow-btn .chev-s { width: 0.65rem; height: 0.65rem; }
.arrow-btn:hover { color: var(--ink); }
.btn-pill {
  display: inline-flex; align-items: center; min-height: 2.4rem; padding: 0.35rem 1.5rem; border-radius: 6px;
  background: var(--teal); color: #fff; text-decoration: none; font-size: 0.95rem; font-weight: 400;
  box-shadow: 0 3px 8px rgb(0 0 0 / 15%); transition: background-color 0.2s;
}
.btn-pill:hover { background: var(--teal-dark); color: #fff; }
.btn-pill.light { background: #fff; color: var(--teal); }
.btn-pill.light:hover { background: #eef7f9; color: var(--teal-dark); }
.sec-head.on-dark h2 { color: #fff; text-transform: uppercase; }
.sec-title { text-align: center; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 600; color: var(--head-ink); text-transform: uppercase; margin: 0 0 3rem; }
html[lang="ar"] .sec-title, html[lang="ar"] .sec-head.on-dark h2, html[lang="ar"] .band-head h2 { text-transform: none; }
.more-link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--link); text-decoration: none; font-size: 1rem; }
.more-link::after { content: ""; width: 0.45rem; height: 0.45rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
html[dir="rtl"] .more-link::after { transform: rotate(-135deg); }
.more-link:hover { color: var(--rubric); }

/* ---------- home: announcements and news ---------- */

.news-sec { padding-block: clamp(3rem, 6vw, 4.5rem); }
.news-track {
  list-style: none; margin: 0; padding: 0.3rem 0.3rem 1rem; display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(2, auto); grid-auto-columns: calc((100% - 2 * 1.9rem) / 3); gap: 1.9rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.news-track::-webkit-scrollbar { display: none; }
.news-card {
  scroll-snap-align: start; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.5rem; align-items: center;
  padding: 0.9rem; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
}
.news-thumb { position: relative; display: block; aspect-ratio: 5 / 7; border-radius: 6px; overflow: hidden; background: var(--surface-2); }
.news-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.news-poster {
  width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 0.35rem; padding: 0.6rem;
  background: linear-gradient(160deg, #0091ad, #1f3a4d); color: #fff; text-align: center;
}
.np-kind { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
html[lang="ar"] .np-kind { letter-spacing: 0; font-size: 0.75rem; }
.np-title { font-size: 0.86rem; font-weight: 700; line-height: 1.2; }
.np-when { font-size: 0.72rem; opacity: 0.9; }
.news-body { display: flex; flex-direction: column; gap: 0.4rem; padding-inline-end: 0.6rem; }
.news-body time { font-size: 0.85rem; color: var(--muted); }
.news-card h3 { font-size: 1.12rem; font-weight: 600; line-height: 1.45; margin: 0; }
.news-card h3 a { color: var(--ink); text-decoration: none; }
.news-card h3 a:hover { color: var(--link); }
.news-body .more-link { align-self: flex-end; margin-top: 0.4rem; }
@media (max-width: 1000px) { .news-track { grid-auto-columns: calc((100% - 1.9rem) / 2); } }
@media (max-width: 640px) {
  .news-track { grid-template-rows: none; grid-auto-columns: 86%; gap: 1rem; }
  .news-card { grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; }
}

/* ---------- home: coloured bands ---------- */

.color-band { color: #fff; padding-block: clamp(3.5rem, 7vw, 6rem); }
.band-teal { background: linear-gradient(135deg, #4a90a7, #2c5d6f); }
.band-brown { background: linear-gradient(135deg, #8b3e4d, #6a2e3a); }
.band-navy { background: var(--navy); }
:root[data-theme="dark"] .band-teal { background: linear-gradient(135deg, #2a5a6a, #183844); }
:root[data-theme="dark"] .band-brown { background: linear-gradient(135deg, #5b2833, #3f1b23); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .band-teal { background: linear-gradient(135deg, #2a5a6a, #183844); }
  :root:not([data-theme="light"]) .band-brown { background: linear-gradient(135deg, #5b2833, #3f1b23); }
}
.band-head { text-align: center; max-width: 44rem; margin: 0 auto 3rem; }
.band-head h2 { font-size: clamp(2rem, 3.4vw, 2.7rem); font-weight: 700; text-transform: uppercase; margin: 0 0 1.2rem; }
.band-head p { font-size: 1.12rem; margin: 0; color: rgb(255 255 255 / 92%); }
.band-lead { max-width: 44rem; font-size: 1.12rem; color: rgb(255 255 255 / 92%); margin: -0.6rem 0 2.2rem; }
.band-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.band-card { display: flex; flex-direction: column; }
.band-card-img { position: relative; display: block; aspect-ratio: 565 / 400; border-radius: 20px; overflow: hidden; background: rgb(0 0 0 / 15%); }
.band-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.band-card:hover .band-card-img img { transform: scale(1.04); }
.band-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.6rem 1.6rem 0; }
.band-card h3 { font-size: 1.45rem; font-weight: 600; text-transform: uppercase; margin: 0 0 1rem; }
html[lang="ar"] .band-card h3 { text-transform: none; }
.band-card h3 a { color: #fff; text-decoration: none; }
.band-card h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.band-card p { margin: 0 0 1.4rem; color: rgb(255 255 255 / 92%); }
.color-band .more-link { color: #fff; align-self: flex-end; margin-top: auto; font-size: 1.05rem; }
.color-band .more-link:hover { color: #fff; text-decoration: underline; }
@media (max-width: 760px) { .band-cards { grid-template-columns: 1fr; gap: 2rem; } .band-card-body { padding: 1.2rem 0.4rem 0; } }
.hub-band { padding-block: clamp(2.5rem, 5vw, 4rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ---------- home: numbers ---------- */

.numbers { padding-block: clamp(3.5rem, 7vw, 6rem); }
.num-list { list-style: none; margin: 0 auto; padding: 0; max-width: 64rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem 1rem; }
.num-list a { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--ink); text-decoration: none; }
.num-icon { width: 3.6rem; height: 3.6rem; fill: var(--teal); margin-bottom: 0.9rem; transition: transform 0.25s; }
:root[data-theme="dark"] .num-icon { fill: var(--link); }
.num-list a:hover .num-icon { transform: translateY(-4px); }
.num-list strong { font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.1; color: var(--head-ink); margin-bottom: 0.7rem; font-variant-numeric: lining-nums; }
.num-list span { font-size: 1.08rem; line-height: 1.4; }
@media (max-width: 760px) { .num-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .num-list li:last-child { grid-column: 1 / -1; } }

/* ---------- home: shelf of new theses ---------- */

.shelf-sec { padding-block: clamp(3rem, 6vw, 4.5rem) 1rem; }
.shelf-track {
  --edge: max(var(--gutter), (100% - var(--wrap)) / 2 + var(--gutter));
  list-style: none; margin: 0; padding: 0.6rem var(--edge) 1.6rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: 12.5rem; gap: 1.5rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge);
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.cover { scroll-snap-align: start; display: flex; }
.cover a {
  position: relative; display: flex; flex-direction: column; width: 100%; aspect-ratio: 2 / 3;
  padding: 1.35rem 1.1rem 1rem 1.35rem; background: var(--cover-yl); color: #fff; text-decoration: none;
  border-radius: 3px 8px 8px 3px;
  box-shadow: inset 7px 0 0 rgb(0 0 0 / 22%), 0 10px 18px -10px rgb(0 0 0 / 45%);
  transition: transform 0.25s ease;
}
html[dir="rtl"] .cover a {
  padding: 1.35rem 1.35rem 1rem 1.1rem; border-radius: 8px 3px 3px 8px;
  box-shadow: inset -7px 0 0 rgb(0 0 0 / 22%), 0 10px 18px -10px rgb(0 0 0 / 45%);
}
.c-doktora a { background: var(--cover-doktora); }
.cover a::before { content: ""; position: absolute; inset-block: 1.1rem; inset-inline-start: 1.35rem; width: 1px; background: rgb(255 255 255 / 45%); pointer-events: none; }
.cover a::after { content: none; }
.cover a:hover { transform: translateY(-5px); color: #fff; }
.cover a:focus-visible { outline-offset: 3px; }
.cover-type, .cover-title, .cover-rule, .cover-author, .cover-foot { padding-inline-start: 0.7rem; }
.cover-type { font: 600 0.78rem/1.2 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: rgb(255 255 255 / 80%); }
html[lang="ar"] .cover-type { font: 400 0.9rem var(--font-ar); letter-spacing: 0; }
.cover-title {
  margin-top: 0.55rem; font: 700 1.08rem/1.25 var(--font-display); color: #fff; flex-shrink: 0;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.cover-title[lang="ar"] { font: 700 1.05rem/1.6 var(--font-ar-display); }
.cover-rule { width: 2rem; height: 2px; background: #fff; opacity: 0.6; margin: 0.75rem 0 0.55rem; margin-inline-start: 0.7rem; padding: 0; flex-shrink: 0; }
.cover-author { font-size: 0.84rem; font-weight: 600; line-height: 1.3; flex-shrink: 0; }
.cover-foot { margin-top: auto; padding-top: 0.5rem; font-size: 0.74rem; line-height: 1.35; color: rgb(255 255 255 / 75%); }
@media (max-width: 560px) { .shelf-track { grid-auto-columns: 10.5rem; gap: 1rem; } .cover-title { -webkit-line-clamp: 5; font-size: 1rem; } }

/* ---------- home: the collections, as İSAR's book series ---------- */

.series { padding-block: 1.5rem clamp(3rem, 6vw, 4.5rem); }
.series-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.9rem; }
.series-list a { display: flex; flex-direction: column; height: 100%; border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: transform 0.25s, box-shadow 0.25s; }
.series-list a:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.series-top { position: relative; isolation: isolate; aspect-ratio: 27 / 20; display: flex; flex-direction: column; justify-content: center; padding: 1.4rem 2.2rem; background: #22302b; overflow: hidden; }
.s-kitaplar .series-top { background: #2a2433; }
.s-tezler .series-top { background: #26301f; }
.s-makaleler .series-top { background: #1c2230; }
.series-top::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; opacity: 0.07;
  -webkit-mask: url("/assets/img/pattern.svg") 0 0 / 60px 60px repeat; mask: url("/assets/img/pattern.svg") 0 0 / 60px 60px repeat;
}
.series-name { font-size: clamp(1.6rem, 2.3vw, 2.1rem); font-weight: 700; line-height: 1.1; color: #e8dcc0; padding-bottom: 0.6rem; border-bottom: 1px solid rgb(232 220 192 / 70%); }
.series-quill { position: absolute; inset-inline-start: 2.2rem; bottom: -0.4rem; width: 1.6rem; height: 3.2rem; background: #d8c9a6; border-radius: 100% 0 100% 0; transform: rotate(28deg); }
.series-foot { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.9rem 1.2rem 1rem; text-align: center; }
.series-foot strong { font-weight: 700; font-size: 1.05rem; }
.series-foot > span:not(.more-link) { color: var(--muted); }
.series-foot .more-link { align-self: flex-end; margin-top: 0.3rem; }
.series .soon .series-top { filter: grayscale(0.6); }
@media (max-width: 1000px) { .series-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .series-list { gap: 1rem; } .series-top { padding: 1rem 1.1rem; } .series-name { font-size: 1.25rem; } .series-quill { inset-inline-start: 1.1rem; width: 1.2rem; height: 2.4rem; } .series-foot { padding: 0.7rem 0.8rem 0.8rem; } }
@media (max-width: 340px) { .series-list { grid-template-columns: 1fr; } }

/* ---------- home: jurists on navy, as İSAR's media ---------- */

.media-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.9rem; }
.media-card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: #2d4a5e; }
:root[data-theme="dark"] .media-card { background: #1f3749; }
.media-top { position: relative; isolation: isolate; display: grid; place-items: center; aspect-ratio: 27 / 20; padding: 1rem; background: linear-gradient(135deg, #0091ad, #2c5d6f); color: #fff; text-decoration: none; overflow: hidden; }
.media-top::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; opacity: 0.1;
  -webkit-mask: url("/assets/img/pattern.svg") 0 0 / 60px 60px repeat; mask: url("/assets/img/pattern.svg") 0 0 / 60px 60px repeat;
}
.media-top span { font: 700 clamp(1.5rem, 2vw, 1.9rem)/1.5 var(--font-ar-display); text-align: center; text-shadow: 0 2px 8px rgb(0 0 0 / 25%); }
.media-body { display: flex; flex-direction: column; flex: 1; padding: 1.2rem 1.25rem 1.3rem; }
.media-card h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.4; margin: 0 0 0.5rem; }
html[lang="ar"] .media-card h3 { display: none; }
.media-card h3 a { color: #fff; text-decoration: none; }
.media-card h3 a:hover { text-decoration: underline; }
.media-meta { font-style: italic; color: rgb(255 255 255 / 75%); margin: 0 0 1rem; }
.media-card .more-link { color: #fff; align-self: flex-end; margin-top: auto; font-size: 0.92rem; font-weight: 600; }
.media-card .more-link::after { border-color: #5cc8dd; }
@media (max-width: 1000px) { .media-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .media-cards { grid-template-columns: 1fr; } }

/* ---------- home: blog, in a green box as İSAR's newsletter ---------- */

.letter-sec { padding-block: clamp(3rem, 6vw, 5rem); }
.letter { background: var(--green); color: #fff; border-radius: 20px; padding: clamp(1.6rem, 5vw, 5rem) clamp(1.2rem, 5vw, 5rem); }
.letter-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.9rem; }
.letter-card { display: flex; flex-direction: column; background: var(--surface); color: var(--ink); border-radius: var(--radius); overflow: hidden; }
.letter-img { position: relative; display: block; aspect-ratio: 323 / 200; background: var(--surface-2); }
.letter-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.letter-img .pill { z-index: 1; }
.pill { position: absolute; inset-inline-start: 1.2rem; bottom: -0.1rem; padding: 0.25rem 0.9rem; border-radius: 20px 20px 0 0; background: var(--surface); color: var(--green); font-size: 0.85rem; font-weight: 600; }
:root[data-theme="dark"] .pill { color: #8fd3c0; }
.letter-body { display: flex; flex-direction: column; flex: 1; padding: 1.3rem 1.25rem 1.2rem; }
.letter-card h3 { font-size: 1.2rem; font-weight: 600; line-height: 1.45; margin: 0 0 0.8rem; }
.letter-card h3 a { color: var(--ink); text-decoration: none; }
.letter-card h3 a:hover { color: var(--link); }
.letter-card p { margin: 0 0 1rem; font-size: 0.98rem; }
.letter-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin: auto 0 0 !important; }
.letter-foot time { color: var(--muted); font-size: 0.88rem; }
.letter .follow { margin-top: 2rem; background: rgb(255 255 255 / 14%); border: 0; border-radius: var(--radius); color: #fff; }
.letter .follow span:nth-child(2), .letter .follow strong { color: #fff; }
.letter .follow a { color: #fff; }
.letter .follow-icon { --accent: #fff; }
@media (max-width: 1000px) { .letter-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .letter-cards { grid-template-columns: 1fr; } }

/* ---------- sections ---------- */

.section { padding-block: clamp(3rem, 6vw, 5rem); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 2rem; }
.section-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--head-ink); margin: 0; }
.section-head p { margin: 0.5rem 0 0; color: var(--muted); max-width: 44rem; }
.more { font-weight: 600; text-decoration: none; white-space: nowrap; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.more:hover { border-bottom-width: 2px; }

/* posts */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.post-list { list-style: none; margin: 0; padding: 0; }
.post-item { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.1rem; padding-block: 1.1rem; border-top: 1px solid var(--line); }
.post-item:first-child { border-top: 0; padding-top: 0; }
.post-item img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; width: 100%; }
.post-item time { font-size: 0.85rem; color: var(--muted); }
.post-item h3 { font-size: 1.25rem; margin: 0.15rem 0 0.3rem; }
.post-item h3 a { color: var(--ink); text-decoration: none; }
.post-item h3 a:hover { color: var(--link); }
.post-item p { margin: 0; font-size: 0.95rem; color: var(--muted); }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1.5rem; }
.empty-note { color: var(--muted); font-style: italic; }

/* ---------- page head ----------
   As İSAR's inner pages: under the solid header, a trail from the home page and the title in teal. */

.page-head { position: relative; background: var(--paper); color: var(--ink); }
.page-head-in { padding-block: calc(var(--header-h) + clamp(2.2rem, 5vw, 4rem)) clamp(1.6rem, 3vw, 2.4rem); position: relative; }
.page-head h1 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); font-weight: 600; color: var(--head-ink); text-transform: uppercase; margin: 0 0 0.9rem; max-width: 30ch; letter-spacing: 0.01em; }
html[lang="ar"] .page-head h1 { text-transform: none; }
.page-head .lead { font-size: clamp(1.02rem, 1.3vw, 1.12rem); max-width: 48rem; color: var(--muted); margin: 0; }
/* a picture beside the title (the network page) */
.page-head.has-image .page-head-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); gap: 1.5rem 3rem; align-items: center; }
.page-head-fig { margin: 0; }
.page-head-fig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; box-shadow: var(--shadow-2); }
.page-head-fig figcaption { margin-top: 0.5rem; font-size: 0.82rem; color: var(--muted); }
.page-head-fig figcaption a { color: inherit; }
@media (max-width: 900px) {
  .page-head.has-image .page-head-in { grid-template-columns: 1fr; }
  .page-head-fig img { aspect-ratio: 21 / 9; border-radius: 12px; }
}
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; margin: 0 0 clamp(2rem, 4vw, 3.4rem); font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--muted); }
html[lang="ar"] .crumbs { text-transform: none; font-size: 1rem; }
.crumbs a { color: var(--link); text-decoration: none; }
.crumbs a:hover { color: var(--rubric); text-decoration: underline; }
.crumb-sep::before { content: ">"; color: var(--muted); }
html[dir="rtl"] .crumb-sep::before { content: "<"; }

/* ---------- collection tables ----------
   Tables, the map and the network keep the full width of the screen. */

.layout-collection, .layout-map, .layout-network { --wrap: 100%; }

.collection { padding-block: 2rem 4rem; }
.toolbar {
  display: flex; flex-wrap: wrap; align-items: end; gap: 0.9rem 1.1rem;
  background: var(--surface); border: 0; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1rem 1.1rem;
}
.field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.field-label { font-size: 1rem; font-weight: 600; color: var(--muted); }
.field input, .field select {
  font: inherit; font-size: 1.05rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: var(--radius-s); padding: 0.5rem 0.65rem; min-height: 2.6rem;
}
.field input:focus, .field select:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.field-search { flex: 1 1 18rem; }
.field-search input { width: 100%; min-width: 0; }
.filters { display: contents; }
.toolbar-actions { display: flex; gap: 0.5rem; margin-inline-start: auto; }
.btn {
  font: 600 1rem var(--font-body); min-height: 2.6rem; padding: 0.45rem 1.1rem; border-radius: var(--radius-s); cursor: pointer;
  border: 1px solid var(--primary-2); background: var(--primary-2); color: var(--primary-ink);
}
html[lang="ar"] .btn { font-family: var(--font-ar); }
.btn:hover { background: var(--primary); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-quiet:hover { background: var(--surface-2); }
.table-app.is-empty .toolbar, .table-app.is-empty .table-meta .hint { display: none; }

.table-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 1.1rem 0 0.6rem; font-size: 0.9rem; color: var(--muted); }
.table-meta p { margin: 0; }
.count { font-weight: 700; color: var(--ink); }

.table-scroll {
  position: relative; overflow: auto; max-height: min(78vh, 60rem); background: var(--surface);
  border: 0; border-radius: var(--radius); box-shadow: var(--shadow);
}
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1.05rem; line-height: 1.4; font-variant-numeric: lining-nums tabular-nums; }
.data-table th, .data-table td { text-align: start; vertical-align: top; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--line); }
.data-table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--surface-2); padding: 0;
  border-bottom: 2px solid var(--teal); white-space: nowrap;
}
.data-table thead button {
  display: flex; align-items: center; gap: 0.4rem; width: 100%; padding: 0.75rem 0.8rem;
  font: 700 0.98rem var(--font-body); color: var(--ink);
  background: none; border: 0; cursor: pointer; text-align: start;
}
html[lang="ar"] .data-table thead button { font-family: var(--font-ar); font-size: 0.95rem; letter-spacing: 0; }
.data-table thead button:hover { background: var(--accent-soft); }
.sort-icon { display: inline-flex; flex-direction: column; gap: 2px; opacity: 0.35; margin-inline-start: auto; }
.sort-icon::before, .sort-icon::after { content: ""; border-inline: 4px solid transparent; }
.sort-icon::before { border-bottom: 5px solid currentColor; }
.sort-icon::after { border-top: 5px solid currentColor; }
th[aria-sort="ascending"] .sort-icon, th[aria-sort="descending"] .sort-icon { opacity: 1; color: var(--rubric); }
th[aria-sort="ascending"] .sort-icon::after { opacity: 0.2; }
th[aria-sort="descending"] .sort-icon::before { opacity: 0.2; }
th[aria-sort="ascending"], th[aria-sort="descending"] { background: var(--accent-soft) !important; }

.data-table tbody tr.row:nth-child(4n+1) td { background: var(--row-alt); }
.data-table tbody tr.row:hover td { background: var(--row-hover); }
.data-table tbody tr.row { cursor: default; }
.data-table:has(.detail-btn) tbody tr.row { cursor: pointer; }
.cell-link { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.cell-link:hover { color: var(--link); text-decoration-color: currentColor; }
.data-table tbody tr.row.is-open td { background: var(--row-hover); border-bottom-color: transparent; }
.data-table td.col-text:first-child, .data-table td.col-loc:first-child, .data-table td.col-ar:first-child { font-weight: 600; min-width: 16rem; }
.data-table td.col-text { min-width: 9rem; }
.data-table td.col-loc { min-width: 10rem; }
.data-table td:first-child { max-width: 34rem; }
@media (min-width: 1200px) { .data-table td.col-text:first-child { min-width: 24rem; } }
.data-table .col-num, .data-table .col-hijri, .data-table .col-thesis, .data-table .col-lang, .data-table .col-madhhab, .data-table .col-yok, .data-table .col-atype, .data-table .col-ckind { white-space: nowrap; }
.data-table .col-short, .data-table .col-num { width: 1%; }
.data-table td.col-short { min-width: 6.2rem; }
.data-table td.col-doi { min-width: 9rem; overflow-wrap: anywhere; }
.data-table .ar, .data-table [lang="ar"] { font-family: var(--font-ar); font-size: 1.12em; line-height: 1.7; }
.data-table td.col-ar { min-width: 12rem; }
.num { font-variant-numeric: tabular-nums; }
.none { color: var(--line-strong); }
.col-detail { width: 2.5rem; padding-inline: 0.3rem !important; }
.detail-btn { background: none; border: 1px solid var(--line-strong); border-radius: 50%; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.detail-btn:hover { color: var(--ink); border-color: var(--ink); }
.chev { width: 0.45rem; height: 0.45rem; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.15s; }
[aria-expanded="true"] .chev { transform: translateY(2px) rotate(-135deg); }
tr.detail td { background: var(--row-hover); padding: 0.2rem 1rem 1.1rem; }
tr.detail dl { position: sticky; inset-inline-start: 1rem; max-width: min(70rem, calc(100vw - 4rem)); margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 0.7rem 1.5rem; }
tr.detail dt { font-size: 0.85rem; font-weight: 700; color: var(--head-ink); }
tr.detail dd { margin: 0.1rem 0 0; }
tr.detail div:has(> dd > [lang]), tr.detail div:first-child, tr.detail div.wide { grid-column: 1 / -1; }
tr.detail .long { margin: 0; max-width: 62rem; line-height: 1.55; }

.tag { display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.95rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.tag::before { content: ""; width: 0.45em; height: 0.45em; background: currentColor; transform: rotate(45deg); flex-shrink: 0; }
.m-hanefi { color: var(--m-hanefi); } .m-maliki { color: var(--m-maliki); } .m-safii { color: var(--m-safii); }
.m-hanbeli { color: var(--m-hanbeli); } .m-zahiri { color: var(--m-zahiri); }
.t-doktora { color: var(--t-doktora); } .t-yl { color: var(--t-yl); }
.a-arastirma { color: var(--t-yl); } .a-inceleme { color: var(--accent); } .a-ceviri { color: var(--t-doktora); }
.links { display: inline-flex; gap: 0.35rem; }
.links a { font-size: 0.9rem; font-weight: 700; text-decoration: none; padding: 0.12rem 0.45rem; border: 1px solid var(--line-strong); border-radius: 3px; }
.links a:hover { border-color: currentColor; }

.table-status { text-align: center; padding: 3rem 1rem; color: var(--muted); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); margin: 0; }
.table-app.is-loading .table-scroll { min-height: 16rem; background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%) 0 0 / 200% 100%; animation: shimmer 1.4s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }

.pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.4rem; }
.pager ul { display: flex; flex-wrap: wrap; gap: 0.3rem; list-style: none; margin: 0; padding: 0; }
.pg { font: 600 0.92rem var(--font-body); min-width: 2.4rem; min-height: 2.4rem; padding: 0.3rem 0.7rem; border-radius: var(--radius-s); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; }
html[lang="ar"] .pg { font-family: var(--font-ar); }
.pg:hover:not(:disabled) { border-color: var(--primary-2); }
.pg[aria-current="page"] { background: var(--primary-2); border-color: var(--primary-2); color: var(--primary-ink); }
.pg:disabled { opacity: 0.4; cursor: default; }
.pg-gap { padding: 0 0.3rem; color: var(--muted); }

@media (max-width: 640px) {
  .toolbar { padding: 0.9rem; }
  .field, .field-search { flex: 1 1 100%; }
  .field-size { flex: 1 1 40%; }
  .toolbar-actions { margin-inline-start: 0; flex: 1 1 100%; }
  .toolbar-actions .btn { flex: 1; }
  .table-scroll { max-height: 75vh; }
  .data-table td.col-text:first-child, .data-table td.col-loc:first-child, .data-table td.col-ar:first-child { min-width: 13rem; }
}

/* ---------- prose pages and posts ---------- */

.prose-wrap { padding-block: clamp(2rem, 5vw, 3.5rem) 4rem; }
.prose { max-width: 50rem; font-size: 1.06rem; line-height: 1.75; }
html[lang="ar"] .prose { font-size: 1.15rem; line-height: 2; }
.prose h2 { font-size: clamp(1.5rem, 2.5vw, 1.8rem); color: var(--head-ink); margin-top: 2em; padding-top: 0.6em; border-top: 1px solid var(--line); }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.25rem; margin-top: 1.8em; }
.prose ul, .prose ol { padding-inline-start: 1.3rem; }
.prose li { margin-bottom: 0.35em; }
.prose li::marker { color: var(--teal); }
.prose blockquote { margin: 1.5em 0; padding: 0.4em 1.2em; border-inline-start: 3px solid var(--teal); color: var(--muted); font-style: italic; }
.prose pre { max-width: 100%; overflow-x: auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 0.9rem 1rem; font-size: 0.88rem; line-height: 1.5; direction: ltr; text-align: left; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 1.5em 0; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: start; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { background: var(--surface-2); font-weight: 700; }
.prose .figure { margin: 2em 0; }
.figure { margin: 0; }
.figure img { border-radius: 4px; }
.figure figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.6rem; line-height: 1.5; }
.figure figcaption a { color: inherit; }

.credits { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1.4rem; margin-top: 1.5rem; }
.credits .figure img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.credits dl { margin: 0.5rem 0 0; font-size: 0.85rem; display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem; }
.credits dt { color: var(--muted); }
.credits dd { margin: 0; overflow-wrap: anywhere; }
.about-wide { max-width: var(--wrap); }

.post-head .meta { color: var(--muted); font-size: 0.95rem; margin-top: 1rem; }
.post-cover { margin-top: -1rem; }
.back { display: inline-block; margin-top: 2.5rem; font-weight: 600; text-decoration: none; }
.back::before { content: "← "; }
html[dir="rtl"] .back::before { content: "→ "; }

/* ---------- footer ----------
   As İSAR's: a light ground, teal column heads, the mark in the middle and a thin copyright line. */

.site-footer { background: var(--paper); color: var(--muted); margin-top: 2rem; font-size: 0.95rem; border-top: 1px solid var(--line); }
.footer-in { display: grid; grid-template-columns: 1fr 1fr 1.6fr auto; gap: 2.5rem; padding-block: 3.6rem 2.4rem; }
.site-footer h2 { font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--head-ink); margin: 0 0 1.3rem; }
html[lang="ar"] .site-footer h2 { font-family: var(--font-ar); text-transform: none; }
.footer-notes h2 { color: var(--ink); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.75rem; }
.footer-col a { color: var(--link); text-decoration: none; font-size: 1.02rem; }
.footer-col a:hover { text-decoration: underline; }
.footer-notes p { font-size: 0.92rem; line-height: 1.55; margin-bottom: 0.8rem; }
.footer-notes a { color: var(--link); }
.footer-langs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.footer-langs a { color: var(--muted); text-decoration: none; font-size: 1.02rem; }
.footer-langs a:hover, .footer-langs a[aria-current] { color: var(--ink); }
.footer-logo { display: flex; justify-content: center; padding-block: 1.2rem 2.6rem; }
.footer-logo .brand { color: var(--head-ink); }
.footer-logo .mark { height: 4.2rem; }
.footer-base { border-top: 1px solid var(--line); }
.footer-base-in { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.4rem; font-size: 0.92rem; }
.footer-base p { margin: 0; }
.footer-base a { color: var(--muted); text-decoration: none; }
.footer-base a:hover { color: var(--ink); }
@media (max-width: 960px) { .footer-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-in { grid-template-columns: 1fr; gap: 1.8rem; } .footer-langs { flex-direction: row; gap: 1.2rem; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.post-date { color: var(--muted); font-size: 0.95rem; }
.post-list-page { max-width: 52rem; }
.post-list-page .post-item { grid-template-columns: 12rem 1fr; gap: 1.5rem; padding-block: 1.5rem; }
.post-list-page .post-item h3 { font-size: 1.7rem; }
@media (max-width: 560px) { .post-list-page .post-item, .post-item { grid-template-columns: 1fr; } }
.source-note { max-width: 60rem; color: var(--muted); font-size: 0.97rem; margin: 0 0 1.2rem; padding-inline-start: 1rem; border-inline-start: 3px solid var(--teal); }
.credits-title { font-size: clamp(1.7rem, 3vw, 2.1rem); margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.credit-caption { font-size: 0.9rem; margin: 0.6rem 0 0; font-weight: 600; line-height: 1.45; }

/* ---------- jurist pages ---------- */

.jurist-ar { font: 400 clamp(2rem, 3.6vw, 2.9rem)/1.4 var(--font-ar-display); color: var(--accent); margin: 0 0 0.1rem; }
html[dir="ltr"] .jurist-ar { text-align: left; }
.jurist-head h1 { max-width: 30ch; text-transform: none; }
.jurist-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.2rem; margin: 0 0 1.1rem; color: var(--muted); font-size: 1.05rem; }
.jurist-meta > span + span::before { content: ""; }
.jurist-head .lead { max-width: 46rem; }

.jurist-body { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 3.5rem; padding-block: 3rem 2rem; align-items: start; }
.j-sec { padding-block: 0 2.6rem; margin-bottom: 2.6rem; border-bottom: 1px solid var(--line); }
.j-sec:last-child { border-bottom: 0; margin-bottom: 0; }
.j-sec h2 { font-size: clamp(1.5rem, 2.3vw, 1.85rem); color: var(--head-ink); margin-bottom: 0.3rem; display: flex; align-items: baseline; gap: 0.7rem; }
.j-sec h2 .n { font-size: 1.1rem; color: var(--muted); font-weight: 400; }
.j-note { color: var(--muted); margin: 0 0 1.3rem; font-size: 1.05rem; }

.works { margin: 0; padding: 0; list-style: none; counter-reset: w; columns: 2 16rem; column-gap: 2.5rem; }
.works li { counter-increment: w; break-inside: avoid; display: flex; flex-direction: column; padding: 0.55rem 0; border-top: 1px solid var(--line); }
.works li > span[lang="ar"] { font: 400 1.35rem/1.6 var(--font-ar-display); }
.works li > span[lang="ar"]::before { content: counter(w, arabic-indic) ". "; color: var(--accent); font-size: 0.95rem; }
.works .tr { color: var(--muted); font-size: 1rem; font-style: italic; }

.j-chain { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.j-chain h2 { font-size: 1.6rem; }
.people { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.people li { padding: 0.4rem 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; }
.people a { display: flex; flex-direction: column; color: var(--link); text-decoration: none; }
.people [lang="ar"] { font: 400 1.3rem/1.6 var(--font-ar-display); }
.people .tr { color: var(--muted); font-size: 1rem; font-style: italic; line-height: 1.35; }
.people a .tr { color: var(--link); }
.people a:hover [lang="ar"], .people a:hover .tr { color: var(--rubric); }

.j-theses { list-style: none; margin: 0; padding: 0; }
.j-theses li { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.j-theses a { color: var(--ink); text-decoration: none; font-size: 1.15rem; font-weight: 500; line-height: 1.35; }
.j-theses .t { font-size: 1.15rem; font-weight: 500; line-height: 1.35; }
.j-theses a[lang="ar"] { font: 400 1.25rem/1.6 var(--font-ar-display); }
.j-theses a:hover { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; }
.j-theses .by { color: var(--muted); font-size: 1rem; display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: center; }
.more-theses summary { cursor: pointer; padding: 0.9rem 0; border-top: 1px solid var(--line); color: var(--link); font-weight: 600; list-style: none; }
.more-theses summary::-webkit-details-marker { display: none; }
.more-theses summary::before { content: "+ "; }
.more-theses[open] summary::before { content: "− "; }

.source-text {
  font: 400 1.32rem/2.05 var(--font-ar-display); text-align: justify; padding: 1.8rem 2rem; background: var(--surface);
  border-radius: var(--radius); box-shadow: var(--shadow); border-inline-start: 4px solid var(--teal); max-height: 32rem; overflow: auto;
}
.source-text p { margin: 0 0 0.9em; }
.source-text p:first-child { font-weight: 700; color: var(--brand-ink); }
.source-ref { margin: 0.9rem 0 0; color: var(--muted); font-size: 1rem; }

.jurist-aside { position: sticky; top: 5.5rem; display: flex; flex-direction: column; gap: 1.4rem; }
.j-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.3rem 1.4rem 1.4rem; overflow: hidden; }
.j-card h2 { font-size: 1.25rem; color: var(--head-ink); margin: 0 0 0.8rem; }
.j-card h3 { font-size: 1.15rem; margin: 1.2rem 0 0.5rem; }
.facts { margin: 0; }
.facts div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.6rem; padding: 0.45rem 0; border-top: 1px solid var(--line); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.facts .alt { display: block; color: var(--muted); font-size: 0.95rem; font-style: italic; }
.places { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.places li { border: 1px solid var(--line-strong); border-radius: 20px; padding: 0.1rem 0.7rem; font-size: 0.98rem; }
.places .role { color: var(--muted); font-style: italic; }
.peers { list-style: none; margin: 0; padding: 0; }
.peers li { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.45rem 0; border-top: 1px solid var(--line); font-size: 1.02rem; }
.peers a { color: var(--ink); text-decoration: none; }
.peers a:hover { color: var(--link); text-decoration: underline; }
.peers span { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.jurist-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: stretch; padding-block: 1.5rem 4rem; border-top: 1px solid var(--line); }
.jn { display: flex; flex-direction: column; gap: 0.15rem; padding: 1.1rem 1.3rem; border: 1px solid transparent; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color 0.2s; }
.jn:hover { border-color: var(--teal); color: var(--ink); }
.jn.next { text-align: end; }
.jn-label { color: var(--muted); font-size: 0.98rem; }
.jn-label::before { content: "← "; } .jn.next .jn-label::before { content: none; } .jn.next .jn-label::after { content: " →"; }
html[dir="rtl"] .jn-label::before { content: "→ "; } html[dir="rtl"] .jn.next .jn-label::after { content: " ←"; }
.jn-name { font: 600 1.2rem/1.3 var(--font-display); }
.jn-date { color: var(--muted); font-size: 0.95rem; }
.jn-all { align-self: center; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }

@media (max-width: 960px) {
  .jurist-body { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .jurist-aside { position: static; }
}
@media (max-width: 640px) {
  .j-chain { grid-template-columns: 1fr; gap: 1.5rem; }
  .jurist-nav { grid-template-columns: 1fr 1fr; }
  .jn-all { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .source-text { padding: 1.2rem; font-size: 1.2rem; }
  .facts div { grid-template-columns: 6rem 1fr; }
}

/* ---------- home: discovery ---------- */

.popular { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.9rem; margin: 0.9rem 0 0; font-size: 1.02rem; }
.popular span { color: var(--muted); font-style: italic; }
.popular a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.popular a:hover { color: var(--link); border-color: currentColor; }

.discover { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; gap: 1.9rem; padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
.centuries, .years, .ranks { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.4rem, 3vw, 2.2rem); }
.daily { position: relative; display: flex; flex-direction: column; padding: clamp(1.6rem, 3vw, 2.4rem); background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); border-inline-start: 4px solid var(--teal); }
.daily-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem 1rem; padding-bottom: 1rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--line); }
.daily-head h2 { font: 600 1.35rem var(--font-display); color: var(--head-ink); text-transform: uppercase; margin: 0; }
html[lang="ar"] .daily-head h2 { font: 700 1.4rem var(--font-ar-display); }
.daily-head p { margin: 0; color: var(--muted); font-size: 1rem; }
.daily-ar { font: 400 clamp(1.8rem, 3vw, 2.3rem)/1.4 var(--font-ar-display); color: var(--accent); margin: 0; }
html[dir="ltr"] .daily-ar { text-align: left; }
.daily h3 { font-size: clamp(1.5rem, 2.3vw, 1.9rem); line-height: 1.2; margin: 0.2rem 0 0.6rem; }
.daily h3 a { color: var(--ink); text-decoration: none; }
.daily h3 a:hover { color: var(--link); }
.daily-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; align-items: center; color: var(--muted); margin: 0 0 1rem; }
.daily-sum { font-size: 1.04rem; line-height: 1.65; margin: 0 0 1.2rem; }
.daily-counts { display: flex; gap: 1.6rem; margin: 0 0 1.4rem; color: var(--muted); }
.daily-counts strong { font: 700 1.8rem/1 var(--font-display); color: var(--num-ink); margin-inline-end: 0.25rem; }
.daily-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: auto 0 0; }
.daily-actions .btn { text-decoration: none; display: inline-flex; align-items: center; }
.daily.is-turning .daily-body { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

.centuries h2, .years h2 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); color: var(--head-ink); margin: 0 0 0.3rem; }
.chart-lead { color: var(--muted); margin: 0 0 1.4rem; max-width: 38rem; }
.chart-note { color: var(--muted); font-size: 0.98rem; font-style: italic; margin: 0.8rem 0 0; }
.centuries h3, .ranks h3 { font-size: 1.15rem; margin: 1.7rem 0 0.7rem; }
.ranks h3:first-child { margin-top: 0; }

/* columns, one per century; the value sits on the cap */
.cols { list-style: none; margin: 0; padding: 0; height: 15rem; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; border-bottom: 1px solid var(--line-strong); }
.cols li { height: 100%; }
.cols a { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-decoration: none; color: var(--ink); }
.col-bar { width: min(24px, 60%); height: calc(var(--v) / var(--max) * 78%); background: var(--num-ink); border-radius: 4px 4px 0 0; transition: background-color 0.2s; }
.col-val { font-size: 0.98rem; margin-bottom: 0.3rem; font-variant-numeric: lining-nums tabular-nums; }
.col-lab { position: absolute; top: 100%; margin-top: 0.45rem; font-size: 0.92rem; color: var(--muted); white-space: nowrap; }
.cols a:hover .col-bar, .cols a:focus-visible .col-bar { background: var(--brown); }
.cols + .chart-note { margin-top: 2.4rem; }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chips a { display: inline-flex; gap: 0.45rem; align-items: baseline; padding: 0.25rem 0.85rem; border: 1px solid var(--line-strong); border-radius: 20px; color: var(--ink); text-decoration: none; font-size: 0.98rem; transition: border-color 0.2s, background-color 0.2s; }
.chips a span:last-child { color: var(--muted); font-size: 0.9rem; font-variant-numeric: lining-nums; }
.chips a:hover { border-color: var(--teal); background: var(--accent-soft); }

/* hover tips on chart marks */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 0.4rem); left: 50%; translate: -50% 0; z-index: 5;
  padding: 0.3rem 0.6rem; white-space: nowrap; font-size: 0.95rem; color: var(--paper); background: var(--ink); pointer-events: none;
}
.cols [data-tip]:hover::after, .cols [data-tip]:focus-visible::after { bottom: auto; top: -0.2rem; translate: -50% -100%; }

/* theses by year */
.overview { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; gap: 1.9rem; padding-block: 0 clamp(3rem, 6vw, 4.5rem); }
.ychart { position: relative; height: 16rem; margin: 0.5rem 0 2rem; padding-inline-start: 3rem; }
.ychart .grid { position: absolute; inset: 0 0 0 0; pointer-events: none; }
.ychart .grid span { position: absolute; inset-inline: 0; bottom: calc(var(--g) / var(--top) * 100%); border-top: 1px solid var(--line); }
.ychart .grid span:first-child { border-top-color: var(--line-strong); }
.ychart .grid em { position: absolute; inset-inline-start: 0; bottom: 0.15rem; font-style: normal; font-size: 0.88rem; color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }
.ybars { position: relative; list-style: none; margin: 0; padding: 0; height: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; align-items: end; }
.ybars li { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.ybars a { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; }
.ybar { display: block; width: min(16px, 100%); height: calc(var(--v) / var(--top) * 100%); background: var(--num-ink); border-radius: 3px 3px 0 0; transition: background-color 0.2s; }
.ybars .partial .ybar { background: color-mix(in srgb, var(--num-ink) 40%, transparent); }
.ybars a:hover .ybar, .ybars a:focus-visible .ybar { background: var(--brown); }
.ylab { position: absolute; top: 100%; margin-top: 0.4rem; font-size: 0.88rem; color: var(--muted); font-variant-numeric: lining-nums; }
.peak-label { position: absolute; bottom: calc(var(--v) / var(--top) * 100% + 0.25rem); font-size: 0.95rem; font-weight: 600; font-variant-numeric: lining-nums; pointer-events: none; }

/* universities: ranked bars */
.hbars { list-style: none; margin: 0; padding: 0; }
.hbars li + li { margin-top: 0.55rem; }
.hbars a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.8rem; color: var(--ink); text-decoration: none; }
.hb-name { font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-n { color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }
.hb-bar { grid-column: 1 / -1; height: 8px; width: calc(var(--v) / var(--max) * 100%); background: var(--num-ink); border-radius: 0 4px 4px 0; transition: background-color 0.2s; }
html[dir="rtl"] .hb-bar { border-radius: 4px 0 0 4px; }
.hbars a:hover .hb-bar { background: var(--brown); }
.hbars a:hover .hb-name { color: var(--link); }

.follow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 2.5rem 0 0; padding: 1rem 1.2rem; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.follow span:nth-child(2) { flex: 1; min-width: 16rem; color: var(--muted); }
.follow strong { color: var(--ink); font-weight: 600; }
.follow a { font-weight: 600; }
.follow-icon { width: 1.3rem; height: 1.3rem; flex-shrink: 0; border-radius: 3px; background:
  radial-gradient(circle at 22% 78%, var(--accent) 0 12%, transparent 13%),
  radial-gradient(circle at 22% 78%, transparent 0 34%, var(--accent) 35% 46%, transparent 47%),
  radial-gradient(circle at 22% 78%, transparent 0 60%, var(--accent) 61% 72%, transparent 73%); }

@media (max-width: 900px) {
  .discover, .overview { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ychart { padding-inline-start: 2.4rem; }
  .ylab { font-size: 0.78rem; }
  .col-lab { font-size: 0.74rem; white-space: normal; text-align: center; line-height: 1.15; width: min-content; }
}

.pages-hint { max-width: 60rem; margin: 0 0 1rem; font-size: 1.05rem; }
.quick { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.8rem; margin: 0 0 1.4rem; }
.quick-label { color: var(--muted); font-style: italic; }
.quick .chips a { font-size: 0.98rem; padding: 0.2rem 0.65rem; }

/* ---------- symposium notice on a news page ---------- */
.event-card {
  display: grid; gap: 1.6rem; margin: 0 0 2.4rem; padding: 1.4rem;
  border-radius: var(--radius); box-shadow: var(--shadow); background: var(--surface);
}
.event-card.has-poster { grid-template-columns: minmax(0, 15rem) 1fr; align-items: start; }
.event-poster { margin: 0; }
.event-poster a { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: 0 0.6rem 1.4rem rgb(0 0 0 / 18%); }
.event-poster img { display: block; width: 100%; height: auto; }
.event-poster figcaption { margin-top: 0.6rem; font-size: 0.85rem; font-style: italic; color: var(--muted); }
.event-kind { margin: 0 0 0.6rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--head-ink); }
html[lang="ar"] .event-kind { letter-spacing: 0; font-size: 1rem; }
.event-past { margin: 0 0 0.8rem; font-style: italic; color: var(--muted); }
.event-facts { margin: 0 0 1.2rem; display: grid; gap: 0.55rem; }
.event-facts div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; }
.event-facts dt { color: var(--muted); }
.event-facts dd { margin: 0; }
.event-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; margin: 0; }
.event-source { font-size: 0.92rem; color: var(--muted); }
@media (max-width: 640px) {
  .event-card.has-poster { grid-template-columns: 1fr; }
  .event-poster { max-width: 16rem; }
  .event-facts div { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* ---------- map ---------- */
.map-app { padding-block: 1.6rem 0; }
.map-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.8rem 1.2rem; margin-bottom: 1.2rem; }
.map-tools label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; color: var(--muted); }
.map-tools select, .map-tools input {
  font: inherit; font-size: 1.02rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-s); padding: 0.45rem 0.6rem; min-width: 11rem;
}
.map-find input { min-width: 16rem; }
.map-stats { margin: 0 0 0 auto; color: var(--muted); font-variant-numeric: lining-nums; }
html[dir="rtl"] .map-stats { margin: 0 auto 0 0; }
/* the map fills the width and the height of the screen under the bar; the list of a place floats over
   its south-eastern corner, the sea and the far east, where there are fewest places */
.layout-map .page-head-in { padding-bottom: 0.4rem; }
.layout-map .crumbs { margin-bottom: 1.4rem; }
.layout-map .map-app { padding-top: 1.2rem; }
.map-stage { position: relative; height: calc(100svh - 4.5rem); min-height: 30rem; max-height: 62rem; border-block: 1px solid var(--line); background: #c4deee; }
.map-stage:fullscreen { height: 100%; max-height: none; border: 0; }
.map-canvas { height: 100%; background: #c4deee; }
.map-panel {
  position: absolute; z-index: 1000; bottom: 1.4rem; right: 1rem; width: 21rem; max-height: calc(100% - 2.4rem); overflow: auto;
  padding: 1rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 24px rgb(0 0 0 / 18%);
}
.map-panel.is-open { padding: 1.2rem 1.35rem; width: 23rem; }
.map-panel h2 { padding-inline-end: 2rem; }
.map-close {
  position: absolute; top: 0.6rem; inset-inline-end: 0.6rem; width: 2rem; height: 2rem; border: 0; border-radius: 50%;
  background: none; color: var(--muted); font: 400 1.5rem/1 var(--font-body); cursor: pointer;
}
.map-close:hover { background: var(--surface-2); color: var(--ink); }
.map-zoom .map-fs svg { width: 17px; height: 17px; fill: none; stroke: #1b2226; stroke-width: 1.8; vertical-align: middle; }
.map-zoom .map-fs.is-on svg { transform: rotate(180deg); }
.map-panel h2 { margin: 0; font-size: 1.8rem; font-weight: 500; }
.map-p-ar { margin: 0.1rem 0 0; font: 400 1.4rem/1.5 var(--font-ar-display); color: var(--muted); text-align: start; }
.map-p-meta { margin: 0.3rem 0 1rem; color: var(--muted); }
.map-pick { color: var(--muted); margin-top: 0; }
.map-list { list-style: none; margin: 0; padding: 0; }
.map-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.6rem; padding: 0.5rem 0; border-top: 1px solid var(--line); }
.map-list a { flex: 1 1 100%; color: var(--link); text-decoration: none; font-size: 1.06rem; }
.map-list a:hover { color: var(--rubric); }
.map-role { font-size: 0.85rem; font-style: italic; color: var(--rubric); }
.map-date { font-size: 0.85rem; color: var(--muted); font-variant-numeric: lining-nums; }
.map-src { margin: 1rem 0 0; font-size: 0.88rem; color: var(--muted); }
.map-legend { list-style: none; margin: 0.8rem 0 0; padding: 0; color: var(--muted); font-size: 0.92rem; }
.map-legend li { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.4rem; }
.lg-dot { width: 9px; height: 9px; border-radius: 50%; background: #7d2618; border: 1.5px solid #fbf6ea; box-shadow: 0 0 0 1px rgb(0 0 0 / 15%); }
.lg-dot.big { width: 16px; height: 16px; }
.lg-dot.ring { background: transparent; border: 2px solid #7d2618; box-shadow: none; }
.map-credit { font-size: 0.85rem; color: var(--muted); padding-block: 0.9rem 2.4rem; margin: 0; }
@media (max-width: 900px) {
  .map-stage { height: auto; min-height: 0; max-height: none; background: none; }
  .map-canvas { height: 70svh; }
  .map-panel, .map-panel.is-open { position: static; width: auto; max-height: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 1.2rem var(--gutter); }
  .map-stage:fullscreen { display: flex; flex-direction: column; background: var(--surface); }
  .map-stage:fullscreen .map-canvas { flex: 1; height: auto; }
  .map-stage:fullscreen .map-panel { max-height: 40%; }
  .map-find input, .map-tools select { min-width: 0; width: 100%; }
  .map-tools label { flex: 1 1 10rem; }
  .map-stats { flex-basis: 100%; margin: 0; }
}

/* labels drawn over the tiles */
.map-canvas.leaflet-container { font-family: var(--font-body); background: #c4deee; }
.map-region, .map-water, .map-place { pointer-events: none; }
.map-region span, .map-water span { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; }
.map-region span {
  font-weight: 600; font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: #b23526;
  text-shadow: 0 0 3px rgb(255 255 255 / 85%), 0 0 1px rgb(255 255 255 / 90%);
}
.map-water span { font-style: italic; font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase; color: #3c77a6; text-shadow: 0 0 2px rgb(255 255 255 / 70%); }
.mz-0 .map-region span { font-size: 9px; letter-spacing: 0.22em; }
.mz-0 .map-water span { font-size: 8.5px; letter-spacing: 0.2em; }
.mz-2 .map-region span { font-size: 14px; letter-spacing: 0.6em; }
.mz-2 .map-water span { font-size: 12.5px; letter-spacing: 0.4em; }
.mz-3 .map-region span, .mz-4 .map-region span, .mz-5 .map-region span { font-size: 18px; letter-spacing: 0.75em; }
.mz-3 .map-water span, .mz-4 .map-water span, .mz-5 .map-water span { font-size: 15px; letter-spacing: 0.5em; }
.mz-0 .map-place span, .mz-1 .map-place span { font-size: 12px; }
html[lang="ar"] .map-region span, html[lang="ar"] .map-water span { font-family: var(--font-ar-display); letter-spacing: 0; text-transform: none; font-size: 15px; }
.map-place span {
  position: absolute; left: calc(var(--r) + 3px); top: 0; transform: translateY(-52%); white-space: nowrap;
  font-weight: 600; font-size: 13px; color: #1b2226;
  text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 5px rgb(255 255 255 / 70%);
}
html[lang="ar"] .map-place span { font-family: var(--font-ar-display); font-weight: 700; font-size: 14px; }
.map-place.is-hidden { display: none; }
.map-dot { cursor: pointer; }
.map-dot.is-picked { stroke: #e0a93a; stroke-width: 3.5; }
.leaflet-tooltip.map-tip { font: 500 13px/1.35 var(--font-body); color: #1b2226; border-radius: 2px; border-color: #c7b89d; padding: 4px 8px; }
html[lang="ar"] .leaflet-tooltip.map-tip { font-family: var(--font-ar-display); }
.map-zoom { display: flex; flex-direction: column; border: 1px solid rgb(0 0 0 / 25%); background: #fbf6ea; }
.map-zoom button { width: 34px; height: 34px; border: 0; background: none; font: 500 20px/1 var(--font-body); color: #1b2226; cursor: pointer; }
.map-zoom button + button { border-top: 1px solid rgb(0 0 0 / 18%); }
.map-zoom button:hover { background: #efe7d7; }
:root[data-theme="dark"] .leaflet-tile-pane { filter: brightness(0.8) saturate(0.9); }
:root[data-theme="dark"] .map-canvas { background: #9db2c0; }

/* a jurist's own places, in the side column */
.mini-map { margin: 0.8rem 0 0.4rem; }
.mini-map .map-canvas { height: 15rem; border: 1px solid var(--line); }
.mini-map-link { display: inline-block; margin-top: 0.5rem; font-size: 0.92rem; }

/* ---------- teacher and student ties on a jurist's page ---------- */
.ego { position: relative; margin-top: 1rem; }
.ego-stage { position: relative; display: flex; align-items: flex-start; gap: clamp(1.6rem, 4vw, 4.5rem); padding: 0.4rem 0 0.8rem; }
.ego-links { position: absolute; inset: 0 auto auto 0; pointer-events: none; overflow: visible; }
.ego-links path { fill: none; stroke: var(--line-strong); stroke-width: 1.2; transition: stroke 0.2s, opacity 0.2s; }
.ego-stage.has-focus .ego-links path { opacity: 0.25; }
.ego-stage.has-focus .ego-links path.is-on { opacity: 1; stroke: var(--rubric); stroke-width: 1.8; }
.ego-col { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; max-width: 18rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ego-col.lvm2, .ego-col.lvp2 { flex: 0.8 1 0; max-width: 15rem; }
.ego-col.lvm0, .ego-col.lvp0 { flex: 0 1 14rem; }
.ego-label { margin: 0 0 0.2rem; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
html[lang="ar"] .ego-label { letter-spacing: 0; font-size: 0.95rem; }
.ego-list { display: flex; flex-direction: column; gap: 0.45rem; }
.ego-node {
  display: flex; flex-direction: column; gap: 0.1rem; padding: 0.45rem 0.65rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-s); color: var(--ink); text-decoration: none;
  font-size: 0.98rem; line-height: 1.3; transition: border-color 0.2s, background-color 0.2s, opacity 0.2s;
}
.ego-col.lvm2 .ego-node, .ego-col.lvp2 .ego-node { font-size: 0.88rem; padding: 0.35rem 0.55rem; }
.ego-node.is-linked { color: var(--link); }
.ego-node.is-linked:hover { border-color: var(--link); background: var(--row-hover); }
.ego-node.is-outside { font-style: italic; color: var(--muted); background: transparent; border-style: dashed; }
.ego-node.is-self { font-size: 1.15rem; font-weight: 600; color: #fff; background: var(--teal); border-color: var(--teal); text-align: center; }
.ego-ar { font: 400 1.05rem/1.4 var(--font-ar-display); color: var(--muted); font-style: normal; }
.ego-date { font-size: 0.8rem; color: var(--muted); font-style: normal; font-variant-numeric: lining-nums; }
.ego-stage.has-focus .ego-node:not(.is-on):not(.is-self) { opacity: 0.45; }
.ego-stage.has-focus .ego-node.is-on { border-color: var(--rubric); }
.ego-more { margin: 0.6rem 0 0; font-size: 0.95rem; }
.j-ego { padding-block: 2.4rem 3rem; border-top: 1px solid var(--line); }
.j-ego h2 { font-size: 2rem; font-weight: 500; margin: 0 0 0.3rem; }
.ego-toggle { align-self: flex-start; margin-top: 0.2rem; padding: 0.3rem 0.7rem; font: inherit; font-size: 0.9rem; color: var(--link); background: none; border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; }
.ego-toggle:hover { border-color: var(--link); }
@media (max-width: 760px) {
  .ego-stage { flex-direction: column; align-items: stretch; gap: 1.8rem; overflow: visible; }
  .ego-list { flex-direction: row; flex-wrap: wrap; }
  .ego-col, .ego-col.lvm2, .ego-col.lvp2 { min-width: 0; }
  .ego-node { flex: 1 1 9rem; }
  .ego-node.is-self { flex: 0 1 auto; max-width: 100%; align-self: center; }
  .ego-col.lvm0, .ego-col.lvp0 { align-items: center; }
}

/* ---------- the whole network ---------- */
.net-app { padding-block: 1.6rem 0; }
.map-tools .net-check { flex-direction: row; align-items: center; gap: 0.5rem; color: var(--ink); font-size: 1rem; padding-bottom: 0.55rem; }
.map-tools .net-check input { min-width: 0; width: 1.05rem; height: 1.05rem; padding: 0; accent-color: var(--primary-2); }
.net-tip[hidden] { display: none; }
.net-stage { position: relative; height: min(82vh, 56rem); border-block: 1px solid var(--line); background: var(--surface); }
.net-canvas { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; }
.net-canvas:active { cursor: grabbing; }
.net-svg { width: 100%; height: 100%; display: block; }
.net-axis line { stroke: var(--line); stroke-width: calc(1px / var(--s, 1)); }
.net-axis text { fill: var(--muted); font: italic calc(15px / var(--s, 1)) var(--font-body); }
.net-links path { fill: none; stroke: var(--line-strong); stroke-width: calc(0.9px / var(--s, 1)); opacity: 0.8; }
.net-svg.has-focus .net-links path { opacity: 0.12; }
.net-svg.has-focus .net-links path.is-on { opacity: 1; stroke: #2f7a6d; stroke-width: calc(1.8px / var(--s, 1)); }
.net-svg.has-focus .net-links path.is-on.is-up { stroke: var(--rubric); }
.net-nodes circle { fill: var(--primary-2); stroke: var(--surface); stroke-width: calc(1px / var(--s, 1)); cursor: pointer; }
.net-nodes circle.is-outside { fill: var(--surface); stroke: var(--muted); stroke-dasharray: calc(2px / var(--s, 1)); }
.net-svg.has-focus .net-nodes circle:not(.is-on) { opacity: 0.25; }
.net-nodes circle.is-on { fill: var(--rubric); }
.net-labels text { font: 600 calc(12.5px / var(--s, 1)) var(--font-body); fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: calc(3px / var(--s, 1)); stroke-linejoin: round; cursor: pointer; }
html[lang="ar"] .net-labels text { font-family: var(--font-ar-display); font-weight: 700; }
.net-labels text.is-outside { font-style: italic; font-weight: 400; fill: var(--muted); }
.net-svg.has-focus .net-labels text:not(.is-on) { opacity: 0.2; }
.net-labels text.is-on { fill: var(--ink); }
.net-tip { position: absolute; z-index: 5; max-width: 250px; padding: 0.5rem 0.7rem; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 6px 18px rgb(0 0 0 / 15%); pointer-events: none; display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.95rem; }
.net-tip-ar { font: 400 1.1rem/1.4 var(--font-ar-display); color: var(--muted); }
.net-tip-meta { font-size: 0.82rem; color: var(--muted); }
.net-legend { position: absolute; bottom: 0.8rem; inset-inline-start: 1rem; margin: 0; padding: 0.5rem 0.8rem; list-style: none; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line); font-size: 0.88rem; color: var(--muted); display: flex; gap: 1rem; flex-wrap: wrap; }
.net-legend li { display: flex; align-items: center; gap: 0.4rem; }
.lg-node { width: 10px; height: 10px; border-radius: 50%; background: var(--primary-2); }
.lg-node.out { background: transparent; border: 1px dashed var(--muted); }
.lg-line { width: 22px; height: 0; border-top: 1.5px solid var(--line-strong); }
@media (max-width: 760px) { .net-stage { height: 72svh; } .net-legend { font-size: 0.8rem; gap: 0.6rem; } }

/* ---------- a jurist's info box, as on İslam Düşünce Atlası ---------- */
.infobox-card { padding: 0; }
.infobox { width: 100%; border-collapse: collapse; font-size: 1.02rem; line-height: 1.45; }
.infobox tr:nth-child(odd) { background: var(--surface-2); }
.infobox th, .infobox td { padding: 0.8rem 1rem; vertical-align: top; text-align: start; border-bottom: 1px solid var(--line); }
.infobox th { width: 36%; font-weight: 600; color: var(--ink); }
.infobox td { overflow-wrap: anywhere; }
.infobox tr.ib-map { background: var(--surface); }
.infobox tr.ib-map td { padding: 0.6rem 0.8rem 0.9rem; }
.infobox .mini-map { margin: 0; }
.ib-ar { font: 400 1.25rem/1.5 var(--font-ar-display); display: block; text-align: start; }
.ib-line { display: block; font-variant-numeric: lining-nums; }
.ib-sub { font-size: 0.9rem; color: var(--muted); font-style: italic; }
.ib-list { margin: 0; padding-inline-start: 1.1rem; }
.ib-list li { margin-bottom: 0.3rem; }
.ib-list li:last-child { margin-bottom: 0; }
.ib-list a { color: var(--link); }
.ib-list .role { color: var(--muted); font-style: italic; font-size: 0.92rem; }
.ib-peers li span { color: var(--muted); font-size: 0.9rem; white-space: nowrap; font-variant-numeric: lining-nums; }

/* ---------- al-Jawahir al-mudiyya: reading pages ---------- */

.cv-letter { font: 400 clamp(3.4rem, 7vw, 5.6rem)/1 var(--font-ar-display); color: var(--accent); margin: 0 0 0.2rem; }
html[dir="ltr"] .cv-letter { text-align: left; }
.cv-body { padding-block: 2.2rem 3.5rem; }
.cv-parts { margin: 0 0 2.2rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.cv-parts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cv-parts a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; min-height: 2.6rem; padding: 0.15rem 0.7rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-s); color: var(--ink); text-decoration: none; font-size: 1rem; line-height: 1.3;
  transition: border-color 0.2s, background-color 0.2s;
}
.cv-parts a span[lang="ar"] { font: 400 1.45rem/1 var(--font-ar-display); }
.cv-parts a:hover { border-color: var(--ink); background: var(--surface); }
.cv-parts a[aria-current="page"] { background: var(--teal); border-color: var(--teal); color: #fff; }

.cv-entries { max-width: 60rem; margin-inline: auto; }
.cv-chapter {
  font: 700 clamp(1.5rem, 2.4vw, 1.9rem)/1.5 var(--font-ar-display); color: var(--brand-ink); text-align: center;
  margin: 2.6rem 0 1.4rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line);
}
.cv-chapter:first-child { margin-top: 0; }
.cv-entry { padding: 1.2rem 0 1.3rem; border-bottom: 1px solid var(--line); scroll-margin-top: 6rem; }
.cv-entry:target { background: var(--row-hover); box-shadow: 0 0 0 0.9rem var(--row-hover); }
/* the line above each entry starts on the same side as the Arabic text below it */
.cv-meta { direction: rtl; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.9rem; margin: 0 0 0.35rem; font-size: 0.98rem; color: var(--muted); }
html[dir="ltr"] .cv-meta > * { direction: ltr; unicode-bidi: isolate; }
.cv-n { color: var(--muted); text-decoration: none; font-variant-numeric: lining-nums; min-width: 2.5rem; }
.cv-n::before { content: "#"; opacity: 0.6; }
.cv-n:hover { color: var(--link); }
.cv-cite { font-variant-numeric: lining-nums; }
.cv-kind { font-size: 0.9rem; letter-spacing: 0.02em; }
.cv-jurist { margin-inline-start: auto; color: var(--link); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.cv-jurist::after { content: " →"; }
html[dir="rtl"] .cv-jurist::after { content: " ←"; }
html[dir="ltr"] .cv-jurist::after { content: none; }
html[dir="ltr"] .cv-jurist::before { content: "← "; }
.cv-text { font: 400 1.34rem/2.05 var(--font-ar-display); text-align: justify; }
.cv-text p { margin: 0 0 0.6em; }
.cv-text p:last-child { margin-bottom: 0; }
.cv-text strong { color: var(--brand-ink); }
.cv-text h3 { font: 700 1.3rem/1.6 var(--font-ar-display); color: var(--accent); margin: 1.2rem 0 0.4rem; }
.cv-entry.is-ref .cv-text { font-size: 1.2rem; color: var(--muted); }
.cv-entry.is-linked { border-inline-start: 3px solid var(--teal); padding-inline-start: 1rem; }

.cv-pager { max-width: 60rem; margin: 2.4rem auto 2rem; display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; }
.cv-pager a { color: var(--link); text-decoration: none; }
.cv-pager .cv-prev, .cv-pager .cv-next { display: flex; flex-direction: column; font-size: 1.15rem; }
.cv-pager .cv-prev span, .cv-pager .cv-next span { color: var(--muted); font-size: 0.9rem; }
.cv-pager .cv-prev { grid-column: 1; }
.cv-pager .cv-up { grid-column: 2; font-size: 0.95rem; }
.cv-pager .cv-next { grid-column: 3; text-align: end; }
.cv-body > .source-note { max-width: 60rem; margin-inline: auto; }

.cv-source p:first-child { font-weight: 400; color: inherit; }
.cv-source strong { color: var(--brand-ink); }
.cv-source h3 { font: 700 1.25rem/1.6 var(--font-ar-display); color: var(--accent); margin: 1rem 0 0.3rem; }

/* the parts, above the table of all entries */
.cv-toc { margin: 0 0 2.2rem; }
.cv-toc h3 { font-size: 1.25rem; margin: 1.4rem 0 0.7rem; color: var(--muted); font-weight: 600; }
.cv-toc h3:first-of-type { margin-top: 0; }
.cv-toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.cv-toc-harf { grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr)); }
.cv-toc-kitap { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.cv-toc-list a {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem; height: 100%;
  padding: 0.5rem 0.75rem; border: 1px solid transparent; border-radius: var(--radius-s); box-shadow: var(--shadow); background: var(--surface); color: var(--ink); text-decoration: none;
  transition: border-color 0.2s;
}
.cv-toc-list a:hover { border-color: var(--teal); }
.cv-toc-list .l { font: 400 1.7rem/1 var(--font-ar-display); color: var(--brand-ink); min-width: 1.3rem; text-align: center; }
.cv-toc-list .t { font-size: 1.02rem; line-height: 1.3; }
.cv-toc-list .n { color: var(--muted); font-size: 0.88rem; font-variant-numeric: lining-nums; }
.cv-toc-kitap a { grid-template-columns: 1fr auto; }

.tag.c-tercume { color: var(--m-hanefi); }
.tag.c-kunye, .tag.c-ibn { color: var(--m-safii); }
.tag.c-nisbe, .tag.c-lakap { color: var(--m-zahiri); }
.tag.c-kadin, .tag.c-menakib { color: var(--m-hanbeli); }

@media (max-width: 700px) {
  .cv-text { font-size: 1.2rem; line-height: 1.95; }
  .cv-entry.is-linked { padding-inline-start: 0.7rem; }
  .cv-jurist { margin-inline-start: 0; }
  .cv-pager { grid-template-columns: 1fr 1fr; }
  .cv-pager .cv-up { grid-column: 1 / -1; grid-row: 2; text-align: center; }
  .cv-pager .cv-next { grid-column: 2; }
}

/* ---------- reading an OpenITI text ---------- */

.rd-title { text-transform: none !important; font: 700 clamp(1.9rem, 3.4vw, 2.6rem)/1.5 var(--font-ar-display); max-width: none; }
html[dir="ltr"] .rd-title { text-align: left; }
.rd-words { color: var(--muted); font-size: 0.95rem; margin-inline-start: 0.6rem; }
.reader { display: grid; grid-template-columns: 21rem minmax(0, 1fr); gap: 2.5rem; align-items: start; padding-block: 1rem 3.5rem; }
.rd-side { position: sticky; top: 5.5rem; display: flex; flex-direction: column; gap: 1.2rem; max-height: calc(100vh - 7rem); }
.rd-find label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.4rem; }
.rd-results { flex-shrink: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.8rem 1rem; max-height: 45vh; overflow: auto; }
.rd-results ol { list-style: none; margin: 0; padding: 0; }
.rd-results li a { display: block; padding: 0.5rem 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.rd-results li a:hover { color: var(--link); }
.rd-snip { display: block; font: 400 1.1rem/1.8 var(--font-ar-display); }
.rd-where { display: block; font-size: 0.82rem; color: var(--muted); }
.rd-count { margin: 0 0 0.4rem; font-size: 0.9rem; color: var(--muted); }
.rd-toc-wrap { min-height: 0; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 0.4rem 1rem 1rem; }
.rd-toc-wrap h2 { font-size: 1.1rem; color: var(--head-ink); margin: 0 0 0.6rem; }
.rd-toc { list-style: none; margin: 0; padding: 0 0 0 0.6rem; overflow: auto; font: 400 1.08rem/1.6 var(--font-ar-display); }
.rd-toc a { display: block; padding: 0.2rem 0.5rem; border-radius: var(--radius-s); color: var(--ink); text-decoration: none; }
.rd-toc a:hover { background: var(--row-hover); }
.rd-toc a[aria-current] { color: var(--link); font-weight: 700; }
.rd-toc .lv2 a { padding-inline-start: 1.2rem; font-size: 1rem; }
.rd-toc .lv3 a { padding-inline-start: 2rem; font-size: 0.95rem; color: var(--muted); }
.rd-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.rd-bar-end { margin: 2rem 0 1.4rem; }
.rd-part { color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }
.rd-bar .btn:disabled { opacity: 0.4; cursor: default; }
.rd-status { padding: 3rem 1rem; text-align: center; color: var(--muted); background: var(--surface); border-radius: var(--radius); }
.rd-status.is-error { color: var(--t-doktora); }
.reader.is-loading .rd-bar, .reader.is-loading .rd-toc-wrap, .reader.is-loading .rd-find { visibility: hidden; }
.rd-text { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.2rem, 3vw, 2.4rem); }
.rd-text p { margin: 0 0 0.8em; }
.rd-h { font-family: var(--font-ar-display); font-weight: 700; color: var(--head-ink); margin: 1.4em 0 0.5em; line-height: 1.6; }
h2.rd-h { font-size: 1.6rem; } h3.rd-h { font-size: 1.35rem; } h4.rd-h { font-size: 1.2rem; }
.rd-h:first-child { margin-top: 0; }
.rd-page { display: inline-block; margin-inline: 0.3rem; padding: 0 0.45rem; border-radius: 20px; background: var(--accent-soft); color: var(--link); font: 600 0.72rem/1.7 var(--font-body); text-decoration: none; vertical-align: 0.2em; direction: ltr; unicode-bidi: isolate; }
html[lang="ar"] .rd-page { font-family: var(--font-ar); }
.rd-matn { color: var(--brown); font-weight: 700; }
:root[data-theme="dark"] .rd-matn { color: var(--accent); }
.rd-var { color: var(--muted); font-size: 0.85em; }
.rd-var::before { content: "["; } .rd-var::after { content: "]"; }
.rd-text mark, .rd-results mark { background: #ffe58a; color: inherit; border-radius: 2px; }
.rd-hit { animation: hit 2.4s ease; }
@keyframes hit { 0%, 40% { background: var(--accent-soft); } 100% { background: transparent; } }
.oi-list .by [lang="ar"] { font-size: 0.95rem; }
@media (max-width: 960px) {
  .reader { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .rd-side { position: static; max-height: none; }
  .rd-toc { max-height: 40vh; }
}

/* ---------- search in the books ---------- */

.search-books { margin: 0; padding-bottom: 1rem; font-size: 0.95rem; }
.s-app { padding-block: 0.5rem 3.5rem; max-width: 64rem; }
.layout-search .s-app { margin-inline: auto; }
.s-form { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.4rem 1.5rem 1.2rem; margin-bottom: 1.6rem; }
.s-tabs { display: flex; gap: 0.4rem; margin-bottom: 1rem; }
.s-tab { padding: 0.35rem 1rem; border-radius: 20px; background: var(--accent-soft); color: var(--link); font-weight: 600; font-size: 0.95rem; border: 0; cursor: pointer; font-family: inherit; }
.s-tab:not(.is-on) { background: none; color: var(--muted); }
.s-form .search-row input { font: 400 1.2rem/1.5 var(--font-ar); }
.s-filters { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; margin-top: 1rem; }
.s-filters label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; font-weight: 600; color: var(--muted); flex: 1 1 14rem; min-width: 0; }
.s-filters select { font: inherit; font-weight: 400; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-s); padding: 0.5rem 0.6rem; min-width: 0; width: 100%; }
.s-hint { margin: 1rem 0 0; font-size: 0.9rem; color: var(--muted); }
.s-count { font-weight: 600; margin: 0 0 0.8rem; }
.s-note { color: var(--muted); }
.s-facets { margin-bottom: 1.2rem; }
.s-facets [lang="ar"] { font-family: var(--font-ar); }
.s-list { list-style: none; margin: 0; padding: 0; }
.s-list li { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.3rem; margin-bottom: 0.9rem; }
.s-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.8rem; margin: 0 0 0.4rem; }
.s-head a { font: 700 1.2rem/1.5 var(--font-ar-display); text-decoration: none; color: var(--link); }
.s-head a:hover { text-decoration: underline; }
.s-meta { color: var(--muted); font-size: 0.88rem; }
.s-snip { margin: 0; font: 400 1.2rem/1.95 var(--font-ar-display); text-align: justify; }
.s-snip mark { background: #ffe58a; color: inherit; border-radius: 2px; }
:root[data-theme="dark"] .s-snip mark, :root[data-theme="dark"] .rd-text mark, :root[data-theme="dark"] .rd-results mark { background: #7a5d00; }
.s-wait { color: var(--muted); font: italic 400 0.95rem var(--font-body); }
.s-more-wrap { text-align: center; }