/* ==========================================================================
   Dareem K. Antoine — academic site
   Forest green is the only accent color; everything else is neutral.
   Type: EB Garamond headings, Crimson Text body (see DESIGN-NOTES.md).
   ========================================================================== */

:root {
  /* Neutrals */
  --color-bg: #FFFFFF;
  --color-text: #1A1A1A;          /* 17.4:1 on white */
  --color-text-muted: #555555;    /* 7.5:1 on white */
  --color-border: #E3E3E3;

  /* Accent */
  --color-accent: #2D6A4F;        /* 6.4:1 on white */
  --color-accent-hover: #1B4332;  /* 11.1:1 on white */
  --color-on-accent: #FFFFFF;

  /* Type */
  --font-heading: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --font-body: "Crimson Text", Georgia, "Times New Roman", serif;

  /* Spacing (8px rhythm) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --container: 54rem;
  --gutter: 1rem;
  --radius: 0.5rem;
  --transition: 180ms ease-out;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #121212;
    --color-text: #EDEDED;          /* 15.9:1 on #121212 */
    --color-text-muted: #AAAAAA;    /* 8.4:1 on #121212 */
    --color-border: #2E2E2E;
    --color-accent: #74C69D;        /* 9.2:1 on #121212 */
    --color-accent-hover: #95D5B2;
    --color-on-accent: #121212;
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.1875rem;  /* 19px */
  line-height: 1.6;
}

@media (min-width: 768px) {
  body { font-size: 1.25rem; } /* 20px */
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}

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

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--transition), text-decoration-color var(--transition);
}

a:hover { color: var(--color-accent-hover); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

img { max-width: 100%; height: auto; display: block; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 768px) {
  :root { --gutter: 2rem; }
}

/* Text for screen readers only */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 700;
}

.skip-link:focus { top: var(--space-4); }

main:focus { outline: none; }

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

.site-header {
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-3);
}

/* DKA monogram: the favicon's lettering without its tile, so the
   background shows through. Colored with the accent, so it follows
   light and dark mode. */
.monogram {
  display: inline-flex;
  align-items: center;
  min-height: 44px;    /* comfortable hit area */
  color: var(--color-accent);
}

.monogram svg {
  height: 24px;
  width: auto;
  fill: currentColor;
}

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

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-1);
  list-style: none;
  margin: 0 calc(var(--space-3) * -1);
  padding: 0;
}

.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  font-size: 1.125rem;
}

.nav-list a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ---------- Intro ---------- */

.intro {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-7) var(--space-6);
}

/* Transparent cutout, cropped to the subject. Its flat bottom edge
   sits on the divider line below the intro on wider screens. */
.headshot {
  width: clamp(10rem, 40vw, 12rem);  /* 160px on small phones, 192px from ~480px wide */
  height: auto;
}

.intro h1 {
  font-size: clamp(2.5rem, 1.8rem + 3vw, 3.5rem);
  margin-bottom: var(--space-2);
}

.role {
  font-size: 1.375rem;
  margin-bottom: 0;
}

.affiliation {
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

/* Below 768px the photo sits above the name. From 768px it sits beside the
   name, in the same columns as the sections below, with its flat bottom edge
   on the divider line. */
@media (min-width: 768px) {
  .intro {
    grid-template-columns: 12rem 1fr;
    gap: var(--space-6);
    align-items: end;
    padding-bottom: 0;
  }
  .intro-text { padding-bottom: var(--space-6); }
  .headshot { width: 12rem; }
}

/* ---------- Link buttons ---------- */

.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  text-decoration: none;
  font-size: 1.125rem;
  line-height: 1.2;
  transition: border-color var(--transition), color var(--transition), background-color var(--transition);
}

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

.btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  text-decoration: none;
}

.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-on-accent);
}

.file-type { font-weight: 400; }

/* ---------- Sections ---------- */

.section {
  position: relative;
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-6);
}

/* Divider above each section, inset to line up with the content edges */
.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  border-top: 1px solid var(--color-border);
}

.section h2 {
  font-size: 1.75rem;
}

@media (min-width: 768px) {
  /* Label column on the left, like the CV */
  .section {
    grid-template-columns: 12rem 1fr;
    gap: var(--space-6);
    padding-block: var(--space-7);
  }
  .section h2 {
    font-size: 1.75rem;
    padding-top: 0;
  }
}

.section-body > h3 {
  /* Italic subheadings, as in the CV */
  font-family: var(--font-body);
  font-size: 1.3125rem;
  font-weight: 400;
  font-style: italic;
  color: var(--color-text-muted);
  margin: var(--space-6) 0 var(--space-4);
}

.section-body > h3:first-child { margin-top: 0; }

/* ---------- About ---------- */

.fields {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.fields dt {
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--color-text-muted);
}

.fields dd { margin: 0; }

@media (min-width: 640px) {
  .fields > div {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: var(--space-4);
  }
}

/* ---------- Research ---------- */

.paper { margin-bottom: var(--space-4); }

.paper-title {
  font-size: 1.4375rem;
  line-height: 1.3;
  margin-bottom: var(--space-2);
}

.paper-title a { text-decoration-thickness: 1px; }

.authors {
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.status { margin-bottom: var(--space-2); }

.coverage { font-size: 1.125rem; }

/* Show/hide abstract (native <details>, so keyboard and screen readers work) */
.abstract { margin: var(--space-1) 0 var(--space-2); }

.abstract summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  cursor: pointer;
  color: var(--color-accent);
  font-size: 1.125rem;
  list-style: none;
}

.abstract summary::-webkit-details-marker { display: none; }

/* Chevron: points right when closed, down when open */
.abstract summary::before {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--transition);
}

.abstract[open] summary::before { transform: rotate(45deg) translate(-0.1em, -0.1em); }

.abstract summary:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.abstract p {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-border);
  font-size: 1.125rem;
}

.nowrap { white-space: nowrap; }

.coverage-label { color: var(--color-text-muted); }

.plain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.wip-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.3;
  margin-bottom: var(--space-1);
}

.plain-list li > .wip-title:last-child { margin-bottom: 0; }

/* ---------- Dated lists (teaching) ---------- */

.dated-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dated-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.dated-list li:first-child { padding-top: 0; }
.dated-list li:last-child { border-bottom: none; }

.year {
  flex-shrink: 0;
  color: var(--color-text-muted);
  white-space: nowrap;
}

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

address {
  font-style: normal;
  margin-bottom: var(--space-4);
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-5);
  color: var(--color-text-muted);
  font-size: 1.0625rem;
}

/* ---------- Motion ---------- */

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

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

@media print {
  .site-header nav,
  .skip-link,
  .link-row { display: none; }
  a { color: inherit; text-decoration: none; }
}