/* tsiru.pet — the stylesheet. Every visual decision lives here.
   Pages never carry styling: templates pass content, components reference
   tokens. If something looks wrong, it is wrong in this file, once. */

:root {
  /* ---------- colour ---------- */
  --bg: #0b1416;
  --bg-glow: #12353a;
  --bg-card: #101c1f;
  --bg-card-hover: #142429;
  --fg: #dfe9ea;
  --fg-dim: #93a7a9;
  --accent: #2dd4bf;
  --accent-dim: #14b8a6;
  --border: #1d3236;
  --tint: rgba(45, 212, 191, 0.06);
  --ring: rgba(45, 212, 191, 0.1);

  /* ---------- spacing ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* ---------- type ---------- */
  --text-body: 17px;
  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 0.95rem;
  --text-md: 1.05rem;
  --text-lg: 1.15rem;
  --text-hero: clamp(2.1rem, 5vw, 3rem);
  --leading: 1.65;

  /* ---------- components ---------- */
  --radius: 14px;
  --pill: 999px;
  --page-max: 860px;
  --card-min: 250px;
  --label-col: 8.5rem;
  --avatar: 132px;
  --avatar-sm: 104px;
  --avatar-print: 84px;
  --pill-pad: 0.35rem 0.85rem;
  --tag-pad: 0.1rem 0.55rem;
  --ease: 0.15s;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Reserve the scrollbar gutter so the centred column never shifts between
     short and long pages — otherwise /now/ sits ~7px right of / and /resume/. */
  overflow-y: scroll;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1100px 500px at 15% -10%, var(--bg-glow) 0%, transparent 60%),
    var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: var(--text-body);
  line-height: var(--leading);
}

.page {
  flex: 1;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-5) var(--space-7);
}

/* ---------- pills ---------- */

/* The site's interactive idiom: every hero pill — including the résumé's print
   trigger — shares one treatment, so they cannot drift apart. Anchors, not
   <button>s — Chrome ignores line-height on form controls, which renders a
   button shorter than a pill and shifts the hero's centred avatar. */
.links a {
  padding: var(--pill-pad);
  border: 1px solid var(--border);
  border-radius: var(--pill);
  color: var(--fg);
  text-decoration: none;
  font-size: var(--text-base);
  transition:
    border-color var(--ease),
    color var(--ease),
    background var(--ease);
}

.links a:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: var(--tint);
}

/* The primary action — the résumé — reads as the accent pill. */
.links a.cta {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: var(--tint);
}

.links a.cta:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg);
}

/* ---------- site index (home page, below the bio) ---------- */

/* A table of contents placed after the preface: the reader arrives knowing who
   this is, then chooses where to go. Label column, description alongside. */
.index-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.index-list li + li {
  border-top: 1px solid var(--border);
}

/* The whole row is the target, so the affordance covers the description too —
   a bare link on the label alone reads as plain text. */
.index-list a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--ease);
}

.index-list a:hover {
  background: var(--tint);
}

.index-list .label {
  flex: 0 0 var(--label-col);
  font-size: var(--text-md);
  color: var(--accent);
}

.index-list a:hover .label {
  text-decoration: underline;
}

.index-list .desc {
  color: var(--fg-dim);
  font-size: var(--text-base);
}

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

/* Just the byline — the page links live in the home page's index, and the
   header's avatar/name carry navigation back. */
.footer {
  border-top: 1px solid var(--border);
  padding: var(--space-5);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--fg-dim);
}

/* ---------- hero ---------- */

.hero {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.hero-text {
  min-width: 0;
}

.avatar {
  flex: 0 0 auto;
  width: var(--avatar);
  height: var(--avatar);
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent-dim);
  box-shadow:
    0 0 0 5px var(--ring),
    0 10px 30px rgba(0, 0, 0, 0.45);
}

/* The portrait and the name both link home — the site's navigation back, now
   that there is no nav bar or footer. line-height:0 keeps the inline image
   from adding descender space inside the link box. */
.avatar-link {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
  border-radius: 50%;
}

.avatar-link:hover .avatar {
  border-color: var(--accent);
}

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

.hero h1 a {
  color: inherit;
  text-decoration: none;
}

.hero h1 a:hover,
.hero h1 a:focus-visible {
  color: var(--accent);
}

@media (max-width: 560px) {
  .hero {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .avatar {
    width: var(--avatar-sm);
    height: var(--avatar-sm);
  }
}

.hero h1 {
  margin: 0;
  font-size: var(--text-hero);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.hero h1::after {
  content: "";
  display: block;
  width: 62px;
  height: 4px;
  margin-top: var(--space-3);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

/* The subtitle slot rendered by templates/page.html. Its metrics live here, in
   the shared stylesheet, so every page's hero text block is the same height
   and the avatar always lands on the same pixel. Pages pass content, never
   styling. */
.hero-subtitle {
  margin: var(--space-4) 0 0;
  color: var(--fg-dim);
  font-size: var(--text-md);
}

.hero-subtitle a {
  color: var(--fg-dim);
}

.hero-subtitle a:hover {
  color: var(--accent);
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-5);
}

/* ---------- prose ---------- */

.prose {
  margin-top: var(--space-6);
}

.prose p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--accent);
  text-underline-offset: 3px;
}

.placeholder {
  display: inline;
  border-bottom: 1px dashed var(--accent-dim);
  color: var(--fg-dim);
  font-style: italic;
}

/* ---------- sections ---------- */

section + section {
  margin-top: var(--space-7);
}

h2 {
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
  font-weight: 600;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

/* A heading may carry a link (e.g. a project name pointing at its repo). It
   keeps the eyebrow colour and only shows the accent on hover. */
h2 a {
  color: inherit;
  text-decoration: none;
}

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

/* Markdown content pages (the .prose wrapper) need their own section rhythm —
   their headings are plain <h2>s, not <section> elements. */
.prose h2 {
  margin-top: var(--space-6);
}

.prose > :first-child {
  margin-top: 0;
}

.section-note {
  margin: calc(-1 * var(--space-3)) 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--fg-dim);
}

/* ---------- cards ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  gap: var(--space-4);
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  transition:
    border-color var(--ease),
    background var(--ease),
    transform var(--ease);
}

.card:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-dim);
  transform: translateY(-2px);
}

.placeholder-card {
  border-style: dashed;
}

.card h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
  line-height: 1.35;
}

.card h3 a {
  color: var(--fg);
  text-decoration: none;
}

.card h3 a:hover {
  color: var(--accent);
}

.card p {
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg-dim);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}

.tags li {
  font-size: var(--text-xs);
  color: var(--fg-dim);
  border: 1px solid var(--border);
  border-radius: var(--pill);
  padding: var(--tag-pad);
}

.tags li.lang::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--accent-dim);
  vertical-align: middle;
}

/* ---------- résumé page ---------- */

.resume-block + .resume-block {
  margin-top: var(--space-7);
}

.entry + .entry {
  margin-top: var(--space-5);
}

/* Role left, dates right-aligned. */
.entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
}

.entry-head h3 {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.35;
}

.entry-head .org {
  font-weight: 400;
  color: var(--fg-dim);
}

.dates {
  flex: 0 0 auto;
  color: var(--fg-dim);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.entry .meta {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
}

.entry .degree {
  margin: 0 0 var(--space-3);
}

.entry ul {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-4);
}

.entry li {
  margin: 0 0 var(--space-1);
}

/* Skills render as pill rows, reusing the .tags pill styling. */
.skill-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.skill-row > .label {
  flex: 0 0 var(--label-col);
  color: var(--fg-dim);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.skill-row .tags {
  margin: 0;
}

.pub + .pub {
  margin-top: var(--space-4);
}

.pub p {
  margin: 0;
}

.pub .venue {
  color: var(--fg-dim);
}

/* Let ⌘P / Ctrl-P produce a clean, ink-light PDF. */
@media print {
  :root {
    --bg: #fff;
    --bg-glow: #fff;
    --fg: #000;
    --fg-dim: #444;
    --border: #ccc;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .page {
    max-width: none;
    padding: 0;
  }

  .footer,
  .links {
    display: none;
  }

  .avatar {
    width: var(--avatar-print);
    height: var(--avatar-print);
  }

  a {
    color: #000;
    text-decoration: none;
  }

  h2 {
    color: #000;
    border-bottom-color: #ccc;
  }

  .entry,
  .pub {
    break-inside: avoid;
  }

  .entry-head h3 {
    break-after: avoid;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}