/* ========================================
   Artist Resume — standalone page (/resume)
   Self-contained: shares no CSS with the Writing or Art pages, but
   deliberately reuses the Writing page's tokens (warm paper, Georgia,
   teal accent) so the two read as one site. The mini-nav + theme-toggle
   block below is the same component, restated locally on purpose.
   ======================================== */

/* ---------- Base reset + tokens ---------- */
:root {
  --color-bg: #f6f5f2;
  --color-surface: #fffefb;
  --color-body: #23201c;
  --color-heading: #15120e;
  --color-muted: #6f6a62;
  --color-rule: rgba(35, 32, 28, 0.14);
  --color-link: #1f6f6a;
  --color-link-hover: #154f4a;
  --color-accent-soft: rgba(31, 111, 106, 0.09);
  --nav-fade: rgba(246, 245, 242, 0);
  --content-max-width: 1040px;
  --content-padding: 2rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 3rem;
  --spacing-xl: 4rem;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Dark theme — same five-token flip the Writing page uses, so toggling
   on any page carries across (shared localStorage 'theme' key). */
:root[data-theme="dark"] {
  --color-bg: #1a191d;
  --color-surface: #211f25;
  --color-body: #d7d3cb;
  --color-heading: #f2efe9;
  --color-muted: #948e85;
  --color-rule: rgba(215, 211, 203, 0.16);
  --color-link: #5cc4b8;
  --color-link-hover: #82d8ce;
  --color-accent-soft: rgba(92, 196, 184, 0.11);
  --nav-fade: rgba(26, 25, 29, 0);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-body);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease, color 0.4s ease;
}

main {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--content-padding) var(--spacing-xl);
}

h1, h2, h3 { color: var(--color-heading); line-height: 1.2; font-weight: 700; }
a { color: var(--color-link); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--color-link-hover); }
a:focus-visible { outline: 2px solid var(--color-link); outline-offset: 3px; border-radius: 2px; }
img { max-width: 100%; height: auto; display: block; }

/* ---------- Mini site nav (Writing · Art · Resume) ---------- */
.mini-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 22px;
  background: linear-gradient(var(--color-bg) 55%, var(--nav-fade));
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mini-nav a { text-decoration: none; color: var(--color-muted); transition: color 0.2s; }
.mini-nav a:hover, .mini-nav a.active { color: var(--color-heading); }
.mini-nav a.active { border-bottom: 1px solid var(--color-heading); }
.mini-nav .div { color: rgba(128, 128, 128, 0.5); }

.theme-toggle {
  align-self: center;
  margin-left: auto;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(128, 128, 128, 0.35);
  background: transparent;
  color: var(--color-heading);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.theme-toggle:hover { border-color: var(--color-link); transform: scale(1.06); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
:root[data-theme="light"] .theme-toggle .i-sun { display: none; }
:root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }

/* ---------- Masthead ---------- */
.rz-hero {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: calc(var(--spacing-xl) + 1.5rem) var(--content-padding) var(--spacing-lg);
  text-align: center;
}

.rz-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-link);
  margin-bottom: var(--spacing-sm);
}

.rz-hero h1 {
  font-size: clamp(2.5rem, 8vw, 4.25rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.rz-role {
  font-size: 1.15rem;
  font-style: italic;
  color: var(--color-body);
  margin-bottom: 0.35rem;
}

.rz-place {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Contact row */
.rz-contact {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.4rem;
  margin-top: var(--spacing-md);
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.rz-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.rz-contact a:hover { border-bottom-color: currentColor; }
.rz-contact svg { width: 15px; height: 15px; flex: none; }

/* Download button */
.rz-download {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: var(--spacing-md);
  padding: 0.75rem 1.5rem;
  border: 1.5px solid var(--color-link);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-link);
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.rz-download:hover {
  background: var(--color-link);
  color: var(--color-bg);
  transform: translateY(-1px);
}
.rz-download svg { width: 15px; height: 15px; }

/* ---------- Figures strip ---------- */
/* The page gutter lives on the wrapper, not the grid: the grid paints its own
   background to show through a 1px gap as hairlines, so any padding on it would
   render as a slab of rule-colour down each edge. */
.rz-stats-wrap {
  max-width: var(--content-max-width);
  margin: 0 auto var(--spacing-xl);
  padding: 0 var(--content-padding);
}

.rz-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-rule);
  border: 1px solid var(--color-rule);
}

.rz-stat {
  background: var(--color-bg);
  padding: 1.35rem 0.75rem;
  text-align: center;
}
.rz-stat b {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-heading);
  margin-bottom: 0.45rem;
}
.rz-stat span {
  font-family: var(--sans);
  font-size: 0.63rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ---------- Sections ---------- */
.rz-section {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) 0;
  border-top: 1px solid var(--color-rule);
}

.rz-section-head h2 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-link);
  position: sticky;
  top: 4.25rem;
}

.rz-prose p { font-size: 1.0625rem; line-height: 1.75; }
.rz-prose p + p { margin-top: 1rem; }

/* ---------- Year groups ---------- */
.rz-year {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-bottom: 1rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-muted);
}
.rz-year::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-rule);
}
.rz-group + .rz-group { margin-top: var(--spacing-md); }

/* ---------- Entries ---------- */
.rz-list { list-style: none; }

.rz-entry {
  position: relative;
  padding: 0 0 1.1rem 1.35rem;
  border-left: 1px solid var(--color-rule);
}
.rz-entry:last-child { padding-bottom: 0; }
.rz-entry::before {
  content: "";
  position: absolute;
  left: -3.5px;
  top: 0.62rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-link);
}

.rz-entry h3 {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 0.15rem;
}
/* Work and exhibition titles are italicised inside an otherwise bold heading —
   keep the weight so "<em>Fragments</em> Group Exhibition" reads as one line,
   not two typographic voices. */
.rz-entry h3 em { font-style: italic; font-weight: inherit; }

.rz-meta {
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-muted);
}
.rz-meta .sep { opacity: 0.5; padding: 0 0.15rem; }

/* Role badge (Featured Artist / Finalist / …) */
.rz-badge {
  display: inline-block;
  margin-bottom: 0.4rem;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  background: var(--color-accent-soft);
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-link);
}

/* ---------- Selected artworks ---------- */
/* Fixed 3 columns rather than auto-fill: there are six works, and auto-fill
   packed them 4 + 2 at desktop width, which reads as an accident. */
.rz-works {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
}

.rz-work a {
  display: block;
  color: var(--color-body);
}
.rz-work-img {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--color-rule);
  background: var(--color-accent-soft);
  margin-bottom: 0.55rem;
}
.rz-work-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease, filter 0.3s ease;
}
.rz-work a:hover .rz-work-img img { transform: scale(1.05); }
.rz-work-name {
  display: block;
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.35;
}
.rz-work a:hover .rz-work-name { color: var(--color-link); }

/* No catalogue match (or art-works.js absent) — degrade to a plain list of
   titles rather than a grid of empty boxes. */
.rz-works.is-textonly { grid-template-columns: 1fr; gap: 0.35rem; }
.rz-works.is-textonly .rz-work-img { display: none; }

.rz-works-note {
  margin-top: var(--spacing-sm);
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--color-muted);
}

/* ---------- Footer ---------- */
.rz-foot {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--spacing-lg) var(--content-padding) var(--spacing-xl);
  border-top: 1px solid var(--color-rule);
  text-align: center;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--color-muted);
}
.rz-foot .to-top {
  display: inline-block;
  margin-top: var(--spacing-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .rz-section { grid-template-columns: 1fr; gap: var(--spacing-sm); }
  .rz-section-head h2 { position: static; }
}

@media (max-width: 700px) {
  :root { --content-padding: 1.25rem; }
  body { font-size: 15px; }
  .rz-stats { grid-template-columns: repeat(2, 1fr); }
  .rz-stat { padding: 1.1rem 0.5rem; }
  .rz-stat b { font-size: 1.6rem; }
  .rz-contact { gap: 0.5rem 1rem; font-size: 0.8rem; }
  .rz-works { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Print ----------
   Ctrl+P on this page should produce a usable document, not a screenshot of a
   website: drop the fixed nav, the download button and the thumbnails, and
   force the light palette regardless of the toggle. */
@media print {
  :root, :root[data-theme="dark"] {
    --color-bg: #fff;
    --color-surface: #fff;
    --color-body: #000;
    --color-heading: #000;
    --color-muted: #444;
    --color-rule: #ccc;
    --color-link: #000;
    --color-accent-soft: #f0f0f0;
  }
  .mini-nav, .theme-toggle, .rz-download, .rz-foot .to-top, .rz-work-img { display: none; }
  body { font-size: 11pt; }
  .rz-hero { padding-top: 0; }
  .rz-section { break-inside: avoid; page-break-inside: avoid; }
  .rz-entry { break-inside: avoid; page-break-inside: avoid; }
  .rz-works { grid-template-columns: 1fr; gap: 0.2rem; }
  a { color: #000; }
}