/* hohlios.com — wears the Celadon theme (dark ↔ sky). Tokens mirror the terminal theme's ANSI slots. */

:root, [data-theme="celadon"] {
  --bg: #131b11; --card: #1a2418; --line: #2e3b2b;
  --fg: #c9d5c6; --muted: #939f91; --accent: #9ecf75;
  --red: #fba29b; --yellow: #dcbb50; --blue: #7cc7fb; --magenta: #f49cdb; --cyan: #37d8c9;
  --portrait-bg: #9ecf75;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-display: 'Space Grotesk', sans-serif;
}
[data-theme="sky"] {
  --bg: #eef2e8; --card: #e3e9db; --line: #c8d2bf;
  --fg: #2b3427; --muted: #5d6b58; --accent: #4c7f2b;
  --red: #b03428; --yellow: #8a6b0e; --blue: #1c6ea9; --magenta: #a03a82; --cyan: #0e7d72;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 15px; line-height: 1.6;
  transition: background 0.25s, color 0.25s;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.75; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

.mono { font-family: var(--font-mono); }
.accent { color: var(--accent); }
.muted { color: var(--muted); }
.fg { color: var(--fg); }
.red { color: var(--red); }
.yellow { color: var(--yellow); }
.blue { color: var(--blue); }
.magenta { color: var(--magenta); }
.cyan { color: var(--cyan); }
.eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--accent); }

.site { max-width: 1180px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.site > * { border-bottom: 1px solid var(--line); }

/* — nav — */
.nav { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 28px; padding: 0 32px; height: 60px; }
.brand { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.nav-links { display: flex; gap: 26px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted); }
.nav-links a:hover { color: var(--accent); opacity: 1; }
.theme-toggle { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 0.08em; color: var(--muted); user-select: none; }
.switch { position: relative; display: inline-block; flex: none; width: 30px; height: 16px; border-radius: 8px; border: 1px solid var(--muted); }
.knob { position: absolute; top: 50%; transform: translateY(-50%); left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); transition: left 0.2s; }
[data-theme="sky"] .knob { left: 14px; }

/* — hero — */
.hero { display: grid; grid-template-columns: minmax(0,1fr) 300px; }
.hero-copy { padding: 56px 32px 48px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 22px; }
h1 { font-family: var(--font-display); font-size: 56px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
.lede { font-size: 15px; line-height: 1.75; color: var(--muted); max-width: 560px; }
.whoami { font-size: 11.5px; color: var(--muted); }
.hero-side { display: grid; grid-template-rows: minmax(0,1fr) auto; }
.portrait { width: 100%; height: 100%; min-height: 280px; object-fit: cover; object-position: top; background: var(--portrait-bg); }
.hero-facts { border-top: 1px solid var(--line); padding: 16px 24px; display: flex; flex-direction: column; gap: 6px; font-size: 10.5px; letter-spacing: 0.06em; color: var(--muted); }

/* — numbered rows — */
.row { display: grid; grid-template-columns: 200px minmax(0,1fr); }
.row-label { padding: 24px 32px; border-right: 1px solid var(--line); font-size: 11px; letter-spacing: 0.1em; color: var(--accent); text-transform: uppercase; }
.meta { font-size: 10px; letter-spacing: 0.08em; color: var(--muted); }
h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
h3 .mono { font-size: 10.5px; font-weight: 400; }

/* — work — */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.card { border-right: 1px solid var(--line); transition: background 0.15s; }
.card:last-child { border-right: 0; }
.card:hover { background: var(--card); }
.card img { width: 100%; height: 150px; object-fit: cover; object-position: top; border-bottom: 1px solid var(--line);
  filter: grayscale(1) sepia(0.5) hue-rotate(55deg) saturate(0.7) brightness(0.88); }
.card-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.card-body p { font-size: 12.5px; color: var(--muted); }

/* — career — */
.job { display: grid; grid-template-columns: 110px minmax(180px,max-content) minmax(0,1fr) auto; gap: 20px; align-items: baseline; padding: 16px 32px; font-size: 13px; transition: background 0.15s; }
.job + .job { border-top: 1px solid var(--line); }
.job:hover { background: var(--card); }
.job .mono { font-size: 11px; }
.co { font-size: 14px; font-weight: 600; }
.tag { font-size: 10px; letter-spacing: 0.06em; text-align: right; }

/* — oss — */
.oss { display: grid; grid-template-columns: minmax(0,1fr) 300px; }
.oss-main { padding: 28px 32px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.oss-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
h2 { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.oss-title .mono { font-size: 10.5px; }
.oss-main p { font-size: 13px; line-height: 1.7; color: var(--muted); max-width: 520px; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; font-size: 10.5px; }
.chip { border: 1px solid var(--line); padding: 4px 10px; color: var(--muted); }
.chip i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }
.links { display: flex; gap: 22px; flex-wrap: wrap; font-size: 11px; letter-spacing: 0.05em; }
.links a, .links button { border-bottom: 1px solid var(--line); padding-bottom: 2px; letter-spacing: inherit; }
.links a:hover, .links button:hover { border-color: currentColor; opacity: 1; }
.ansi { padding: 24px; display: flex; flex-direction: column; gap: 10px; justify-content: center; font-size: 11px; }
.ansi-title { font-size: 10px; letter-spacing: 0.1em; }
.oss-more { grid-column: 1 / -1; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.oss-item { padding: 18px 24px; display: flex; flex-direction: column; gap: 5px; }
.oss-item + .oss-item { border-left: 1px solid var(--line); }
.oss-item h3 { font-size: 14px; }
.oss-item p { font-size: 12.5px; color: var(--muted); }

/* — special projects — */
.vyttle-head { padding: 24px 32px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.vyttle-head h2 { font-size: 20px; letter-spacing: -0.01em; }
.vyttle-head .mono { font-size: 10.5px; letter-spacing: 0.05em; }
.vyttle-head p { font-size: 12.5px; color: var(--muted); flex: 1; min-width: 280px; }
.apps { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.app { padding: 20px 32px; display: flex; flex-direction: column; gap: 8px; }
.app + .app { border-left: 1px solid var(--line); }
.app h3 { font-size: 15px; }
.app p { font-size: 12.5px; color: var(--muted); }
.store-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.btn { font-size: 10.5px; letter-spacing: 0.04em; border: 1px solid var(--line); padding: 6px 12px; display: inline-flex; align-items: center; gap: 7px; }
.btn:hover { border-color: var(--accent); color: var(--accent); opacity: 1; }

/* — toolkit — */
.toolkit { grid-template-columns: 200px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); }
.kit { padding: 24px; border-right: 1px solid var(--line); font-size: 13px; line-height: 1.9; }
.kit:last-child { border-right: 0; }
.kit-title { font-size: 10px; letter-spacing: 0.1em; margin-bottom: 10px; line-height: 1.6; }

/* — contact — */
.contact { padding: 48px 32px; display: flex; flex-direction: column; gap: 14px; border-bottom: 0; }
.email { font-family: var(--font-display); font-size: 40px; font-weight: 700; letter-spacing: -0.03em; align-self: flex-start; }
.email:hover { color: var(--accent); opacity: 1; }
.contact .links { font-size: 11px; letter-spacing: 0.08em; gap: 24px; }

/* — mobile (≤760px) — single column, portrait strip, heading bands — */
@media screen and (max-width: 760px) {
  /* nav: brand + toggle on top bar, links on a second row */
  .nav { display: flex; flex-wrap: wrap; gap: 0; height: auto; padding: 0; }
  .brand { padding: 0 20px; line-height: 52px; }
  .theme-toggle { margin-left: auto; padding-right: 20px; }
  .nav-links { order: 3; width: 100%; gap: 20px; padding: 12px 20px; border-top: 1px solid var(--line); font-size: 10.5px; overflow-x: auto; white-space: nowrap; }
  .nav-links a { padding: 8px 0; }

  /* hero: text first, then a compact portrait strip */
  .hero { grid-template-columns: minmax(0,1fr); }
  .hero-copy { padding: 36px 20px 32px; gap: 16px; border-right: 0; }
  h1 { font-size: 34px; letter-spacing: -0.03em; line-height: 1.06; }
  .eyebrow { font-size: 10px; }
  .lede { font-size: 14px; line-height: 1.7; }
  .hero-side { grid-template-rows: none; grid-template-columns: 42% minmax(0,1fr); align-items: center; border-top: 1px solid var(--line); }
  .portrait { width: 100%; height: auto; min-height: 0; aspect-ratio: 47 / 60; border-right: 1px solid var(--line); }
  .hero-facts { border-top: 0; padding: 16px 18px; gap: 7px; font-size: 10px; letter-spacing: 0.05em; }

  /* section label rail → heading band */
  .row, .toolkit { grid-template-columns: minmax(0,1fr); }
  .row-label { display: flex; align-items: baseline; gap: 12px; padding: 22px 20px 14px; border-right: 0; border-bottom: 1px solid var(--line); background: var(--card); text-transform: none; }
  .row-label br { display: none; }
  .row-label .muted { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); }

  /* work cards stack */
  .cards { grid-template-columns: minmax(0,1fr); }
  .card { border-right: 0; }
  .card + .card { border-top: 1px solid var(--line); }
  .card img { height: auto; aspect-ratio: 2 / 1; object-position: center; }
  .card-body { padding: 16px 20px; gap: 5px; }
  .card-body p { line-height: 1.6; }

  /* career: company | tag, then role | years */
  .job { grid-template-columns: minmax(0,1fr) auto; gap: 4px 16px; padding: 14px 20px; }
  .co { grid-column: 1; grid-row: 1; }
  .job .tag { grid-column: 2; grid-row: 1; }
  .job .muted:not(.mono) { grid-column: 1; grid-row: 2; font-size: 12.5px; }
  .job > .mono.muted { grid-column: 2; grid-row: 2; font-size: 10.5px; text-align: right; }

  /* open source: single column, ANSI legend dropped */
  .oss, .oss-more { grid-template-columns: minmax(0,1fr); }
  .oss-main { padding: 24px 20px; border-right: 0; }
  h2 { font-size: 22px; }
  .chips { font-size: 10px; }
  .ansi { display: none; }
  .oss-item { padding: 16px 20px; }
  .oss-item + .oss-item { border-left: 0; border-top: 1px solid var(--line); }

  /* special projects */
  .vyttle-head { padding: 20px; gap: 12px; }
  .vyttle-head > a { margin-left: auto; }
  .vyttle-head p { order: 4; flex-basis: 100%; min-width: 0; }
  .apps { grid-template-columns: minmax(0,1fr); }
  .app { padding: 18px 20px; }
  .app + .app { border-left: 0; border-top: 1px solid var(--line); }
  .btn { padding: 8px 12px; }

  /* toolkit stacks */
  .kit { padding: 16px 20px; border-right: 0; line-height: 1.85; }
  .kit + .kit { border-top: 1px solid var(--line); }

  /* contact */
  .contact { padding: 36px 20px 40px; }
  .email { font-size: 22px; overflow-wrap: anywhere; }
  .contact .links { gap: 10px 20px; }
  .contact .links .muted { flex-basis: 100%; font-size: 10px; }
}

/* — print — two pages, with paper sizing left to the print dialog — */
@page { margin: 12mm; }

@media print {
  :root, [data-theme="celadon"], [data-theme="sky"] {
    --bg: #fff; --card: #fff; --line: #c5ccc1;
    --fg: #20271d; --muted: #485342; --accent: #365c20;
    --red: #9b3026; --yellow: #705607; --blue: #185780;
    --magenta: #823169; --cyan: #09655b;
  }

  html { scroll-behavior: auto; }
  body { font-size: 9pt; line-height: 1.35; transition: none; }
  .site { max-width: none; border: 0; }
  .nav { display: block; height: auto; padding: 0 0 6pt; }
  .brand { font-size: 10pt; }
  .nav-links, .theme-toggle, #copy-email { display: none; }
  a { overflow-wrap: anywhere; }

  .hero { grid-template-columns: minmax(0,1fr) 125pt; break-inside: avoid; }
  .hero-copy { padding: 12pt 14pt 12pt 0; gap: 9pt; }
  h1 { font-size: 29pt; }
  .eyebrow { font-size: 7pt; }
  .lede { max-width: none; font-size: 9pt; line-height: 1.45; }
  .whoami { font-size: 7pt; }
  .portrait { height: 125pt; min-height: 0; object-fit: contain; background: none; }
  .hero-facts { padding: 6pt; gap: 3pt; font-size: 6.5pt; letter-spacing: 0; }

  /* Heading bands leave enough room for content on narrow paper. */
  .row { display: block; }
  .row-label { padding: 7pt 0 5pt; border: 0; font-size: 8pt; break-after: avoid; }
  .row-label br { display: none; }
  .row-label .muted { margin-left: 7pt; color: var(--fg); }
  .cards, .job, .oss-main, .oss-more, .vyttle-head, .apps, .toolkit, .contact { break-inside: avoid; }
  .card img { height: 65pt; filter: none; }
  .card-body { padding: 7pt; gap: 4pt; }
  .meta { font-size: 6.5pt; letter-spacing: 0; }
  h3 { font-size: 10pt; }
  .card-body p, .oss-main p, .oss-item p, .vyttle-head p, .app p { font-size: 8pt; line-height: 1.4; }

  .job { grid-template-columns: 58pt minmax(0,1.1fr) minmax(0,1.3fr) 88pt; gap: 8pt; padding: 7pt 0; font-size: 8pt; }
  .job .mono { font-size: 7pt; }
  .co { font-size: 8pt; }
  .tag { letter-spacing: 0; }

  #oss { break-before: page; }
  .oss { grid-template-columns: minmax(0,1fr) 145pt; }
  .oss-main { padding: 7pt 10pt 9pt 0; gap: 7pt; }
  h2 { font-size: 16pt; }
  .oss-title { gap: 6pt; }
  .oss-title .mono, .chips, .links { font-size: 7pt; }
  .chip { padding: 3pt 6pt; }
  .ansi { padding: 6pt 8pt; gap: 4pt; font-size: 7pt; }
  .ansi-title { font-size: 6.5pt; }
  .oss-item { padding: 8pt; gap: 4pt; }
  .oss-item h3 { font-size: 10pt; }
  h3 .mono { font-size: 7pt; }

  .vyttle-head { padding: 6pt 0 8pt; gap: 7pt; }
  .vyttle-head h2 { font-size: 14pt; }
  .vyttle-head .mono { font-size: 7pt; }
  .vyttle-head p { min-width: 0; flex-basis: 100%; order: 1; }
  .app { padding: 8pt; gap: 5pt; }
  .app h3 { font-size: 10pt; }
  .store-links { margin-top: 0; }
  .btn { font-size: 7pt; padding: 4pt 6pt; }

  .toolkit { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
  .toolkit .row-label { grid-column: 1 / -1; }
  .kit { padding: 6pt 8pt 9pt; font-size: 8pt; line-height: 1.45; }
  .kit-title { font-size: 7pt; margin-bottom: 4pt; }
  .contact { padding: 10pt 0 0; gap: 6pt; }
  .email { font-size: 22pt; }
  .contact .links { font-size: 7pt; gap: 12pt; letter-spacing: 0; }
}