/* ═══════════════════════════════════════════════
   ramialghanmi.com — Theme CSS
   Design: Editorial minimal. Light-only.
   Typography: DM Sans (UI) + DM Mono (code/accent)
   Palette: Near-black ink on warm white,
            single accent — a deep teal/slate.
   ═══════════════════════════════════════════════ */

/* ─── Fonts ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

/* ─── Design Tokens ──────────────────────────── */
:root {
  /* Palette */
  --ink:          #111210;      /* near-black, warmer than pure */
  --ink-muted:    #5a5c57;      /* secondary text */
  --ink-faint:    #9a9c97;      /* tertiary / meta */
  --paper:        #faf9f7;      /* warm white background */
  --paper-raised: #ffffff;      /* cards, elevated surfaces */
  --border:       #e4e3df;      /* dividers */
  --accent:       #1d6a72;      /* deep teal — the one colour */
  --accent-hover: #155259;
  --accent-pale:  #e8f4f5;      /* tint for tags / badges */

  /* Typography scale */
  --font-sans:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Menlo', monospace;
  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-lg:      1.125rem;
  --text-xl:      1.25rem;
  --text-2xl:     1.5rem;
  --text-3xl:     1.875rem;
  --text-4xl:     2.25rem;
  --text-5xl:     3rem;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --max-width:       1100px;
  --content-width:   680px;
  --nav-height:      64px;

  /* Effects */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  12px;
  --shadow-sm:  0 1px 3px rgba(17,18,16,0.06), 0 1px 2px rgba(17,18,16,0.04);
  --shadow:     0 4px 12px rgba(17,18,16,0.08), 0 2px 4px rgba(17,18,16,0.04);
  --transition: 160ms ease;
}

/* ─── Reset ──────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:      var(--font-sans);
  font-size:        var(--text-base);
  font-weight:      400;
  line-height:      1.65;
  color:            var(--ink);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── RTL Support ────────────────────────────── */
[dir="rtl"] body {
  font-family: 'IBM Plex Arabic', var(--font-sans), sans-serif;
}

img, video { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-hover); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
ul, ol { padding-inline-start: var(--space-6); }

/* ─── Typography ─────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

h1 { font-size: var(--text-4xl); font-weight: 300; letter-spacing: -0.03em; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);  }
h4 { font-size: var(--text-lg);  }

p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

.mono {
  font-family: var(--font-mono);
  font-size:   0.9em;
}

.label {
  font-family:    var(--font-mono);
  font-size:      var(--text-xs);
  font-weight:    500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--ink-faint);
}

/* ─── Layout ─────────────────────────────────── */
.container {
  width:   100%;
  max-width: var(--max-width);
  margin:  0 auto;
  padding: 0 var(--space-6);
}

.container--narrow {
  max-width: var(--content-width);
}

/* ─── Navigation ─────────────────────────────── */
.nav {
  position:    sticky;
  top:         0;
  z-index:     100;
  height:      var(--nav-height);
  background:  rgba(250, 249, 247, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          100%;
}

.nav__logo {
  font-family:    var(--font-mono);
  font-size:      var(--text-sm);
  font-weight:    500;
  color:          var(--ink);
  letter-spacing: 0.02em;
}
.nav__logo:hover { color: var(--accent); }

.nav__links {
  display:     flex;
  align-items: center;
  gap:         var(--space-8);
  list-style:  none;
  padding:     0;
}

.nav__links a {
  font-size:   var(--text-sm);
  font-weight: 400;
  color:       var(--ink-muted);
  transition:  color var(--transition);
}
.nav__links a:hover,
.nav__links a[aria-current="page"] {
  color: var(--ink);
}

.nav__lang {
  font-family:    var(--font-mono);
  font-size:      var(--text-xs);
  font-weight:    500;
  letter-spacing: 0.06em;
  color:          var(--ink-faint);
  border:         1px solid var(--border);
  padding:        var(--space-1) var(--space-2);
  border-radius:  var(--radius-sm);
  transition:     all var(--transition);
}
.nav__lang:hover {
  border-color: var(--accent);
  color:        var(--accent);
}

/* Mobile nav toggle */
.nav__toggle {
  display:    none;
  background: none;
  border:     none;
  cursor:     pointer;
  padding:    var(--space-2);
  color:      var(--ink);
}

/* ─── Hero ───────────────────────────────────── */
.hero {
  padding:    var(--space-24) 0 var(--space-20);
  border-bottom: 1px solid var(--border);
}

.hero__eyebrow {
  font-family:    var(--font-mono);
  font-size:      var(--text-sm);
  color:          var(--accent);
  letter-spacing: 0.04em;
  margin-bottom:  var(--space-4);
}

.hero__name {
  font-size:   clamp(2.5rem, 6vw, 4rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-6);
}

.hero__tagline {
  font-size:   var(--text-xl);
  font-weight: 300;
  color:       var(--ink-muted);
  max-width:   560px;
  line-height: 1.5;
  margin-bottom: var(--space-8);
}

.hero__tagline strong {
  color:       var(--ink);
  font-weight: 500;
}

.hero__cta {
  display:     flex;
  gap:         var(--space-4);
  flex-wrap:   wrap;
  align-items: center;
}

/* ─── Buttons ────────────────────────────────── */
.btn {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-2);
  font-family:    var(--font-sans);
  font-size:      var(--text-sm);
  font-weight:    500;
  padding:        var(--space-3) var(--space-6);
  border-radius:  var(--radius);
  transition:     all var(--transition);
  cursor:         pointer;
  text-decoration: none;
  white-space:    nowrap;
}

.btn--primary {
  background: var(--accent);
  color:      #fff;
  border:     1px solid var(--accent);
}
.btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

.btn--outline {
  background:  transparent;
  color:       var(--ink);
  border:      1px solid var(--border);
}
.btn--outline:hover {
  border-color: var(--ink);
  color:        var(--ink);
}

/* ─── Section ────────────────────────────────── */
.section {
  padding: var(--space-20) 0;
}
.section + .section {
  border-top: 1px solid var(--border);
}

.section__header {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  margin-bottom:   var(--space-12);
  gap:             var(--space-4);
}

.section__title {
  font-size:   var(--text-2xl);
  font-weight: 500;
}

.section__more {
  font-size:   var(--text-sm);
  color:       var(--ink-muted);
  white-space: nowrap;
}

/* ─── Cards ──────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
}

.card {
  background:    var(--paper-raised);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       var(--space-8);
  transition:    box-shadow var(--transition), transform var(--transition);
}
.card:hover {
  box-shadow: var(--shadow);
  transform:  translateY(-2px);
}

.card__label {
  margin-bottom: var(--space-3);
}

.card__title {
  font-size:     var(--text-lg);
  font-weight:   500;
  margin-bottom: var(--space-3);
  color:         var(--ink);
}

.card__body {
  font-size: var(--text-sm);
  color:     var(--ink-muted);
  line-height: 1.6;
}

.card__metric {
  display:       inline-block;
  margin-top:    var(--space-4);
  font-family:   var(--font-mono);
  font-size:     var(--text-xs);
  font-weight:   500;
  color:         var(--accent);
  background:    var(--accent-pale);
  padding:       var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
}

/* ─── Work Timeline ──────────────────────────── */
.timeline {
  position: relative;
  padding-inline-start: var(--space-8);
}
.timeline::before {
  content:          '';
  position:         absolute;
  inset-inline-start: 0;
  top:              0;
  bottom:           0;
  width:            1px;
  background:       var(--border);
}

.timeline__item {
  position:      relative;
  padding-bottom: var(--space-12);
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content:          '';
  position:         absolute;
  inset-inline-start: calc(-1 * var(--space-8) - 4px);
  top:              6px;
  width:            9px;
  height:           9px;
  border-radius:    50%;
  background:       var(--accent);
  border:           2px solid var(--paper);
  box-shadow:       0 0 0 1px var(--accent);
}

.timeline__date {
  font-family: var(--font-mono);
  font-size:   var(--text-xs);
  color:       var(--ink-faint);
  margin-bottom: var(--space-1);
}

.timeline__company {
  font-size:   var(--text-lg);
  font-weight: 500;
  color:       var(--ink);
  margin-bottom: var(--space-1);
}

.timeline__role {
  font-size:   var(--text-sm);
  color:       var(--accent);
  font-weight: 500;
  margin-bottom: var(--space-4);
}

.timeline__body {
  font-size:   var(--text-sm);
  color:       var(--ink-muted);
  line-height: 1.65;
}
.timeline__body p { margin-bottom: var(--space-3); }

/* ─── Speaking ───────────────────────────────── */
.talk-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.talk {
  display:       grid;
  grid-template-columns: 4rem 1fr auto;
  gap:           var(--space-6);
  align-items:   start;
  padding:       var(--space-6) 0;
  border-bottom: 1px solid var(--border);
}
.talk:last-child { border-bottom: none; }

.talk__year {
  font-family: var(--font-mono);
  font-size:   var(--text-sm);
  color:       var(--ink-faint);
  padding-top: 2px;
}

.talk__title {
  font-size:   var(--text-base);
  font-weight: 500;
  color:       var(--ink);
  margin-bottom: var(--space-1);
}

.talk__meta {
  font-size: var(--text-sm);
  color:     var(--ink-muted);
}

.talk__links {
  display:     flex;
  gap:         var(--space-3);
  flex-wrap:   wrap;
  justify-content: flex-end;
}

.talk__link {
  font-family: var(--font-mono);
  font-size:   var(--text-xs);
  font-weight: 500;
  color:       var(--ink-muted);
  border:      1px solid var(--border);
  padding:     var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition:  all var(--transition);
}
.talk__link:hover {
  border-color: var(--accent);
  color:        var(--accent);
}

/* ─── Contact Form ───────────────────────────── */
.form {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-6);
  max-width:      560px;
}

.form__group {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.form__label {
  font-size:   var(--text-sm);
  font-weight: 500;
  color:       var(--ink);
}

.form__input,
.form__textarea {
  font-family: var(--font-sans);
  font-size:   var(--text-base);
  color:       var(--ink);
  background:  var(--paper-raised);
  border:      1px solid var(--border);
  border-radius: var(--radius);
  padding:     var(--space-3) var(--space-4);
  transition:  border-color var(--transition), box-shadow var(--transition);
  width:       100%;
}
.form__input:focus,
.form__textarea:focus {
  outline:      none;
  border-color: var(--accent);
  box-shadow:   0 0 0 3px rgba(29,106,114,0.12);
}

.form__textarea {
  resize:     vertical;
  min-height: 140px;
}

/* ─── About / Headshot ───────────────────────── */
.about-grid {
  display:   grid;
  grid-template-columns: 1fr 2fr;
  gap:       var(--space-16);
  align-items: start;
}

.headshot {
  width:         100%;
  aspect-ratio:  3 / 4;
  object-fit:    cover;
  object-position: top;
  border-radius: var(--radius-lg);
  filter:        grayscale(8%);
}

/* ─── Page Header ────────────────────────────── */
.page-header {
  padding:       var(--space-16) 0 var(--space-12);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-12);
}

.page-header__title {
  font-size:   var(--text-4xl);
  font-weight: 300;
}

.page-header__subtitle {
  margin-top: var(--space-4);
  font-size:  var(--text-lg);
  color:      var(--ink-muted);
  max-width:  540px;
}

/* ─── Footer ─────────────────────────────────── */
.footer {
  margin-top:    var(--space-24);
  padding:       var(--space-12) 0;
  border-top:    1px solid var(--border);
}

.footer__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-6);
  flex-wrap:       wrap;
}

.footer__copy {
  font-size: var(--text-sm);
  color:     var(--ink-faint);
}

.footer__links {
  display:    flex;
  gap:        var(--space-6);
  list-style: none;
  padding:    0;
}

.footer__links a {
  font-size: var(--text-sm);
  color:     var(--ink-faint);
}
.footer__links a:hover { color: var(--ink); }

/* ─── Utilities ──────────────────────────────── */
.text-muted  { color: var(--ink-muted); }
.text-faint  { color: var(--ink-faint); }
.text-accent { color: var(--accent); }
.mt-auto     { margin-top: auto; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ─── Responsive ─────────────────────────────── */
@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__links.is-open {
    display:        flex;
    flex-direction: column;
    position:       fixed;
    inset:          var(--nav-height) 0 0;
    background:     var(--paper);
    padding:        var(--space-8) var(--space-6);
    gap:            var(--space-6);
    border-top:     1px solid var(--border);
  }
  .nav__links.is-open a { font-size: var(--text-xl); }
  .nav__toggle { display: block; }

  .hero { padding: var(--space-16) 0 var(--space-12); }
  .hero__name { font-size: 2.5rem; }

  .about-grid {
    grid-template-columns: 1fr;
  }
  .headshot {
    max-width: 220px;
    aspect-ratio: 1;
  }

  .talk {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .talk__year { display: inline; }
  .talk__links { justify-content: flex-start; }

  .section { padding: var(--space-12) 0; }
  .page-header { padding: var(--space-12) 0 var(--space-8); }
  .footer__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .container { padding: 0 var(--space-4); }
  .hero__tagline { font-size: var(--text-base); }
  .card-grid { grid-template-columns: 1fr; }
  .hero__cta { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────
   Landing page (placeholder)
   ───────────────────────────────────────────── */
.landing {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-6);
}

.landing__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 480px;
  width: 100%;
}

.landing__mark {
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-8);
}

.landing__mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.landing__name {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 var(--space-3);
  color: var(--ink);
}

.landing__role {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-5);
}

.landing__tagline {
  font-size: 1.0625rem;
  color: var(--ink-muted);
  line-height: 1.6;
  margin: 0 0 var(--space-8);
}

.landing__links {
  display: flex;
  gap: var(--space-6);
  align-items: center;
}

.landing__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 160ms ease;
}

.landing__link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.landing__link:hover {
  color: var(--accent);
}