/* ==========================================================================
   Alexis EVO · one-page site
   Design tokens extend the CV (Alexis_EVO_CV_EN.html). Edit colors here only.
   Structure: identity → about → work grid → offers → quotes → contact.
   ========================================================================== */

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

/* Palette: Seiji (青磁), the pale blue-green of celadon glaze, over sumi ink on
   paper with a faint green cast. The neutrals are biased toward the accent
   rather than being plain grey, so the page reads as dyed rather than default.
   Both themes are drawn, not inverted. */

:root {
  --ground: #f6f7f5;
  --panel: #edefec;
  --ink: #1f2422;
  --ink-soft: #414a44;
  --muted: #636d68;
  --rule: #e0e4e0;
  --rule-strong: #c2c9c3;
  --accent: #42786e;
  --accent-soft: #e4ebe8;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --measure: 65ch;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #121715; --panel: #1b2220; --ink: #e7ece9; --ink-soft: #b6c1bb;
    --muted: #8b968f; --rule: #232c29; --rule-strong: #35403c;
    --accent: #86bdb1; --accent-soft: #16211e;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ground: #121715; --panel: #1b2220; --ink: #e7ece9; --ink-soft: #b6c1bb;
  --muted: #8b968f; --rule: #232c29; --rule-strong: #35403c;
  --accent: #86bdb1; --accent-soft: #16211e;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --ground: #f6f7f5; --panel: #edefec; --ink: #1f2422; --ink-soft: #414a44;
  --muted: #636d68; --rule: #e0e4e0; --rule-strong: #c2c9c3;
  --accent: #42786e; --accent-soft: #e4ebe8;
  color-scheme: light;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--accent);
  color: var(--ground);
  padding: 8px 14px;
  z-index: 10;
}
.skip-link:focus-visible { left: 8px; }

/* ---------- top bar ---------- */

.topbar {
  max-width: 880px;
  margin: 0 auto;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 26px;
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.wordmark span { letter-spacing: 0.06em; color: var(--accent); }

.topbar nav {
  margin-left: auto;
  display: flex;
  gap: 22px;
}
.topbar nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.92rem;
  border-bottom: 1px solid transparent;
}
.topbar nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

#theme-toggle {
  border: 1px solid var(--rule-strong);
  background: none;
  color: var(--ink-soft);
  border-radius: 2px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.4;
}
#theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
:root[data-theme="dark"] #theme-toggle .moon { display: none; }
:root:not([data-theme="dark"]) #theme-toggle .sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) #theme-toggle .moon { display: none; }
  :root:not([data-theme]) #theme-toggle .sun { display: inline; }
}

/* ---------- layout scaffolding ---------- */

.section, .identity {
  max-width: 880px;
  margin: 0 auto;
  padding: 52px 28px 0;
}

.section > h2 {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin: 0 0 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

.section > p { color: var(--ink-soft); max-width: var(--measure); margin: 0 0 14px; }

/* ---------- identity ---------- */

.identity { padding-top: 42px; }

.avatar {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  margin-bottom: 18px;
}

.identity h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

.tagline {
  color: var(--ink-soft);
  font-size: 1.06rem;
  max-width: var(--measure);
  margin: 0 0 10px;
  text-wrap: balance;
}
.tagline strong { color: var(--accent); }

.whereabouts {
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin: 0 0 22px;
}

/* Hard credentials, scannable before any prose is read. This is the first
   thing a recruiter looks for and the last thing the old page offered. */
.fact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.fact-strip li {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 4px 9px;
}
.fact-strip li.now { background: var(--accent); color: var(--ground); }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 2px;
  padding: 11px 22px;
  border: 1px solid var(--accent);
  cursor: pointer;
}
.btn-primary { background: var(--accent); color: var(--ground); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost { color: var(--accent); background: none; }
.btn-ghost:hover { background: var(--accent-soft); }

/* ---------- work grid ---------- */

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

.card {
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-wide { grid-column: 1 / -1; }
.card-wide video.card-media { aspect-ratio: 16 / 9; }

/* A card with no media: the family-office work runs on a client'''s hardware over
   UHNW files, so there is no screenshot to show. An accent rule stands in for the
   image so the card still opens on something, and the copy keeps the same reading
   measure as the rest of the page instead of running the full grid width. */
.card-plain { border-top: 3px solid var(--accent); }
.card-plain .card-body { padding: 20px 20px 22px; }
.card-plain .card-body > p,
.card-plain .story p { max-width: var(--measure); }

.work-sub {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin: 34px 0 16px;
}

.sites-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Video row: the films are a mix of landscape and vertical cuts. A uniform 4:3
   box with object-fit: contain keeps every card the same height and shows each
   frame whole — cropping a vertical short to a wide box would eat the subtitles,
   which are burned in and carry the story. The dark mat reads as a player in
   both themes rather than as a hole in the page. */
.video-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.video-row video.card-media {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #0d1211;
}

.video-note {
  color: var(--muted);
  font-size: 0.9rem;
  max-width: var(--measure);
  margin: -4px 0 16px;
}

/* "Watch on X" sits under the copy, pinned to the bottom so the three cards
   line their links up even when the descriptions run to different lengths. */
.card-body .watch {
  margin-top: auto;
  padding-top: 4px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  align-self: start;
}
.card-body .watch:hover { text-decoration: underline; }

.card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.card-link:hover h3 { color: var(--accent); }

.card-media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
}
video.card-media { aspect-ratio: 16 / 9; }
/* Screen recordings that aren't 16:9 keep their natural ratio (no cropping). */
video.card-media.media-natural { aspect-ratio: auto; object-fit: contain; }

.card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; }

/* Category tag: the work now spans automation, web and video, so each card
   says which world it belongs to before the title is read. */
.card-body .tag {
  align-self: flex-start;
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--muted);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 2px 7px;
  margin-bottom: -2px;
}

.card-body h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
}
.card-body p { color: var(--ink-soft); font-size: 0.93rem; margin: 0; }

.card-body details { margin-top: 2px; }
.card-body summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 600;
}
.card-body summary:hover { text-decoration: underline; }
.story { padding-top: 10px; }
.story p { margin: 0 0 10px; }
.story strong { color: var(--ink); }

/* ---------- capabilities ---------- */

/* Four grouped claims instead of thirteen equal ticks: a flat checklist made
   "operational audit" and "MCP servers" read as the same size of claim. */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 34px;
  margin-bottom: 20px;
}

.cap h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.12rem;
  line-height: 1.3;
  margin: 0 0 6px;
}
.cap p { color: var(--ink-soft); font-size: 0.93rem; margin: 0 0 8px; }
.cap .stack {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
}

.offer-note { color: var(--muted); font-size: 0.9rem; max-width: var(--measure); margin: 0; }

/* ---------- background timeline ---------- */

.timeline { display: flex; flex-direction: column; }

.tl-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 4px 26px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}
.tl-row:first-child { border-top: none; padding-top: 0; }

.tl-when {
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.tl-what { min-width: 0; }
.tl-what h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 3px;
  color: var(--ink);
}
.tl-what h3 .org {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--accent);
}
.tl-what h3 .org::before { content: " · "; color: var(--rule-strong); }
.tl-what p { color: var(--ink-soft); font-size: 0.92rem; margin: 0; max-width: var(--measure); }

/* ---------- quotes ---------- */

.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.quote {
  margin: 0;
  padding-left: 18px;
  border-left: 2px solid var(--accent);
}
.quote p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0 0 12px;
}
.quote footer {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

/* ---------- contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 48px;
}

.contact-lede {
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: balance;
}
.contact-side p { color: var(--ink-soft); margin: 0 0 14px; }
.contact-links { line-height: 2; }

.contact-form .field { margin-bottom: 16px; }
.contact-form label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 6px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 10px 12px;
}
.contact-form textarea { resize: vertical; }
.form-note { font-size: 0.8rem; color: var(--muted); margin: 10px 0 0; }

/* ---------- footer ---------- */

.footer {
  margin-top: 64px;
  border-top: 1px solid var(--rule);
}
.footer p {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 28px;
  font-size: 0.82rem;
  color: var(--muted);
}
.footer a { color: inherit; }
.footer a:hover { color: var(--accent); }

/* ---------- responsive ---------- */

@media (max-width: 760px) {
  .work-grid, .sites-row, .video-row, .quote-grid, .contact-grid,
  .cap-grid { grid-template-columns: minmax(0, 1fr); }
  /* Dates stack above the role rather than squeezing a 150px rail onto a phone. */
  .tl-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  /* One card per row on a phone, so the uniform box has nothing left to line
     up with — drop it and let each film use its own shape. The vertical cut
     then fills the screen width as a vertical short instead of shrinking to a
     sliver inside a wide mat. */
  .video-row video.card-media { aspect-ratio: auto; }
}

@media (max-width: 480px) {
  .section, .identity { padding-left: 20px; padding-right: 20px; padding-top: 44px; }
  body { font-size: 15px; }

  /* Four nav items no longer fit beside the wordmark and the toggle, so the
     bar wraps: identity and toggle on the first line, navigation under it. */
  .topbar { padding: 16px 20px; gap: 10px 12px; flex-wrap: wrap; }
  #theme-toggle { margin-left: auto; }
  .topbar nav {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
    gap: 16px;
    font-size: 0.9rem;
  }
}