/* Terminal palette. One accent colour; everything else is greyscale.
   Change --accent to restyle the whole site. */
:root {
  --bg:     #0a0a0a;
  --panel:  #0f1114ee;   /* 93% opaque: a background shows through faintly, text stays clean */
  --fg:     #a0a0a0;
  --dim:    #6b7280;
  --border: #1a1a1a;
  --rule:   #262626;
  --accent: #4ade80;

  /* Type scale. Everything you read is one size; box labels are one size;
     entry headings are one size. Only the name in the hero is display type. */
  --fs-text:  0.9375rem;
  --fs-label: 1rem;
  --fs-title: 1.25rem;
  --fs-name:  clamp(1.5rem, 5vw, 2.25rem);

  color-scheme: dark;
}

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

body {
  margin: 0;
  padding: 3rem 1rem 5rem;
  background: var(--bg);
  color: var(--fg);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.025em;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 48rem; margin: 0 auto; position: relative; z-index: 1; }

/* Background animation, index only: the left margin, behind everything. */
#bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

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

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.25; }

/* --- Boxes ------------------------------------------------------------- */

.box {
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.box > :last-child { margin-bottom: 0; }

/* Filename label at the top of each box. The prompt marker is styling,
   not content, so it stays out of the copyable text. */
.box-name {
  color: var(--dim);
  font-size: var(--fs-label);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.box-name::before {
  content: '> ';
  color: var(--accent);
  font-weight: 700;
}

.box p { margin: 0 0 1rem; }

/* --- Hero -------------------------------------------------------------- */

.box.hero { display: flex; padding: 0; }

.hero img {
  width: 25%;
  height: auto;
  object-fit: cover;
  object-position: top;
  display: block;
  flex-shrink: 0;
  align-self: stretch;
  /* The only colour on the page fought the palette, and the studio backdrop
     glared against the near-black. Grey and slightly dimmed, it belongs. */
  filter: grayscale(1) brightness(0.92) contrast(1.06);
}

.hero-body { flex: 1; padding: 1.25rem 1.5rem; min-width: 0; position: relative; z-index: 1; }

.hero h1 {
  color: var(--accent);
  font-size: var(--fs-name);
  margin-bottom: 0.75rem;
}

/* The address reads as text rather than as an accent link */
.meta a[href^='mailto:'] { color: var(--fg); }

/* key: value lines */
.meta { margin: 0; font-size: var(--fs-text); overflow-wrap: anywhere; }
.meta dt { display: inline; color: var(--dim); }
.meta dd { display: inline; margin: 0 0 0 0.4rem; }
.meta div + div { margin-top: 0.25rem; }

/* --- Lists ------------------------------------------------------------- */

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

/* "- label: value" rows, used for skills and awards */
.rows li { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; }
.rows li:last-child { margin-bottom: 0; }
.rows li::before { content: '-'; color: var(--accent); opacity: 0.5; }
.rows { font-size: var(--fs-text); }
.rows b { color: var(--dim); margin-right: 0.4rem; }
.rows span { color: var(--fg); opacity: 0.8; }

/* bulleted detail lines */
.bullets li { position: relative; padding-left: 1.1rem; margin-bottom: 0.5rem; color: var(--fg); opacity: 0.9; font-size: var(--fs-text); }
.bullets li::before { content: '-'; position: absolute; left: 0; color: var(--accent); opacity: 0.5; }
.bullets li:last-child { margin-bottom: 0; }

/* --- Entries (projects, CV items) -------------------------------------- */

.entry { margin-bottom: 2rem; }
.entry:last-child { margin-bottom: 0; }

.entry h2, .entry h3 {
  color: var(--accent);
  font-size: var(--fs-title);
  margin-bottom: 0.35rem;
}

/* title line with a right-aligned date */
.entry-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

.date { color: var(--dim); font-size: var(--fs-text); white-space: nowrap; }

.subtitle { color: var(--dim); font-size: var(--fs-text); margin: 0 0 0.75rem; }

/* One-line note on a company, and a detail line with no bullet marker */
.blurb { color: var(--dim); font-style: italic; font-size: var(--fs-text); margin: -0.5rem 0 0.75rem; }
.detail { color: var(--fg); opacity: 0.9; font-size: var(--fs-text); margin: 0 0 0.75rem; }

.award { color: var(--accent); font-size: var(--fs-text); margin: 0 0 0.75rem; }

.entry p { margin: 0 0 0.75rem; }

.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.tags li {
  border: 1px solid var(--rule);
  color: var(--dim);
  font-size: var(--fs-text);
  padding: 0.1rem 0.5rem;
}

.links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 0.75rem; font-size: var(--fs-text); }

/* Tail of a list of entries, folded away. Native <details>, so it needs no
   JS and stays keyboard-reachable. The rule closes off the list above it, and
   the '$' marks the line as a command to run -- '>' is already the file label. */
.more {
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
}

.more > summary {
  color: var(--dim);
  font-size: var(--fs-text);
  cursor: pointer;
  list-style: none;
  width: fit-content;
}

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

.more > summary::before {
  content: '$ ';
  color: var(--accent);
  font-weight: 700;
}

.more > summary:hover { color: var(--fg); }
.more > summary:hover span { text-decoration: underline; }

.more:not([open]) .more-close,
.more[open] .more-open { display: none; }

.more[open] > summary { margin-bottom: 1.5rem; }

.embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 1.25rem;
  border: 1px solid var(--rule);
  display: block;
}

.divider { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

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

footer {
  position: fixed;
  z-index: 2;
  bottom: 0; left: 0; right: 0;
  background: rgba(10, 10, 10, 0.98);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

.bar {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.bar nav { display: flex; flex-wrap: wrap; }

.bar nav a {
  color: var(--fg);
  font-size: var(--fs-text);
  padding: 0.5rem 0.9rem;
  transition: color 0.15s;
}
.bar nav a:hover { color: #f3f4f6; text-decoration: none; }
.bar nav a[aria-current='page'] { color: var(--accent); }

/* The prompt marks the page you are on. It sits on every link but stays
   invisible, so the row keeps its spacing as the marker moves. */
.bar nav a::before {
  content: '$ ';
  color: var(--accent);
  visibility: hidden;
}

.bar nav a[aria-current='page']::before { visibility: visible; }

.social { display: flex; gap: 0.5rem; }

.social a {
  display: flex;
  padding: 0.5rem;
  border: 1px solid var(--border);
  color: var(--fg);
  transition: border-color 0.15s;
}
.social a:hover { border-color: #4b5563; }
.social svg { width: 1rem; height: 1rem; fill: currentColor; display: block; }

/* --- Utilities --------------------------------------------------------- */

.sr-only {
  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:focus {
  position: fixed;
  top: 1rem; left: 1rem;
  z-index: 100;
  width: auto; height: auto;
  clip: auto;
  padding: 0.5rem 1rem;
  background: var(--bg);
  color: var(--accent);
  border: 2px solid var(--accent);
}

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

/* Once the column narrows, the metadata wraps onto more lines and the box
   grows taller than it is wide. A stretched photo would become a sliver, so
   below this width it holds a square and sits at the top. */
@media (max-width: 48rem) {
  .hero img { width: 33%; aspect-ratio: 1; align-self: flex-start; }
}

@media (max-width: 30rem) {
  body { padding-top: 1.5rem; padding-left: 0.75rem; padding-right: 0.75rem; }
  .box { padding: 1.25rem; }
  .hero-body { padding: 1rem; }
}

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

@media print {
  /* Ink on paper, not paper on ink. Browsers drop backgrounds when printing,
     which would leave pale grey text on white, so the palette is inverted. */
  :root {
    --bg:     #fff;
    --panel:  #fff;
    --fg:     #111;
    --dim:    #444;
    --border: #999;
    --rule:   #ccc;
    --accent: #0b6b3a;
    color-scheme: light;
    font-size: 10.5pt;
  }

  body { padding: 0; }
  main { max-width: none; }

  /* The canvas has no clipping context on paper, so it prints across the
     page. It is decoration in any case. */
  #bg { display: none; }

  /* Fixed elements repeat on every sheet and cover the text under them. The
     bar also carries a hardcoded dark fill, which has to go on white. */
  footer {
    position: static;
    background: none;
    border-top: 1px solid var(--rule);
    backdrop-filter: none;
  }
  .bar { padding-inline: 0; }
  .bar nav { display: none; }

  /* An icon alone says nothing on paper, so each one prints its address. */
  .social { gap: 1.5rem; }
  .social a { border: 0; padding: 0; color: var(--fg); align-items: center; }
  .social a::after {
    content: ' ' attr(href);
    font-size: 0.8em;
    color: var(--dim);
    margin-left: 0.4rem;
  }

  .box { break-inside: avoid; page-break-inside: avoid; }
  .entry { break-inside: avoid; page-break-inside: avoid; }

  /* A folded entry still belongs on paper. */
  .more { border-top: 0; padding-top: 0; }
  .more > summary { display: none; }
  .more::details-content { content-visibility: visible; }
  .box-name { break-after: avoid; }

  .embed { display: none; }

  /* A printed link is only useful if you can read where it goes. */
  main a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: var(--dim);
    word-break: break-all;
  }
}