/* ==========================================================================
   Variant: Dossier — the CV as a printed document.

   Nearly the inverse of Mashrabiya: no canvas, no motion, no cards. The
   page becomes a sheet of stock on a desk, and the sections become ruled
   blocks on it. This is the variant to send a recruiter.
   ========================================================================== */

/* Amiri — the naskh text face this variant sets Arabic in — is requested
   from the shared font link in index.html, NOT @imported here. An @import
   makes this sheet's load event wait on the font stylesheet, and the
   variant switch waits on that load event: one slow font host would stall
   the swap for seconds. The extra @font-face block costs every visitor a
   few hundred bytes; the font files themselves are only fetched when
   something actually renders in Amiri. */

/* Warm archival stock and a deep ruling red, rather than the emerald. */
html[data-variant="dossier"][data-theme="light"] {
  --bg: #e9e6de;            /* the desk */
  --bg-alt: transparent;    /* section banding would break the sheet */
  --surface: #fdfcf8;       /* the paper */
  --surface-2: #f4f1e9;
  --border: rgba(26, 24, 21, 0.14);
  --border-strong: rgba(26, 24, 21, 0.28);
  --text: #1a1815;
  --text-muted: #4a4640;
  --text-dim: #7b756c;
  --accent: #8a2f2f;
  --accent-2: #6d2424;
  --accent-soft: rgba(138, 47, 47, 0.08);
  --accent-contrast: #fdfcf8;
  --shadow-color: 35 20% 55%;
}

html[data-variant="dossier"][data-theme="dark"] {
  --bg: #0c0d0e;
  --bg-alt: transparent;
  --surface: #16181a;
  --surface-2: #1c1f21;
  --border: rgba(232, 228, 219, 0.13);
  --border-strong: rgba(232, 228, 219, 0.26);
  --text: #e8e4db;
  --text-muted: #a8a29a;
  --text-dim: #7d776e;
  --accent: #d98a7a;
  --accent-2: #eaa899;
  --accent-soft: rgba(217, 138, 122, 0.12);
  --accent-contrast: #16181a;
  --shadow-color: 20 25% 2%;
}

html[data-variant="dossier"] {
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --font-body: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body-ar: "Amiri", var(--font-display-ar);
  --font-display-ar: "Amiri", "Kufam", serif;
}

html[data-variant="dossier"] body { line-height: 1.62; }

/* The sheet ------------------------------------------------------------ */

html[data-variant="dossier"] main {
  max-width: 880px;
  margin: 92px auto 64px;
  padding: 60px clamp(24px, 6vw, 68px) 68px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 24px 70px -34px hsl(var(--shadow-color) / .6);
  /* Contact belongs under the name on a CV, not after the education
     history — the same reordering the print stylesheet has always done.
     Doing it on screen too is the point of this variant: what you read is
     what prints. */
  display: flex;
  flex-direction: column;
}
html[data-variant="dossier"] #top { order: -2; }
html[data-variant="dossier"] #contact { order: -1; }

html[data-variant="dossier"] .container { max-width: none; padding-inline: 0; }

html[data-variant="dossier"] .noise-overlay,
html[data-variant="dossier"] .cursor-glow,
html[data-variant="dossier"] .progress-bar,
html[data-variant="dossier"] .hero-canvas,
html[data-variant="dossier"] .hero-blob,
html[data-variant="dossier"] .hero-grid,
html[data-variant="dossier"] .scroll-cue { display: none; }

/* Header --------------------------------------------------------------- */

html[data-variant="dossier"] .site-header { padding: 12px 0; }
html[data-variant="dossier"] .site-header.scrolled {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  box-shadow: 0 1px 0 var(--border);
}
html[data-variant="dossier"] .brand-logo { height: 40px; width: 48px; }
html[data-variant="dossier"] .nav-link { font-size: .86rem; }

/* Letterhead ----------------------------------------------------------- */

html[data-variant="dossier"] .hero {
  min-height: 0;
  display: block;
  overflow: visible;
  border-bottom: 2px solid var(--text);
}
html[data-variant="dossier"] .hero-inner { padding: 0 0 22px; }
html[data-variant="dossier"] .hero-eyebrow {
  background: none; border: none; padding: 0;
  font-family: var(--font-body); font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 14px;
}
html[data-variant="dossier"] .status-dot { background: var(--accent); }
html[data-variant="dossier"] .hero-name {
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.02;
  margin-bottom: 12px;
}
html[data-variant="dossier"] .hero-role {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--text-muted);
  min-height: 0;
  margin-bottom: 6px;
}
html[data-variant="dossier"] .hero-meta { font-size: .95rem; margin-bottom: 22px; }
/* A document's controls sit quieter than a landing page's. The row still
   shares one height — it just sets its own, rather than inheriting the
   48px touch target the other variants want. */
html[data-variant="dossier"] .hero-cta { gap: 10px; --btn-h: 38px; }
html[data-variant="dossier"] .btn {
  border-radius: 2px; padding-inline: 16px; font-size: .86rem;
  font-family: var(--font-body); font-weight: 400;
  background: none; box-shadow: none;
  border: 1px solid var(--border-strong); color: var(--text);
}
html[data-variant="dossier"] .btn:hover {
  transform: none; box-shadow: none;
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
html[data-variant="dossier"] .btn-icon { border-radius: 2px; padding: 9px; }
html[data-variant="dossier"] .btn-icon:hover { transform: none; }

/* Sections as ruled blocks --------------------------------------------- */

html[data-variant="dossier"] .section { padding-block: 26px 0; }
html[data-variant="dossier"] .section + .section {
  border-top: 1px solid var(--border);
  margin-top: 22px;
}
html[data-variant="dossier"] .section-alt,
html[data-variant="dossier"] .contact-section { background: none; }

html[data-variant="dossier"] .section-kicker {
  font-family: var(--font-body);
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 8px;
}
html[data-variant="dossier"] .section-title {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.25; max-width: none; margin-bottom: 22px;
}

/* Cards dissolve into document blocks ----------------------------------- */

html[data-variant="dossier"] .stat-card,
html[data-variant="dossier"] .timeline-card,
html[data-variant="dossier"] .skill-card,
html[data-variant="dossier"] .edu-card,
html[data-variant="dossier"] .work-card,
html[data-variant="dossier"] .contact-card {
  background: none; border: none; box-shadow: none;
  border-radius: 0; padding: 0;
}
html[data-variant="dossier"] .stat-card:hover,
html[data-variant="dossier"] .timeline-card:hover,
html[data-variant="dossier"] .skill-card:hover,
html[data-variant="dossier"] .edu-card:hover,
html[data-variant="dossier"] .work-card:hover,
html[data-variant="dossier"] .contact-card:hover {
  transform: none; box-shadow: none; border-color: transparent; background: none;
}

html[data-variant="dossier"] .about-copy { font-size: 1.02rem; }
html[data-variant="dossier"] .about-grid { gap: 40px; margin-bottom: 30px; }

/* the figures become a ruled statistical row, not four tiles */
html[data-variant="dossier"] .stat-grid {
  border-block: 1px solid var(--border);
  padding-block: 16px;
  gap: 0;
}
html[data-variant="dossier"] .stat-card { text-align: center; padding: 0 12px; }
html[data-variant="dossier"] .stat-card + .stat-card { border-inline-start: 1px solid var(--border); }
html[data-variant="dossier"] .stat-number { font-size: 1.9rem; margin-bottom: 4px; }
html[data-variant="dossier"] .stat-label { font-size: .78rem; letter-spacing: .04em; }

/* Timeline: a dated document list on a hairline rail. */
html[data-variant="dossier"] .timeline { max-width: none; }
html[data-variant="dossier"] .timeline::before {
  background: none; width: 0;
  border-inline-start: 1px solid var(--border);
  inset-block: 4px;
}
html[data-variant="dossier"] .timeline-marker {
  width: 7px; height: 7px; top: 11px;
  background: var(--accent); border: none;
  inset-inline-start: -3px;
}
html[data-variant="dossier"] .timeline-marker::after { display: none; }
html[data-variant="dossier"] .timeline-item { margin-bottom: 24px; }
html[data-variant="dossier"] .timeline-head h3 { font-size: 1.08rem; }
html[data-variant="dossier"] .timeline-date {
  font-family: var(--font-body); font-style: italic;
  font-size: .84rem; color: var(--text-muted);
}
html[data-variant="dossier"] .timeline-card li::before {
  background: none; border-radius: 0; transform: none;
  content: "—"; width: auto; height: auto; color: var(--text-dim); top: 0;
}

/* Skills / education as document columns -------------------------------- */

html[data-variant="dossier"] .skills-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 44px; }
html[data-variant="dossier"] .skill-card h3,
html[data-variant="dossier"] .edu-card h3 { font-size: .95rem; margin-bottom: 8px; }
html[data-variant="dossier"] .tag,
html[data-variant="dossier"] .work-tags span {
  background: none; border: none; padding: 0; border-radius: 0;
  color: var(--text-muted); font-size: .9rem;
}
html[data-variant="dossier"] .tag:hover { transform: none; }
html[data-variant="dossier"] .tag:not(:last-child)::after { content: " ·"; color: var(--text-dim); }
html[data-variant="dossier"] .tag-cloud { gap: 0 8px; }
html[data-variant="dossier"] .work-tags { gap: 0 8px; }
html[data-variant="dossier"] .work-tags span:not(:last-child)::after { content: " ·"; color: var(--text-dim); }

html[data-variant="dossier"] .edu-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
html[data-variant="dossier"] .edu-icon { display: none; }
html[data-variant="dossier"] .edu-meta { font-family: var(--font-body); font-style: italic; }

/* Portfolio as an annotated list ---------------------------------------- */

html[data-variant="dossier"] .portfolio-grid { grid-template-columns: 1fr; gap: 20px; }
html[data-variant="dossier"] .work-card { flex-direction: row; gap: 18px; align-items: start; }
html[data-variant="dossier"] .work-thumb {
  flex: 0 0 132px; width: 132px; aspect-ratio: 3 / 2;
  border: 1px solid var(--border); border-radius: 2px;
}
html[data-variant="dossier"] .work-body { padding: 0; }
html[data-variant="dossier"] .work-title { font-size: 1rem; }
html[data-variant="dossier"] .work-domain {
  font-family: var(--font-body); font-style: italic; color: var(--text-dim);
}
html[data-variant="dossier"] .work-desc { font-size: .92rem; -webkit-line-clamp: unset; display: block; }
html[data-variant="dossier"] .work-go { display: none; }

/* Contact --------------------------------------------------------------- */

html[data-variant="dossier"] .contact-intro { display: none; }
/* the details sit under the name and speak for themselves */
html[data-variant="dossier"] #contact .section-kicker,
html[data-variant="dossier"] #contact .section-title { display: none; }
html[data-variant="dossier"] .contact-grid {
  display: flex; flex-wrap: wrap; gap: 6px 26px;
}
html[data-variant="dossier"] .contact-card { width: auto; padding: 0; gap: 8px; }
html[data-variant="dossier"] .contact-card::before { display: none; }
html[data-variant="dossier"] .contact-icon {
  width: 17px; height: 17px; background: none; color: var(--text-dim);
}
html[data-variant="dossier"] .contact-icon svg { width: 15px; height: 15px; }
html[data-variant="dossier"] .contact-body { flex-direction: row; align-items: baseline; gap: 6px; }
html[data-variant="dossier"] .contact-label { display: none; }
html[data-variant="dossier"] .contact-value { font-weight: 400; font-size: .9rem; }
html[data-variant="dossier"] .contact-copy-hint { display: none; }

/* `.section + .section` is a DOM-order selector, but `order` moved contact
   to the top of the page — so its rule would draw under the letterhead and
   About would be left with none. Contact rules itself off below instead. */
html[data-variant="dossier"] #contact {
  border-top: none;
  margin-top: 0;
  border-bottom: 1px solid var(--border);
  padding-block: 14px;
}

html[data-variant="dossier"] .site-footer { border-top: none; padding-block: 0 40px; }
html[data-variant="dossier"] .footer-inner { max-width: 880px; }
html[data-variant="dossier"] .to-top:hover { transform: none; }

/* Responsive ------------------------------------------------------------ */

@media (max-width: 760px) {
  html[data-variant="dossier"] main { margin: 78px 12px 40px; padding: 34px 22px 42px; }
  html[data-variant="dossier"] .skills-grid,
  html[data-variant="dossier"] .edu-grid { grid-template-columns: 1fr; }
  html[data-variant="dossier"] .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 0; }
  html[data-variant="dossier"] .stat-card:nth-child(odd) { border-inline-start: none; }
  html[data-variant="dossier"] .work-card { flex-direction: column; }
  html[data-variant="dossier"] .work-thumb { flex-basis: auto; width: 100%; }
}

/* Print ------------------------------------------------------------------ */

/* The sheet is a screen metaphor for paper; on actual paper the page IS the
   sheet, so the desk, the margins and the shadow all come off. */
@media print {
  html[data-variant="dossier"] main {
    max-width: none; margin: 0; padding: 0;
    background: none; border: none; box-shadow: none;
  }
  html[data-variant="dossier"] .hero { border-bottom: 1px solid var(--border-strong); }
  html[data-variant="dossier"] .section + .section { margin-top: 0; }
  html[data-variant="dossier"] .work-thumb { display: none; }
}