/* ==========================================================================
   PORTFOLIO STYLESHEET
   No build step, no dependencies. Edit values in :root to restyle the site.
   Order: 1) tokens  2) reset  3) frame  4) shared pieces  5) sections
          6) responsive
   ========================================================================== */


/* ==========================================================================
   1. TOKENS — change the whole palette from here
   ========================================================================== */

:root {
  /* -- Palette ------------------------------------------------------------
     Every colored block pulls from these. Swap a hex here and the matching
     section changes everywhere it appears. */
  --ink:        #101010;   /* borders + body text */
  --gutter:     #efe7d8;   /* page background / side gutters */
  --paper:      #fffdf7;   /* neutral block background */
  --mint:       #c7e8d7;   /* intro block */
  --cream:      #f7e6a8;   /* experience block */
  --pink:       #f4c6d8;   /* projects block */
  --lilac:      #ded0f2;   /* contact block */
  /* Deep magenta rather than hot pink: white text on #e83f8a measured 3.75:1,
     under the 4.5:1 WCAG AA minimum. This shade measures 5.77:1. Check any
     replacement against --accent-ink before using it. */
  --accent:     #c2185b;   /* links, highlights, hover fills */
  --accent-ink: #fffdf7;   /* text sitting on --accent */

  /* -- Structure ---------------------------------------------------------- */
  --border-w:   2px;       /* thickness of every black rule on the page */
  --max-w:      64rem;     /* width of the central framed column */
  --pad:        2.5rem;    /* inner padding of each block */
  --radius:     0;         /* keep 0 for hard geometry; try 6px for softer */

  /* -- Type --------------------------------------------------------------- */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}


/* ==========================================================================
   2. RESET + BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;   /* stops anchors landing flush to the edge */
}

/* Respect users who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  padding: clamp(0rem, 4vw, 3rem);
  background: var(--gutter);
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;   /* slight condensing — the editorial feel */
  font-weight: 800;
}

p  { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }

/* Any image scales down to its container and keeps its proportions, whatever
   width/height attributes it carries. */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  /* Browsers default to skip-ink:auto, which breaks the underline around
     descenders (g, y, p). At 2px those gaps read as a damaged rule, so draw
     the line straight through. The 3px offset keeps it clear of the glyphs. */
  text-decoration-skip-ink: none;
}
a:hover { background: var(--accent); color: var(--accent-ink); }

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

/* Skip link — hidden until focused, so keyboard users can jump past the nav.
   First focusable element on the page. */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}


/* ==========================================================================
   3. FRAME — the bordered central column
   ========================================================================== */

.frame {
  max-width: var(--max-w);
  margin-inline: auto;
  background: var(--paper);
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;   /* keeps child backgrounds inside the frame corners */
}

/* Every major zone. The black divider between zones is a single top border,
   so blocks stack without doubling up the line weight. */
.block {
  padding: var(--pad);
  border-top: var(--border-w) solid var(--ink);
}
.block:first-child { border-top: 0; }


/* ==========================================================================
   4. SHARED PIECES — headings, tags, key/value lists
   ========================================================================== */

/* Section heading: label sitting on the accent bar */
.section__heading {
  display: inline-block;
  margin: 0 0 1.75rem;
  padding: 0.35rem 0.9rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Tech stack chips — used by both experience entries and project cards */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}
.tags li {
  padding: 0.15rem 0.55rem;
  border: var(--border-w) solid var(--ink);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

/* Key/value rows (location, contact links) */
.meta-list,
.links { display: grid; gap: 0.4rem; }

.meta-list { margin-top: 1.25rem; }

/* Long handles/emails must wrap instead of pushing the frame wider on a
   narrow phone. */
.links li {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
}
.links a { overflow-wrap: anywhere; }

.meta-list__key,
.links__key {
  display: inline-block;
  min-width: 6rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ==========================================================================
   5. SECTIONS
   ========================================================================== */

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

.block--header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.25rem;
  background: var(--paper);
}

.header__name {
  margin: 0;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}
.header__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.nav { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.nav a {
  padding: 0.25rem 0.7rem;
  border: var(--border-w) solid var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
}


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

.block--intro {
  background: var(--mint);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12rem;   /* text | avatar */
  gap: 2rem;
  align-items: start;
}

.intro__text p { max-width: 58ch; }

/* The avatar image. `height: auto` is required: the
   width/height HTML attributes set a fixed pixel height, and an element with
   both a definite width and height ignores aspect-ratio — the image would
   render column-wide but 600px tall. */
.intro__avatar img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: var(--border-w) solid var(--ink);
}


/* -- Experience ----------------------------------------------------------- */

.block--experience { background: var(--cream); }

.entry {
  padding-top: 1.75rem;
  margin-top: 1.75rem;
  border-top: var(--border-w) solid var(--ink);
}
.entry:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }

.entry__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin-bottom: 0.9rem;
}
.entry__company { font-size: 1.4rem; }
.entry__role    { margin: 0; font-weight: 600; }
.entry__dates {
  margin: 0;
  margin-left: auto;            /* pushes dates to the right edge */
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.entry__points { display: grid; gap: 0.5rem; }
.entry__points li { padding-left: 1.25rem; position: relative; }
.entry__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--ink);        /* square bullet, matches the geometry */
}


/* -- Projects ------------------------------------------------------------- */

.block--projects { background: var(--pink); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  border: var(--border-w) solid var(--ink);
  background: var(--paper);
}
.card__title { font-size: 1.2rem; margin-bottom: 0.35rem; }

/* Where and when — sits under the title, quieter than the description */
.card__meta {
  margin-bottom: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.card__desc  { flex: 1; margin-bottom: 0; }
.card__link  { margin-top: 1rem; font-weight: 700; align-self: start; }


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

.block--contact { background: var(--lilac); }

.contact__line {
  max-width: 50ch;
  font-size: 1.15rem;
  font-weight: 600;
}


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

.block--footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-block: 1.1rem;
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.block--footer p { margin: 0; }


/* ==========================================================================
   6. RESPONSIVE — blocks stack, borders stay
   ========================================================================== */

@media (max-width: 46rem) {
  :root { --pad: 1.5rem; }

  /* Avatar drops below the text instead of beside it, centered in the column */
  .block--intro { grid-template-columns: 1fr; }
  .intro__avatar { max-width: 11rem; margin-inline: auto; }

  /* Dates move under the role rather than floating right */
  .entry__dates { margin-left: 0; width: 100%; }

  .meta-list__key, .links__key { min-width: 0; }

  /* -- Centering ---------------------------------------------------------
     Everything structural centers on a narrow screen: headings, chips, the
     photo, key/value rows, nav. Running text does NOT — a centered paragraph
     is ragged on both edges, which makes each line harder to find. Those stay
     left-aligned inside a centered container. */
  .block--header,
  .block--footer,
  .block--intro,
  .block--experience,
  .block--projects,
  .block--contact {
    justify-content: center;
    text-align: center;
  }

  .nav,
  .tags,
  .entry__head {
    justify-content: center;
  }

  /* Key/value rows stack instead of sitting side by side. Centering a label
     and its value on one line leaves the labels unaligned row to row, which
     reads as a mistake; stacked, the label works as a caption over its value. */
  .meta-list,
  .links {
    gap: 0.9rem;
  }
  .meta-list li,
  .links li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
  }

  /* Body copy: left-aligned text in a centered block */
  .intro__text p,
  .contact__line {
    margin-inline: auto;
    text-align: left;
  }

  .entry__points li,
  .card__desc {
    max-width: 34rem;
    margin-inline: auto;
    text-align: left;
  }

  .card__link { align-self: center; }
}

@media (max-width: 30rem) {
  body { padding: 0; }
  .frame { border-inline: 0; border-radius: 0; }
}


/* ==========================================================================
   7. PRINT
   ========================================================================== */

@media print {
  body { padding: 0; background: #fff; }
  .nav, .block--footer { display: none; }
  .frame { border: 0; max-width: none; }
  .block { break-inside: avoid; }
}