/* Pierre Guirguis — personal site
   One font: JetBrains Mono. Dark-first, warm near-black; one printer's-blue accent.
   JS is optional: the theme toggle and name effect are progressive enhancement. */

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --bg: #141210;
  --fg: #e9e4da;
  --mute: #a49c8b;
  --dim: #867f6c;
  --line: rgb(233 228 218 / 0.11);
  --accent: #8fb0c4;
  --wash: rgb(233 228 218 / 0.045);
  color-scheme: dark;
  interpolate-size: allow-keywords;
}

:root[data-theme="light"] {
  --bg: #f4f1ec;
  --fg: #201d18;
  --mute: #5f594f;
  --dim: #6e6759;
  --line: rgb(32 29 24 / 0.14);
  --accent: #31536b;
  --wash: rgb(32 29 24 / 0.05);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f4f1ec;
    --fg: #201d18;
    --mute: #5f594f;
    --dim: #6e6759;
    --line: rgb(32 29 24 / 0.14);
    --accent: #31536b;
    --wash: rgb(32 29 24 / 0.05);
    color-scheme: light;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  line-height: 1.7;
}

.page {
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 15vh, 8.5rem) clamp(1.25rem, 5vw, 2rem) 6rem;
}

/* header */

h1 {
  font-size: clamp(1.9rem, 5.5vw, 2.6rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

/* letters wrapped by script.js; weight follows the cursor */
h1 span {
  display: inline-block;
  white-space: pre;
  transition: font-weight 0.3s ease-out;
}

.lede {
  margin-top: 0.9rem;
  color: var(--mute);
  max-width: 56ch;
}

.dim-line {
  margin-top: 1rem;
  font-size: 0.6875rem;
  color: var(--dim);
}

/* sections */

section {
  margin-top: clamp(2.5rem, 6vh, 3.75rem);
}

h2 {
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--dim);
}

section > p {
  margin-top: 0.9rem;
  color: var(--mute);
  max-width: 56ch;
}

section > p + p {
  margin-top: 0.4rem;
}

/* project rows — click to expand */

.rows {
  margin-top: 0.6rem;
}

details {
  border-bottom: 1px solid var(--line);
  margin: 0 -0.6rem;
  padding: 0 0.6rem;
  transition: background-color 0.15s ease;
}

details:first-child {
  border-top: 1px solid var(--line);
}

details:hover,
details[open] {
  background: var(--wash);
}

summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto auto;
  column-gap: 0.9rem;
  align-items: baseline;
  padding: 0.7rem 0 0.75rem;
}

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

summary h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}

summary:hover h3 {
  color: var(--accent);
}

.year {
  font-size: 0.6875rem;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mark {
  color: var(--dim);
  font-size: 0.8125rem;
  line-height: 1;
  display: inline-block;
  transition: transform 0.25s ease, color 0.15s ease;
}

details[open] .mark {
  transform: rotate(45deg);
  color: var(--fg);
}

.desc {
  grid-column: 1 / -1;
  margin-top: 0.1rem;
  color: var(--mute);
  max-width: 56ch;
}

/* smooth open/close where ::details-content is supported; instant elsewhere */
details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
}

details[open]::details-content {
  block-size: auto;
}

details .body {
  padding: 0 0 0.85rem;
}

details .body p {
  color: var(--dim);
  font-size: 0.75rem;
}

/* experience */

.xp {
  margin-top: 0.9rem;
}

.xp p {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  column-gap: 0.9rem;
  color: var(--mute);
  max-width: 60ch;
}

.xp p + p {
  margin-top: 0.4rem;
}

.xp .year {
  line-height: inherit;
}

/* contact */

.contact-list {
  list-style: none;
  padding: 0;
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
}

section .dim-line {
  margin-top: 1rem;
}

/* links */

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--line);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.contact-list a,
details .body a {
  color: var(--mute);
}

.contact-list a:hover,
details .body a:hover {
  color: var(--accent);
}

/* external-link arrow nudges on hover */

.arr {
  display: inline-block;
  transition: transform 0.25s ease;
}

a:hover .arr {
  transform: translate(2px, -2px);
}

/* theme toggle — hidden without js */

#theme-toggle {
  position: fixed;
  top: clamp(1rem, 3.5vh, 2rem);
  right: clamp(1.25rem, 4vw, 3rem);
  z-index: 10;
  background: none;
  border: none;
  padding: 0.4rem 0.5rem;
  font-family: inherit;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--dim);
  cursor: pointer;
  transition: color 0.2s ease;
}

#theme-toggle:hover {
  color: var(--fg);
}

html:not(.js) #theme-toggle {
  display: none;
}

/* smooth crossfade while the toggle flips the theme (class added briefly by js) */

html.theme-anim,
html.theme-anim body,
html.theme-anim * {
  transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease !important;
}

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

::selection {
  background: var(--accent);
  color: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  a,
  .arr,
  .mark,
  h1 span,
  details,
  summary h3,
  #theme-toggle {
    transition: none;
  }

  details::details-content {
    transition: none;
  }

  a:hover .arr {
    transform: none;
  }
}

/* narrow screens */

@media (max-width: 480px) {
  .xp p {
    grid-template-columns: 1fr;
  }

  .xp .year:empty {
    display: none;
  }

  .xp p + p {
    margin-top: 0.7rem;
  }
}