/* ==========================================================================
   Variant: Blueprint — the CV as an engineering drawing.

   Hairline grid, hard corners, no fills and no shadows. Every card is
   registered on the grid with crop marks; metadata is set in mono like
   dimension callouts. Cyanotype in the dark, drafting paper in the light.
   ========================================================================== */

html[data-variant="blueprint"][data-theme="dark"] {
  --bg: #0a1626;
  --bg-alt: #0c1b2e;
  --surface: #0e2136;
  --surface-2: #12283f;
  --border: rgba(150, 210, 255, 0.16);
  --border-strong: rgba(150, 210, 255, 0.34);
  --text: #dbeeff;
  --text-muted: #8fb4d4;
  --text-dim: #628aab;
  --accent: #6ec8ff;
  --accent-2: #a9e0ff;
  --accent-soft: rgba(110, 200, 255, 0.12);
  --accent-contrast: #061420;
  --shadow-color: 210 60% 3%;
  --bp-grid: rgba(150, 210, 255, 0.07);
  --bp-grid-major: rgba(150, 210, 255, 0.13);
}

html[data-variant="blueprint"][data-theme="light"] {
  --bg: #f4f7fa;
  --bg-alt: #eaf0f6;
  --surface: #ffffff;
  --surface-2: #eef4f9;
  --border: rgba(10, 40, 70, 0.14);
  --border-strong: rgba(10, 40, 70, 0.30);
  --text: #0a2038;
  --text-muted: #3d5670;
  --text-dim: #6b8299;
  --accent: #0b6fa8;
  --accent-2: #08557f;
  --accent-soft: rgba(11, 111, 168, 0.09);
  --accent-contrast: #ffffff;
  --shadow-color: 210 30% 62%;
  --bp-grid: rgba(10, 60, 100, 0.06);
  --bp-grid-major: rgba(10, 60, 100, 0.11);
}

html[data-variant="blueprint"] {
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
}

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

/* Minor rule every 24px, major every 120px — the grid is the page, not a
   hero decoration, so it is painted on the body and stays put while the
   content scrolls over it. */
html[data-variant="blueprint"] body {
  background-image:
    linear-gradient(var(--bp-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-grid-major) 1px, transparent 1px),
    linear-gradient(var(--bp-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-attachment: fixed;
}

html[data-variant="blueprint"] .noise-overlay,
html[data-variant="blueprint"] .hero-blob { display: none; }

html[data-variant="blueprint"] .section-alt { background: color-mix(in srgb, var(--bg-alt) 60%, transparent); }

/* the hero keeps the static square grid: with the lattice canvas off, this
   is the only backdrop, and a drafting grid is what the variant wants anyway */
html[data-variant="blueprint"] .hero-grid {
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, black 20%, transparent 80%);
}

html[data-variant="blueprint"] .progress-bar { height: 2px; box-shadow: none; background: var(--accent); }
html[data-variant="blueprint"] .cursor-glow { display: none; }

/* Type ------------------------------------------------------------------ */

html[data-variant="blueprint"] h1,
html[data-variant="blueprint"] h2,
html[data-variant="blueprint"] h3 {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -.015em;
}
html[data-variant="blueprint"][dir="rtl"] h1,
html[data-variant="blueprint"][dir="rtl"] h2,
html[data-variant="blueprint"][dir="rtl"] h3 { font-family: var(--font-body-ar); }

html[data-variant="blueprint"] .section-kicker,
html[data-variant="blueprint"] .stat-label,
html[data-variant="blueprint"] .contact-label,
html[data-variant="blueprint"] .work-domain,
html[data-variant="blueprint"] .timeline-date,
html[data-variant="blueprint"] .edu-meta {
  font-family: var(--font-mono);
  letter-spacing: .06em;
}

/* Callout labels, drawn like sheet annotations. */
html[data-variant="blueprint"] .section-kicker {
  display: inline-block;
  text-transform: uppercase;
  font-size: .7rem;
  padding: 4px 9px;
  border: 1px solid var(--border-strong);
  color: var(--accent);
  margin-bottom: 16px;
}

/* A section title carries its own dimension rule out to the margin. */
html[data-variant="blueprint"] .section-title {
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: clamp(1.5rem, 2.9vw, 2.2rem);
  padding-bottom: 14px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--border-strong);
  max-width: none;
}
html[data-variant="blueprint"][dir="rtl"] .section-title { letter-spacing: 0; text-transform: none; }

/* Hero ------------------------------------------------------------------ */

html[data-variant="blueprint"] .hero-name {
  text-transform: uppercase;
  letter-spacing: -.02em;
  font-size: clamp(2.6rem, 8vw, 5.6rem);
}
html[data-variant="blueprint"][dir="rtl"] .hero-name { text-transform: none; }
html[data-variant="blueprint"] .accent-text { font-style: normal; }
html[data-variant="blueprint"] .hero-eyebrow {
  border-radius: 0; background: none;
  border: 1px solid var(--border-strong);
  text-transform: uppercase; letter-spacing: .08em;
}
html[data-variant="blueprint"][dir="rtl"] .hero-eyebrow { text-transform: none; letter-spacing: 0; }
html[data-variant="blueprint"] .status-dot { border-radius: 0; }

html[data-variant="blueprint"] .btn { border-radius: 0; }
html[data-variant="blueprint"] .btn-primary {
  background: none; border: 1px solid var(--accent);
  color: var(--accent); box-shadow: none;
}
html[data-variant="blueprint"] .btn-primary:hover {
  background: var(--accent-soft); box-shadow: none; transform: none;
}
html[data-variant="blueprint"] .btn-ghost:hover { transform: none; background: var(--accent-soft); }
html[data-variant="blueprint"] .btn-icon { border-radius: 0; }
html[data-variant="blueprint"] .btn-icon:hover { transform: none; background: var(--accent-soft); }

/* Registered components ------------------------------------------------- */

html[data-variant="blueprint"] .stat-card,
html[data-variant="blueprint"] .timeline-card,
html[data-variant="blueprint"] .skill-card,
html[data-variant="blueprint"] .edu-card,
html[data-variant="blueprint"] .work-card,
html[data-variant="blueprint"] .contact-card {
  position: relative;
  border-radius: 0;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  border: 1px solid var(--border);
  box-shadow: none;
}
html[data-variant="blueprint"] .stat-card:hover,
html[data-variant="blueprint"] .timeline-card:hover,
html[data-variant="blueprint"] .skill-card:hover,
html[data-variant="blueprint"] .edu-card:hover,
html[data-variant="blueprint"] .work-card:hover,
html[data-variant="blueprint"] .contact-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
}

/* Crop marks on the two opposite corners. Built entirely from logical
   properties, so in Arabic the pair mirrors to the other diagonal instead
   of drifting off the corners it is meant to register. */
html[data-variant="blueprint"] .stat-card::before,
html[data-variant="blueprint"] .timeline-card::before,
html[data-variant="blueprint"] .skill-card::before,
html[data-variant="blueprint"] .edu-card::before,
html[data-variant="blueprint"] .contact-card::before,
html[data-variant="blueprint"] .stat-card::after,
html[data-variant="blueprint"] .timeline-card::after,
html[data-variant="blueprint"] .skill-card::after,
html[data-variant="blueprint"] .edu-card::after {
  content: "";
  position: absolute;
  width: 9px; height: 9px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
html[data-variant="blueprint"] .stat-card::before,
html[data-variant="blueprint"] .timeline-card::before,
html[data-variant="blueprint"] .skill-card::before,
html[data-variant="blueprint"] .edu-card::before,
html[data-variant="blueprint"] .contact-card::before {
  inset-block-start: -1px; inset-inline-start: -1px;
  border-block-start: 1px solid var(--accent);
  border-inline-start: 1px solid var(--accent);
  /* the contact card's ::before is the sheen sweep in the base sheet —
     these four declarations retire it */
  background: none; transform: none; transition: opacity .25s ease; inset-block-end: auto; inset-inline-end: auto;
}
html[data-variant="blueprint"] .contact-card:hover::before { transform: none; }
html[data-variant="blueprint"] .stat-card::after,
html[data-variant="blueprint"] .timeline-card::after,
html[data-variant="blueprint"] .skill-card::after,
html[data-variant="blueprint"] .edu-card::after {
  inset-block-end: -1px; inset-inline-end: -1px;
  border-block-end: 1px solid var(--accent);
  border-inline-end: 1px solid var(--accent);
}
html[data-variant="blueprint"] .stat-card:hover::before,
html[data-variant="blueprint"] .stat-card:hover::after,
html[data-variant="blueprint"] .timeline-card:hover::before,
html[data-variant="blueprint"] .timeline-card:hover::after,
html[data-variant="blueprint"] .skill-card:hover::before,
html[data-variant="blueprint"] .skill-card:hover::after,
html[data-variant="blueprint"] .edu-card:hover::before,
html[data-variant="blueprint"] .edu-card:hover::after,
html[data-variant="blueprint"] .contact-card:hover::before { opacity: 1; }

html[data-variant="blueprint"] .stat-number {
  font-family: var(--font-mono); font-weight: 500; font-size: 2.2rem;
}
html[data-variant="blueprint"] .stat-label { text-transform: uppercase; font-size: .72rem; }
html[data-variant="blueprint"][dir="rtl"] .stat-label { text-transform: none; letter-spacing: 0; }

/* Timeline: a dimension line with square stations. */
html[data-variant="blueprint"] .timeline::before {
  background: none; width: 0;
  border-inline-start: 1px dashed var(--border-strong);
}
html[data-variant="blueprint"] .timeline-marker {
  border-radius: 0; background: var(--bg); border: 1px solid var(--accent);
  width: 13px; height: 13px; top: 10px; inset-inline-start: 3px;
}
html[data-variant="blueprint"] .timeline-marker::after {
  border-radius: 0; width: 3px; height: 3px;
}
html[data-variant="blueprint"] .timeline-card li::before { border-radius: 0; transform: none; width: 5px; height: 5px; }

html[data-variant="blueprint"] .tag,
html[data-variant="blueprint"] .work-tags span {
  border-radius: 0; background: none;
  border: 1px solid var(--border-strong); color: var(--text-muted);
  font-family: var(--font-mono); font-size: .74rem;
}
html[data-variant="blueprint"] .tag:hover {
  transform: none; border-color: var(--accent); color: var(--accent);
}

html[data-variant="blueprint"] .edu-icon,
html[data-variant="blueprint"] .contact-icon {
  border-radius: 0; background: none; border: 1px solid var(--border-strong);
}

/* Portfolio: cyanotype prints, and the spotlight index as a parts list. */
html[data-variant="blueprint"] .work-thumb { border-radius: 0; }
html[data-variant="blueprint"] .work-thumb img {
  filter: grayscale(1) sepia(1) hue-rotate(165deg) saturate(2.2) contrast(.95);
}
html[data-variant="blueprint"] .work-go { border-radius: 0; }
html[data-variant="blueprint"] .pf-row { border-inline-start-width: 1px; }
html[data-variant="blueprint"] .pf-t { font-family: var(--font-body); font-weight: 700; }

html[data-variant="blueprint"] .contact-card::after { display: none; }
html[data-variant="blueprint"] .contact-label { text-transform: uppercase; }
html[data-variant="blueprint"][dir="rtl"] .contact-label { text-transform: none; letter-spacing: 0; }

html[data-variant="blueprint"] .lang-toggle,
html[data-variant="blueprint"] .variant-chip,
html[data-variant="blueprint"] .variant-chip-key,
html[data-variant="blueprint"] .theme-toggle-track,
html[data-variant="blueprint"] .theme-toggle-thumb,
html[data-variant="blueprint"] .to-top,
html[data-variant="blueprint"] .toast,
html[data-variant="blueprint"] .cmdk-panel,
html[data-variant="blueprint"] .cmdk-item,
html[data-variant="blueprint"] .cmdk-glyph,
html[data-variant="blueprint"] .cmdk-badge { border-radius: 0; }
html[data-variant="blueprint"] .variant-chip-dot { border-radius: 0; }
html[data-variant="blueprint"] .to-top:hover { transform: none; }

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

@media print {
  html[data-variant="blueprint"] body { background-image: none; }
  html[data-variant="blueprint"] .section-title,
  html[data-variant="blueprint"] .hero-name,
  html[data-variant="blueprint"] .stat-label,
  html[data-variant="blueprint"] .contact-label { text-transform: none; }
  html[data-variant="blueprint"] .stat-card::before,
  html[data-variant="blueprint"] .stat-card::after,
  html[data-variant="blueprint"] .timeline-card::before,
  html[data-variant="blueprint"] .timeline-card::after,
  html[data-variant="blueprint"] .skill-card::before,
  html[data-variant="blueprint"] .skill-card::after,
  html[data-variant="blueprint"] .edu-card::before,
  html[data-variant="blueprint"] .edu-card::after,
  html[data-variant="blueprint"] .contact-card::before { display: none; }
  html[data-variant="blueprint"] .work-thumb img { filter: none; }
  html[data-variant="blueprint"] .section-kicker { border: none; padding: 0; }
}