/* Azhar's College Islamic History Project — page styles
   Builds on styles.css tokens (parchment / emerald / gold). */

/* ---------- Page header ---------- */
.page-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 239, 226, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.page-nav .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px; gap: 20px;
}
.page-nav .brand-logo { height: 48px; width: auto; }
.page-nav .back-link {
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-deep); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
}
.page-nav .back-link:hover { color: var(--emerald); }

/* ---------- Intro ---------- */
.hist-intro { padding: clamp(48px, 7vw, 96px) 0 clamp(28px, 4vw, 48px); text-align: center; }
.hist-intro .display {
  font-size: clamp(40px, 6vw, 72px);
  color: var(--emerald-deep);
  margin: 22px auto 0;
  max-width: 16ch;
}
.hist-intro .lede {
  max-width: 60ch; margin: 26px auto 0;
  font-size: clamp(18px, 2.2vw, 21px);
  color: var(--charcoal-soft); line-height: 1.7;
}

/* ---------- Legend / toolbar ---------- */
.tl-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px 28px;
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) 22px;
}
.tl-legend { display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: center; }
.tl-legend .item {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--charcoal-soft);
  background: none; border: none; padding: 5px 2px; margin: 0;
  cursor: pointer; user-select: none;
  transition: opacity 0.2s ease;
}
.tl-legend .item:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tl-legend .item .swatch { transition: background 0.2s ease, opacity 0.2s ease; }
.tl-legend .item.off { opacity: 0.45; }
.tl-legend .item.off .lbltext { text-decoration: line-through; }
.tl-legend .item.off .swatch { background: transparent !important; }
.tl-legend .swatch { width: 22px; height: 12px; border: 1px solid; flex-shrink: 0; }
.tl-legend .swatch.caliphate { background: var(--emerald); border-color: var(--emerald-deep); }
.tl-legend .swatch.dynasty {
  background: color-mix(in srgb, var(--gold) 22%, transparent);
  border-color: var(--gold-deep);
}
.tl-legend .swatch.scholar {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold); border-color: var(--gold-deep);
}
.tl-hint {
  font-family: var(--font-sans); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep);
  display: inline-flex; align-items: center; gap: 9px;
}
.tl-hint .a { animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

/* ---------- Scroll frame ---------- */
.tl-frame { position: relative; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.tl-scroll {
  overflow-x: auto; overflow-y: hidden;
  border: 1px solid var(--rule);
  background:
    linear-gradient(180deg, #fbf7ec 0%, var(--parchment) 100%);
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.tl-scroll.dragging { cursor: grabbing; }
.tl-scroll::-webkit-scrollbar { height: 9px; }
.tl-scroll::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 6px; }
/* right-edge fade hint */
.tl-frame::after {
  content: ""; position: absolute; top: 1px; right: var(--pad); bottom: 10px; width: 56px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(245,239,226,0.9));
  opacity: 1; transition: opacity 0.3s ease;
}
.tl-frame.scrolled-end::after { opacity: 0; }

/* ---------- Canvas ---------- */
.tl-canvas {
  position: relative;
  width: 1660px;
  height: 580px;
  margin: 0 auto;
}

/* century gridlines + axis */
.tl-grid { position: absolute; top: 18px; bottom: 240px; width: 1px;
  background: color-mix(in srgb, var(--rule) 70%, transparent); }
.tl-grid.major { background: var(--rule); }
.tl-axis {
  position: absolute; left: 0; right: 0;
  height: 2px; background: var(--charcoal);
  opacity: 0.7;
}
.tl-tick {
  position: absolute; transform: translateX(-50%);
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.1em;
  color: var(--charcoal-soft);
}
.tl-tick::before {
  content: ""; position: absolute; left: 50%; top: -9px; width: 1px; height: 7px;
  background: var(--charcoal); opacity: 0.5;
}

/* ---------- Era bands ---------- */
.tl-band {
  position: absolute; height: 44px;
  display: flex; align-items: center;
  padding: 0 12px;
  border: 1px solid;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  --bc: var(--gold-deep);
}
.tl-band .lbl {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.1;
}
.tl-band .yr {
  font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.08em;
  opacity: 0.7; margin-left: 10px; white-space: nowrap;
}
.tl-band:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(20,61,49,0.4); z-index: 5; }
.tl-band:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* dynasty: light pigment fill */
.tl-band.dynasty {
  background: color-mix(in srgb, var(--bc) 13%, var(--parchment));
  border-color: color-mix(in srgb, var(--bc) 48%, transparent);
  border-left: 3px solid var(--bc);
  color: color-mix(in srgb, var(--bc) 72%, #2c2a26);
}
.tl-band.dynasty::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 6px,
    color-mix(in srgb, var(--bc) 16%, transparent) 6px 7px);
}
.tl-band.dynasty:hover { background: color-mix(in srgb, var(--bc) 20%, var(--parchment)); }

/* caliphate: solid emerald spine, taller */
.tl-band.caliphate {
  height: 52px;
  background: var(--bc);
  border-color: color-mix(in srgb, #000 22%, var(--bc));
  color: var(--parchment);
}
.tl-band.caliphate .yr { opacity: 0.78; }
.tl-band.caliphate.hatch::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 7px, rgba(245,239,226,0.22) 7px 8px);
}
.tl-band.caliphate:hover { filter: brightness(1.08); }

/* pigment keys */
.tl-band[data-color="emerald"]   { --bc: #143d31; }
.tl-band[data-color="emerald2"]  { --bc: #1f5645; }
.tl-band[data-color="cordoba"]   { --bc: #9c5b3b; }
.tl-band[data-color="fatimid"]   { --bc: #2f7d6b; }
.tl-band[data-color="seljuk"]    { --bc: #b08a2e; }
.tl-band[data-color="hashashin"] { --bc: #5b5f78; }
.tl-band[data-color="mamluk"]    { --bc: #4a6b8a; }
.tl-band[data-color="ottoman"]   { --bc: #c07b3a; }

/* spine caption that sits under the spine */
.tl-spine-cap {
  position: absolute; transform: translateX(-50%);
  font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--gold-deep); white-space: nowrap;
}

/* ---------- Scholars (compact pins) ---------- */
.tl-dot {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--parchment);
  box-shadow: 0 0 0 1.5px var(--gold-deep);
  transform: translate(-50%, -50%); z-index: 4;
}
.tl-stem {
  position: absolute; width: 1px;
  background: color-mix(in srgb, var(--gold-deep) 50%, transparent);
  transform: translateX(-50%); z-index: 1;
}
.tl-pill {
  position: absolute; transform: translateX(-50%);
  display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap;
  padding: 5px 12px;
  background: var(--parchment);
  border: 1px solid var(--rule); border-left: 2px solid var(--gold);
  cursor: pointer; z-index: 2;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.tl-pill:hover {
  background: #fff; border-color: var(--gold);
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 12px 24px -14px rgba(20,61,49,0.45); z-index: 8;
}
.tl-pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; z-index: 8; }
.tl-pill .pnm { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--emerald-deep); line-height: 1; }
.tl-pill .pdt { font-family: var(--font-sans); font-size: 10.5px; letter-spacing: 0.04em; color: var(--gold-deep); }

/* ---------- Drawer ---------- */
.dr-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(13, 42, 34, 0.42);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
}
.dr-backdrop.open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 201;
  width: min(520px, 100%);
  background: var(--parchment);
  border-left: 1px solid var(--rule);
  box-shadow: -20px 0 60px -30px rgba(13,42,34,0.5);
  transform: translateX(100%); transition: transform 0.36s cubic-bezier(0.4,0,0.2,1);
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.dr-accent { height: 6px; flex-shrink: 0; background: var(--gold); }
.dr-scroll { overflow-y: auto; padding: 34px clamp(26px, 4vw, 44px) 56px; }
.dr-close {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  width: 40px; height: 40px; border: 1px solid var(--rule);
  background: var(--parchment); color: var(--charcoal);
  cursor: pointer; display: grid; place-items: center;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.dr-close:hover { border-color: var(--gold); color: var(--emerald); transform: rotate(90deg); }

.dr-kicker {
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: 14px;
}
.dr-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(32px, 5vw, 44px); color: var(--emerald-deep); line-height: 1.05; }
.dr-meta { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.08em; color: var(--charcoal-soft); margin-top: 12px; }
.dr-honorific { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--gold-deep); margin-top: 10px; }
.dr-tagline { font-family: var(--font-display); font-style: italic; font-size: 21px; color: var(--gold-deep); margin-top: 12px; }

/* "Known for" callout */
.dr-known { display: flex; gap: 14px; align-items: baseline; margin-top: 16px; }
.dr-known .kf-l {
  font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--gold-deep); white-space: nowrap; padding-top: 4px;
  flex-shrink: 0;
}
.dr-known .kf-t { font-family: var(--font-display); font-style: italic; font-size: 21px; color: var(--emerald); line-height: 1.4; }

/* Life & milestones */
.dr-timeline { list-style: none; margin: 0; padding: 0; }
.dr-timeline li { display: grid; grid-template-columns: 58px 1fr; gap: 16px; padding-bottom: 20px; }
.dr-timeline li:last-child { padding-bottom: 0; }
.dr-timeline .yr {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--gold-deep); text-align: right; padding-top: 1px;
}
.dr-timeline .ev { font-size: 17px; color: var(--charcoal); line-height: 1.55; position: relative; padding-left: 24px; }
.dr-timeline .ev::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 24%, transparent);
}
.dr-timeline .ev::after {
  content: ""; position: absolute; left: 4px; top: 18px; bottom: -20px; width: 1px; background: var(--rule);
}
.dr-timeline li:last-child .ev::after { display: none; }
.dr-rule { height: 1px; background: var(--rule); margin: 26px 0; }
.dr-scroll p { font-size: 18px; line-height: 1.72; color: var(--charcoal); margin: 0 0 16px; }
.dr-scroll p:last-child { margin-bottom: 0; }

.dr-label {
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--gold-deep);
  display: flex; align-items: center; gap: 12px; margin: 30px 0 16px;
}
.dr-label::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* facts */
.dr-facts { display: flex; flex-direction: column; gap: 0; }
.dr-facts .row {
  display: grid; grid-template-columns: 38% 1fr; gap: 14px;
  padding: 11px 0; border-bottom: 1px dotted var(--rule);
}
.dr-facts .row:last-child { border-bottom: none; }
.dr-facts .k { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal-soft); padding-top: 2px; }
.dr-facts .v { font-family: var(--font-display); font-size: 18px; color: var(--charcoal); }

/* works / texts */
.dr-list { display: flex; flex-direction: column; gap: 16px; }
.dr-item {
  border-left: 2px solid var(--gold);
  padding: 2px 0 2px 16px;
}
.dr-item .t { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--emerald-deep); }
.dr-item .d { font-size: 16px; color: var(--charcoal-soft); line-height: 1.6; margin-top: 4px; }

/* story */
.dr-story {
  background: color-mix(in srgb, var(--gold) 9%, var(--parchment));
  border: 1px solid var(--rule); padding: 22px 24px; margin-top: 10px;
}
.dr-story .t { font-family: var(--font-display); font-style: italic; font-size: 21px; color: var(--gold-deep); margin-bottom: 10px; }
.dr-story p { font-size: 17px; margin: 0; }

/* quote */
.dr-quote {
  background: var(--emerald-deep); color: var(--parchment);
  padding: 30px 30px 26px; margin-top: 12px; position: relative;
}
.dr-quote::before {
  content: "\201C"; font-family: var(--font-display); font-size: 90px; line-height: 1;
  color: var(--gold); opacity: 0.5; position: absolute; top: 6px; left: 18px;
}
.dr-quote .qt { font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 1.5; position: relative; }
.dr-quote .qs { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-soft); margin-top: 18px; }

/* ---------- Footer ---------- */
.hist-foot {
  margin-top: clamp(56px, 8vw, 110px);
  border-top: 1px solid var(--rule);
  padding: 40px 0;
  text-align: center;
}
.hist-foot .note { font-size: 16px; color: var(--charcoal-soft); font-style: italic; }
.hist-foot .src {
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold-deep); margin-top: 12px;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .page-nav .container { height: 64px; }
  .page-nav .brand-logo { height: 40px; }
  .tl-toolbar { padding-bottom: 18px; }
  .drawer { width: 100%; }
  .dr-facts .row { grid-template-columns: 44% 1fr; }
}