/* ==========================================================================
   rfdieskau.com v2 — stylesheet
   Visual language matched to R.'s portfolio:
   pure black on white, heavy Helvetica-family sans, rigid grid, zero ornament.
   ========================================================================== */

/* Fonts — Inter, self-hosted (no Google Fonts, GDPR clean) ---------------- */
/* These declarations assume font files live in /assets/fonts/.
   Until they're uploaded, system fonts will substitute. Both work. */

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Tokens ------------------------------------------------------------------ */
:root {
  --ink:        #000;
  --paper:      #fff;
  --meta:       #666;
  --rule:       #000;
  --rule-thin:  #ccc;

  --sans:       'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Scale: minor third (1.25) */
  --t-xs:   11px;     /* eyebrow, footer fineprint           */
  --t-s:    13px;     /* metadata, captions                  */
  --t-m:    15px;     /* body                                */
  --t-l:    19px;     /* tile one-liners, lead text          */
  --t-xl:   24px;     /* project titles                      */
  --t-xxl:  clamp(32px, 5vw, 56px);   /* display, page title */

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  --gutter:    max(24px, 4vw);
  --max-w:     1600px;
}

/* Reset ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-m);
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "kern", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.1; }
p { margin: 0 0 1em; }
ul { padding: 0; margin: 0; list-style: none; }

/* Shell ------------------------------------------------------------------- */
.shell {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Header ------------------------------------------------------------------ */
.site-header {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--ink);
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 10;
}
.site-header .shell {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}
.wordmark {
  font-weight: 700;
  font-size: var(--t-m);
  letter-spacing: 0;
  text-decoration: none;
  text-transform: uppercase;
}
.menu-toggle {
  font-size: var(--t-s);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: inherit;
}
.menu-toggle::after { content: " +"; }
.menu-toggle[aria-expanded="true"]::after { content: " ×"; }

.menu {
  display: none;
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  padding: var(--space-3) 0;
  position: fixed;
  top: 56px;            /* sits just below the sticky header (header is ~56px tall) */
  left: 0;
  right: 0;
  z-index: 9;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
}
.menu[data-open="true"] { display: block; }
.menu .shell {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}
.menu a {
  text-decoration: none;
  font-size: var(--t-l);
  font-weight: 700;
  display: block;
  padding: var(--space-1) 0;
}
.menu a:hover { text-decoration: underline; }

/* Footer ------------------------------------------------------------------ */
.site-footer {
  margin-top: var(--space-7);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--ink);
  font-size: var(--t-s);
}
.site-footer .shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-nav {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.footer-nav a {
  text-decoration: none;
  font-weight: 700;
}
.footer-nav a:hover { text-decoration: underline; }
.footer-sub {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  color: var(--meta);
}
.footer-sub a { text-decoration: none; color: var(--meta); }
.footer-sub a:hover { text-decoration: underline; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .footer-nav, .footer-sub { gap: var(--space-3); }
}

/* Main spacing ------------------------------------------------------------ */
main { padding: var(--space-5) 0 0; }

/* Lede (home page positioning sentence) ----------------------------------- */
.lede {
  max-width: 56ch;
  font-size: var(--t-l);
  line-height: 1.4;
  margin: 0 0 var(--space-6);
}
@media (max-width: 600px) {
  .lede { font-size: var(--t-m); margin-bottom: var(--space-5); }
}

/* Projects grid ----------------------------------------------------------- */
/* minmax(0, 1fr) is required to prevent columns from growing past 1fr
   when child content (like an un-wrappable title with year) exceeds the
   default min-width: auto behaviour of grid tracks. Without this, columns
   end up unequal widths on rows where one tile has longer text. */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4) var(--space-3);
}
@media (max-width: 1100px) { .projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-2); } }

.project-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
}
.project-tile .thumb {
  background: #f0f0f0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}
.project-tile .thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 200ms ease;
}
.project-tile:hover .thumb img { opacity: 0.85; }

/* Reserve consistent vertical space for the text block so rows align */
.project-tile .text-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 110px;       /* ~3 lines for the one-liner + title row */
}

.project-tile .meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--t-s);
  font-weight: 700;
  gap: var(--space-2);
  line-height: 1.25;
  min-width: 0;
  flex-wrap: wrap;       /* year drops below if title is too long */
}
.project-tile .meta .title {
  text-transform: none;
  min-width: 0;
  flex: 1 1 auto;
}
.project-tile .meta .year {
  color: var(--meta);
  font-weight: 400;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Mobile: stack year on its own line for every tile (consistency over compactness) */
@media (max-width: 760px) {
  .project-tile .meta { flex-direction: column; gap: 2px; align-items: flex-start; }
  .project-tile .meta .year { font-size: var(--t-xs); }
}
.project-tile .one-liner {
  font-size: var(--t-s);
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
}

@media (max-width: 600px) {
  .project-tile .text-block { min-height: 130px; }
}

/* Placeholder pattern (visible until images uploaded) --------------------- */
.placeholder {
  background:
    repeating-linear-gradient(
      45deg,
      #ededed 0,
      #ededed 12px,
      #f5f5f5 12px,
      #f5f5f5 24px
    );
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-xs);
  color: var(--meta);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Project page ------------------------------------------------------------ */

/* The composition: left column = hero image, right column = title + meta +
   body text on top, optional small images at the bottom (bottom-aligned to
   the hero). Below the 2-col block, additional image rows in a strict grid
   where every image in a row shares the same aspect ratio (always
   bottom-aligned within its row). */

.project-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;         /* right column at top, hero shows at natural height */
  margin-bottom: var(--space-5);
}
@media (max-width: 900px) {
  .project-layout { grid-template-columns: 1fr; gap: var(--space-3); align-items: start; }
}

.project-layout .left  { min-width: 0; }
.project-layout .right {
  min-width: 0;
  display: flex;
  flex-direction: column;     /* text top, side-grid bottom */
}

.project-hero {
  margin: 0;
  /* No forced height — let the image dictate its natural aspect ratio,
     matching the portfolio's vertical-portrait hero shots. */
}
.project-hero .placeholder { aspect-ratio: 4 / 5; }
.project-hero img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 900px) {
  .project-hero { height: auto; }
  .project-hero img { aspect-ratio: auto; }
}

/* Real images in gallery rows */
.project-gallery figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-header { margin-bottom: var(--space-3); }
.project-header .eyebrow {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta);
  font-weight: 700;
  margin-bottom: var(--space-1);
}
.project-header h1 {
  font-size: clamp(28px, 3.5vw, 40px);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
  line-height: 1.05;
}

/* Series page — section heading above the works grid */
.series-works { margin-top: var(--space-6); }
.section-heading {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--ink);
  font-weight: 700;
}
.project-meta {
  font-size: var(--t-s);
  color: var(--meta);
  line-height: 1.6;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule-thin);
  margin-bottom: var(--space-3);
}
.project-meta dl {
  margin: 0;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 4px var(--space-2);
}
.project-meta dt {
  text-transform: uppercase;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--meta);
  font-weight: 700;
}
.project-meta dd { margin: 0; color: var(--ink); }

.project-body {
  font-size: var(--t-m);
  line-height: 1.6;
}
.project-body p { margin: 0 0 1em; }
.project-body p:last-child { margin-bottom: 0; }

/* Responsive Vimeo embed below body text */
.video-embed {
  margin-top: var(--space-4);
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Optional small-image grid in the right column. Sits at the bottom of the
   column, bottom-aligned to the hero on the left. Use 2 or 3 children. */
.project-side-grid {
  display: grid;
  gap: var(--space-2);
  margin-top: auto;            /* push to bottom of flex parent */
  padding-top: var(--space-3); /* breathing room from text above */
}
.project-side-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.project-side-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.project-side-grid figure { margin: 0; }
.project-side-grid .placeholder { aspect-ratio: 1 / 1; }

/* Additional gallery rows below the 2-col block. Each .row contains
   figures of identical aspect-ratio so they bottom-align cleanly. */
.project-gallery {
  margin: var(--space-4) 0 var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.project-gallery .row {
  display: grid;
  gap: var(--space-2);
}
.project-gallery .row.cols-1 { grid-template-columns: 1fr; }
.project-gallery .row.cols-2 { grid-template-columns: 1fr 1fr; }
.project-gallery .row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.project-gallery .row.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

/* Aspect ratios for the row — applied to every figure inside a row,
   so they all bottom-align by definition. */
.project-gallery .row.ratio-square  figure .placeholder,
.project-gallery .row.ratio-square  figure img { aspect-ratio: 1 / 1; }
.project-gallery .row.ratio-wide    figure .placeholder,
.project-gallery .row.ratio-wide    figure img { aspect-ratio: 16 / 10; }
.project-gallery .row.ratio-tall    figure .placeholder,
.project-gallery .row.ratio-tall    figure img { aspect-ratio: 3 / 4; }
.project-gallery .row.ratio-classic figure .placeholder,
.project-gallery .row.ratio-classic figure img { aspect-ratio: 4 / 3; }
.project-gallery figure { margin: 0; }
.project-gallery figcaption {
  font-size: var(--t-xs);
  color: var(--meta);
  margin-top: var(--space-1);
  line-height: 1.5;
}

@media (max-width: 700px) {
  .project-gallery .row.cols-2,
  .project-gallery .row.cols-3,
  .project-gallery .row.cols-4 { grid-template-columns: 1fr; }
}

/* Side-by-side blocks for exhibition history + press --------------------- */
.project-context {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin: var(--space-5) 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--ink);
}
@media (max-width: 700px) {
  .project-context { grid-template-columns: 1fr; gap: var(--space-4); }
}
.project-context h2 {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
}
.project-context ul li {
  font-size: var(--t-s);
  line-height: 1.6;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--rule-thin);
}
.project-context ul li:last-child { border-bottom: none; }
.project-context .year {
  display: inline-block;
  width: 50px;
  color: var(--meta);
  font-variant-numeric: tabular-nums;
}

/* Project navigation (next/prev) ----------------------------------------- */
.project-nav {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--ink);
  padding-top: var(--space-3);
  margin-top: var(--space-5);
  font-size: var(--t-s);
  font-weight: 700;
}
.project-nav a { text-decoration: none; }
.project-nav a:hover { text-decoration: underline; }

/* CV / Information page lists -------------------------------------------- */
.page-title {
  font-size: var(--t-xxl);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}

/* CV header row: title left, Download PDF button right */
.cv-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.cv-header .page-title { margin-bottom: 0; }

.cv-intro {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--ink);
  font-size: var(--t-l);
  max-width: 56ch;
  line-height: 1.4;
}
.cv-intro p { margin: 0; }

/* CV grid — single column on mobile, but room to consider 2-col on desktop */
.cv-grid { display: block; }

.list-section { margin-bottom: var(--space-5); }
.list-section > h2 {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--ink);
}
.list-section ul { margin: 0; padding: 0; list-style: none; }
.entry {
  display: grid;
  grid-template-columns: 75px 1fr;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--rule-thin);
  font-size: var(--t-s);
  line-height: 1.5;
}
.entry:last-child { border-bottom: none; }
.entry .year {
  color: var(--meta);
  font-variant-numeric: tabular-nums;
}
.entry .what { color: var(--ink); }
.entry .what em { font-style: italic; }
.entry .where { color: var(--meta); }
.entry.solo .what::before {
  content: "● ";
  margin-right: 2px;
}
@media (max-width: 500px) {
  .entry { grid-template-columns: 55px 1fr; gap: 4px var(--space-2); }
}

/* Information / long-text pages ------------------------------------------ */

.info-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 800px) {
  .info-layout { grid-template-columns: 1fr; gap: var(--space-3); }
}

.info-nav {
  position: sticky;
  top: 90px;                /* below sticky header */
  font-size: var(--t-s);
}
.info-nav ul { list-style: none; padding: 0; margin: 0; }
.info-nav li { padding: 4px 0; }
.info-nav a {
  text-decoration: none;
  color: var(--meta);
  border-bottom: 1px solid transparent;
  transition: color 120ms;
}
.info-nav a:hover { color: var(--ink); }
@media (max-width: 800px) {
  .info-nav {
    position: static;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--ink);
  }
  .info-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
  }
  .info-nav li { padding: 0; }
}

.prose {
  max-width: 64ch;
  font-size: var(--t-m);
  line-height: 1.6;
}
.prose p { margin: 0 0 1.2em; }
.prose section { margin-bottom: var(--space-6); }
.prose section:last-child { margin-bottom: 0; }
.prose h2 {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--ink);
  scroll-margin-top: 90px;   /* anchor-link offset for sticky header */
}

/* Contact page ------------------------------------------------------------ */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
@media (max-width: 800px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}
.contact-block {
  font-size: var(--t-m);
  line-height: 1.6;
}
.contact-block p { margin: 0 0 0.8em; }
.contact-block p:last-child { margin-bottom: 0; }
.contact-block .btn { margin-top: var(--space-2); }

/* Buttons (PDF download, etc.) ------------------------------------------- */
.btn {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--ink);
  font-size: var(--t-s);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  background: var(--paper);
}
.btn:hover { background: var(--ink); color: var(--paper); }

/* Print ------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .menu, .project-nav { display: none; }
  body { color: black; background: white; }
}

/* Accessibility ----------------------------------------------------------- */
.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;
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}