/* ==================================================================
   De Rrusie — chart layer for derrusie.com            v1 · 11.11.2026
   Load AFTER style.css:  <link rel="stylesheet" href="derrusie-chart.css">
   Nothing in the HTML has to change for this file to work.
   Fonts: Archivo (Expanded, wdth 125) + Crimson Pro / Italic, all OFL.
   For production, self-host the woff2 files in /assets/fonts and drop
   the @import (see the block commented out below).
   ================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@125,400&family=Crimson+Pro:ital,wght@0,400;1,400&display=swap");

/* Self-hosted alternative (preferred once the files are in the repo)
@font-face { font-family:"Archivo"; src:url("assets/fonts/Archivo-Variable.woff2") format("woff2");
  font-weight:100 900; font-stretch:62% 125%; font-display:swap; }
@font-face { font-family:"Crimson Pro"; src:url("assets/fonts/CrimsonPro-Variable.woff2") format("woff2");
  font-weight:200 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Crimson Pro"; src:url("assets/fonts/CrimsonPro-Italic-Variable.woff2") format("woff2");
  font-weight:200 900; font-style:italic; font-display:swap; }
*/

/* ------------------------------------------------------------------ */
/*  I  TOKENS                                                           */
/* ------------------------------------------------------------------ */
:root {
  /* palette — chart page 03 */
  --dr-slate: #373538;      /* text, main rules, the eye            */
  --dr-mid:   #5C5A5D;      /* secondary italics, footer, labels    */
  --dr-rule:  #D0CDC7;      /* row hairlines only                   */
  --dr-egg:   #F2EEE6;      /* default ground                       */ /* TODO A, ground */
  --dr-white: #FFFFFF;      /* alternate ground, lightbox           */
  --dr-aub:   #3E1A33;      /* seals, signature, confidential only  */

  /* type — one ratio, 1.2 (minor third), anchored on 13px text       */
  --dr-sans:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --dr-serif: "Crimson Pro", Georgia, "Times New Roman", serif;
  --fs-cap:    9px;         /* every tracked cap: nav, labels, rows, footer */
  --fs-cap-l:  10.8px;      /* page / section title only                    */
  --fs-text:   13px;        /* all running text, captions, values           */
  --fs-sub:    15.6px;      /* one italic subtitle per page, at most        */
  --track:     .2em;        /* chart: caps tracked 0.20 em                  */
  --track-l:   .24em;
  --track-num: .1em;        /* step numbers, years                          */
  --lh-cap:    1.6;
  --lh-text:   1.55;

  /* space — 4px base, used only from this list                        */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* margins — opened up, as in chart v3                               */
  --frame-inset:  clamp(14px, 2.2vw, 32px);   /* 32px at 1440, 14px at 390 */
  --pad-x:        clamp(18px, 3.4vw, 48px);   /* inside the frame          */
  --pad-top:      calc(var(--frame-inset) + clamp(88px, 9vw, 128px));
  --list-w:       720px;                      /* press, exhibitions        */
  --measure:      400px;                      /* about text column         */
  --logo-header:  calc(24px * 1.11 * 1.2);    /* TODO C was 24px; +11%, then +20% */
  --logo-intro:   clamp(56px, 5vw, 72px);

  /* re-point the existing variables so the old rules follow */
  --ink: var(--dr-slate);
  --paper: var(--dr-egg);
  --accent: var(--dr-slate);
  --frame: var(--dr-slate);
  --frame-weight: 1px;
  --serif: var(--dr-serif);
  --sans: var(--dr-sans);
  --display: var(--dr-sans);
  --nav-size: var(--fs-cap);
  --meta-size: var(--fs-text);
}

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--dr-serif);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  font-kerning: normal;
}
html { scroll-padding-top: var(--pad-top); }
::selection { background: var(--dr-slate); color: var(--dr-egg); }

/* ------------------------------------------------------------------ */
/*  II  THE TWO VOICES                                                  */
/*  Archivo Expanded caps (labels) / Crimson Pro (text). Weight 400.    */
/*  TODO D, Akzidenz: dropped (unverified web licence). OFL Archivo.    */
/* ------------------------------------------------------------------ */
.site-nav, .nav-works-toggle, .nav-works-menu a,
.header-section, .works-section-title, .press-heading,
.press-pub, .press-year, .site-footer,
.work-title, .contact-handle,
.studio-video-play, .studio-audio-play, .studio-audio-info,
.lightbox-controls, .lightbox-zoom-reset, .lightbox-zoom-native, .lightbox-zoom-level {
  font-family: var(--dr-sans);
  font-stretch: expanded;            /* = Archivo wdth 125 */
  font-weight: 400;
  font-size: var(--fs-cap);
  letter-spacing: var(--track);
  line-height: var(--lh-cap);
  text-transform: uppercase;
}
.header-section, .press-heading {
  font-size: var(--fs-cap-l);
  letter-spacing: var(--track-l);
}
.press-year, .studio-audio-no, .lightbox-zoom-level {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--track-num);
  color: var(--ink);
}

/* ------------------------------------------------------------------ */
/*  III  FRAME, HEADER, NAV, FOOTER                                     */
/* ------------------------------------------------------------------ */
.frame { inset: var(--frame-inset); }
.intro-logo { width: var(--logo-intro); }   /* was 104px */

.site-header--sticky,
.works-page .site-header--sticky {
  top: var(--frame-inset);
  left: var(--frame-inset);
  right: var(--frame-inset);
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* logo · title · nav, every page */
  align-items: center;
  padding: var(--s5) var(--pad-x) 0;
  gap: var(--s4);
}
.header-logo { width: var(--logo-header); grid-column: 1; justify-self: start; }
.header-section { grid-column: 2; }
.site-nav { grid-column: 3; justify-self: end; gap: var(--s5); } /* TODO B, nav */

/* active = slate with a hairline under it; hover = slate mid. No red. */
.site-nav > a:hover, .nav-works-toggle:hover, .nav-works-menu a:hover { color: var(--dr-mid); }
.site-nav > a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.nav-works-menu { padding-top: var(--s3); }
.nav-works-menu a { padding: var(--s1) 0; font-size: var(--fs-cap); letter-spacing: var(--track); }

/* the eye: slate by default; aubergine on hover (signature ink). */
.logo-default { filter: none; }

.site-footer, .studio-page .site-footer {
  right: calc(var(--frame-inset) + var(--pad-x));
  bottom: calc(var(--frame-inset) + var(--s4));
  color: var(--dr-mid);
  letter-spacing: var(--track);
}

/* ------------------------------------------------------------------ */
/*  IV  PAGE BOX — the bug fix                                          */
/*  .works-page { padding:0 } also hit press, exhibitions, studio,     */
/*  about and contact: their content starts at y=0, above the frame,   */
/*  and runs under the nav. Give every non-works page the same box.    */
/* ------------------------------------------------------------------ */
.press-page, .studio-page, .about-page, .contact-page {
  padding: var(--pad-top) calc(var(--frame-inset) + var(--pad-x)) calc(var(--frame-inset) + var(--s9));
  min-height: 100vh;
}

/* ------------------------------------------------------------------ */
/*  V  WORKS — captions in the chart's caption voice                    */
/* ------------------------------------------------------------------ */
.work-meta, .studio-meta {
  font-family: var(--dr-serif);
  font-size: var(--fs-text);
  font-style: italic;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
  color: var(--dr-mid);
}
.work-title { display: block; color: var(--ink); margin-bottom: var(--s1); font-style: normal; }
.work-year, .work-medium, .work-size, .work-place {
  font-family: var(--dr-serif);
  font-size: var(--fs-text);
  font-style: italic;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}
/* studio caption is typed in caps in the HTML: soften it */
.studio-meta .work-medium, .studio-meta .work-place { text-transform: lowercase; }
.studio-meta .work-medium::first-letter, .studio-meta .work-place::first-letter { text-transform: uppercase; }
#paintings .work-meta { margin-top: var(--s4); }
#paintings .work { padding: var(--s9) var(--s5) var(--s8); }
/* Jenma and Gesa were left-stuck by .work--featured { margin: 0 } */
#paintings .work--featured,
#paintings .work--featured-compact {
  margin-inline: auto;
  max-width: 100%;
}
#paintings .work-image img { max-height: calc(100vh - 300px); max-width: min(52vw, 680px); }

/* section heads: Roman numeral over a hairline (chart rhythm) */
.works-section-title {
  font-size: var(--fs-cap-l);
  letter-spacing: var(--track-l);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--dr-rule);
  margin-bottom: var(--s7);
}
#furniture .works-section-title::before { content: "II"; margin-right: 2.2em; color: var(--dr-mid); }
#inks      .works-section-title::before { content: "III"; margin-right: 2.2em; color: var(--dr-mid); }
#vonlovi   .works-section-title::before { content: "IV"; margin-right: 2.2em; color: var(--dr-mid); }
.works-subsection-title { font-family: var(--dr-serif); font-size: var(--fs-text); color: var(--dr-mid); }
.chair-views .work-image { background: transparent; }

/* ------------------------------------------------------------------ */
/*  VI  PRESS + EXHIBITIONS — the register                              */
/* ------------------------------------------------------------------ */
.press { max-width: var(--list-w); margin: 0 auto var(--s8); padding: 0; }
.press-heading {
  text-align: left;
  margin: 0 0 var(--s5);
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
}
.press-heading::before { content: "I"; margin-right: 2.2em; color: var(--dr-mid); }
.press-list { border-top: 1px solid var(--ink); margin-bottom: var(--s8); }
.press-list a, .press-list .press-row {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) 4.2em;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--dr-rule);
  font-family: var(--dr-sans);
  font-size: var(--fs-cap);
  letter-spacing: var(--track);
}
.press-pub { font-weight: 400; color: var(--ink); }
.press-title {
  font-family: var(--dr-serif);
  font-size: var(--fs-text);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  color: var(--dr-mid);
  line-height: 1.3;
}
.press-year { text-align: right; color: var(--ink); }
.press-list a:hover .press-pub, .press-list a:hover .press-title { color: var(--dr-mid); }
.press-list a:hover .press-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ */
/*  VII  ABOUT — text on the ground, not on the film                    */
/* ------------------------------------------------------------------ */
.about-page .about-bg {
  inset: calc(var(--frame-inset) + 1px) calc(var(--frame-inset) + 1px) calc(var(--frame-inset) + 1px) 50%;
  width: auto;
  height: auto;
  width: calc(50% - var(--frame-inset) - 1px);
  height: calc(100% - var(--frame-inset) * 2 - 2px);
  background: var(--dr-egg);
}
.about-page .about {
  color: var(--ink);
  text-shadow: none;
  max-width: var(--measure);
  margin: 0;
  margin-left: max(0px, calc(25% - var(--measure) / 2 - var(--pad-x)));
  min-height: calc(100vh - var(--pad-top) - var(--s9) - var(--frame-inset));
}
.about-page .site-nav, .about-page .nav-works-toggle { color: var(--dr-white); }
.about-page .header-section { color: var(--ink); }
.about-page .logo-default { filter: none; }
.about-page .site-footer { color: var(--dr-white); }
.about { font-size: var(--fs-text); line-height: var(--lh-text); letter-spacing: 0; }
.about h2 {
  font-family: var(--dr-sans); font-stretch: expanded; font-weight: 400;
  font-size: var(--fs-cap-l); letter-spacing: var(--track-l); text-transform: uppercase;
  text-align: left; margin: 0 0 var(--s3);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--ink);
}
.about-vita {
  font-family: var(--dr-serif);
  font-size: var(--fs-sub);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: var(--dr-mid);
  margin: 0 0 var(--s5);
  line-height: 1.35;
}
.about p { margin: 0 0 var(--s3); }

/* ------------------------------------------------------------------ */
/*  VIII  CONTACT + STUDIO                                              */
/* ------------------------------------------------------------------ */
.contact { gap: var(--s3); min-height: calc(100vh - var(--pad-top) - var(--s9) - var(--frame-inset)); }
.contact-handle { text-transform: uppercase; }
.contact-handle:hover, .contact-email:hover { color: var(--dr-mid); }
.contact-note { font-size: var(--fs-text); color: var(--dr-mid); font-style: italic; letter-spacing: 0; }
.contact-email { font-size: var(--fs-text); letter-spacing: 0; }

.studio-page {
  padding-right: var(--frame-inset);
  padding-left: var(--frame-inset);
  padding-bottom: var(--frame-inset);
}
.journal {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: var(--s1);
  height: calc(100vh - var(--pad-top) - var(--frame-inset) - var(--s2));
  margin: 0 var(--s2);
}
.journal a {
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--dr-rule);
}
.journal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.journal a:nth-child(1)  { grid-column: 1 / 3; grid-row: 1 / 3; }
.journal a:nth-child(2)  { grid-column: 3;     grid-row: 1 / 3; }
.journal a:nth-child(3)  { grid-column: 4 / 7; grid-row: 1; }
.journal a:nth-child(4)  { grid-column: 4 / 6; grid-row: 2; }
.journal a:nth-child(5)  { grid-column: 6;     grid-row: 2; }
.journal a:nth-child(6)  { grid-column: 1;     grid-row: 3 / 5; }
.journal a:nth-child(7)  { grid-column: 2;     grid-row: 3; }
.journal a:nth-child(8)  { grid-column: 3 / 6; grid-row: 3; }
.journal a:nth-child(9)  { grid-column: 2 / 5; grid-row: 4; }
.journal a:nth-child(10) { grid-column: 5;     grid-row: 4; }
.journal a:nth-child(11) { grid-column: 6;     grid-row: 4; }
.journal a:nth-child(12) { grid-column: 6;     grid-row: 3; }
.studio-video-wrap { background: var(--dr-slate); }
.studio-meta { margin-top: var(--s4); }
.studio-audio {
  left: calc(var(--frame-inset) + var(--pad-x));
  bottom: calc(var(--frame-inset) + var(--s6));
  max-width: 360px;
}
.studio-audio-bar::before { background: var(--dr-rule); }
.studio-audio-fill { background: var(--ink); }
.studio-audio-play:hover, .studio-audio-play[aria-pressed="true"] { color: var(--dr-mid); }

/* lightbox stays white: paintings are judged on white */
.lightbox, .lightbox-viewport, .lightbox-stage { background: var(--dr-white); }
.lightbox-close { font-family: var(--dr-sans); font-size: 18px; color: var(--ink); }
.lightbox-close:hover, .lightbox-controls button:hover { color: var(--dr-mid); }
.lightbox-controls button {
  font-family: var(--dr-sans);
  font-stretch: expanded;
  font-weight: 400;
  font-size: var(--fs-cap);
  letter-spacing: var(--track);
}
.lightbox-zoom-reset,
.lightbox-zoom-native { font-size: var(--fs-cap) !important; }

/* ------------------------------------------------------------------ */
/*  IX  MOBILE ≤ 720                                                    */
/* ------------------------------------------------------------------ */
@media (max-width: 720px) {
  :root { --pad-top: calc(var(--frame-inset) + 112px); }
  .site-header--sticky, .works-page .site-header--sticky {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    padding: var(--s4) var(--pad-x) 0;
  }
  .header-section { display: none; }
  .site-nav {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: end;
    gap: var(--s2) var(--s4);
    max-width: none;
    letter-spacing: .14em;
  }
  .site-nav > a, .nav-works-toggle { text-align: right; }
  .works-section-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #paintings .work { padding: var(--s9) 0 var(--s8); }
  #paintings .work-image img { max-width: 100%; max-height: calc(100vh - 320px); }
  .press-list a, .press-list .press-row { grid-template-columns: minmax(0, 1fr) 3.6em; gap: var(--s1) var(--s3); }
  .about-page .about-bg {
    position: relative; inset: auto; display: block;
    width: 100%; height: 52vh; margin: 0 0 var(--s6);
  }
  .about-page .site-nav, .about-page .nav-works-toggle, .about-page .site-footer { color: var(--ink); }
  .about-page .about { margin: 0; min-height: 0; }
  .studio-audio { left: calc(var(--frame-inset) + var(--pad-x)); right: calc(var(--frame-inset) + var(--pad-x)); }
  .journal {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: 32vh;
    height: auto;
    margin: 0;
  }
  .journal a { grid-column: auto; grid-row: auto; }
  .journal a:nth-child(3n) { grid-column: 1 / -1; }
  /* footer leaves the fixed layer on phones so it never sits on a list */
  .site-footer, .studio-page .site-footer, .about-page .site-footer {
    position: relative; left: auto; right: auto; bottom: auto;
    margin: var(--s7) 0 0; text-align: left;
  }
  body.works-page:not(.press-page):not(.studio-page):not(.about-page):not(.contact-page) .site-footer {
    padding: 0 calc(var(--frame-inset) + var(--pad-x)) calc(var(--frame-inset) + var(--s5));
  }
  .studio-page { padding-bottom: calc(var(--frame-inset) + var(--s10)); }
}