/* Local Helvetica Now webfonts, following grundnigg.at.
   Font files are supplied separately in /fonts on the website. */

@font-face {
  font-family: "HelveticaNowText-Light";
  src: url("fonts/HelveticaNowText-Light.woff2") format("woff2"),
       url("fonts/HelveticaNowText-Light.woff") format("woff");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

/* Included to match the available type family at grundnigg.at;
   the site intentionally uses the Light style for all headings too. */
@font-face {
  font-family: "HelveticaNowDisplay-Medium";
  src: url("fonts/HelveticaNowDisplay-Medium.woff2") format("woff2"),
       url("fonts/HelveticaNowDisplay-Medium.woff") format("woff");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

/* Viktoria Kirjuchina — typography and layout.
   All visible text has the same size. Only image copyright lines are smaller. */

:root {
  --type-size: 32px;
  --line-height: 1.17;
  --page-padding: clamp(20px, 3.65vw, 60px);
  --column-gap: clamp(20px, 2.5vw, 40px);
  --section-gap: 116px;
  --ink: #000;
  --paper: #fff;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "HelveticaNowText-Light", Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--type-size);
  font-weight: 300;
  line-height: var(--line-height);
  letter-spacing: 0;
  /* Use the webfont's kerning pairs. True optical kerning, as in
     InDesign, is not a standard CSS setting. */
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  /* Only has an effect if the installed font contains an opsz axis. */
  font-optical-sizing: auto;
  /* Helvetica Now: rounded punctuation, rounded G, straight-legged R.
     Requires these OpenType stylistic sets in the installed webfont files. */
  font-feature-settings: "ss01" 1, "ss03" 1, "ss04" 1;
  -webkit-font-smoothing: antialiased;
}

/* No visual font hierarchy, even for headings, teasers, years or credits. */
h1, h2, h3, h4, h5, h6, p, nav, summary,
.text-title, .text-teaser, .text-bibliography,
.awards-intro, .award-year, .award-credits, .award-prizes,
.award-project-title, .exhibition-item p {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: normal;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
p + p { margin-top: 1.04em; }
figure { margin: 0; }
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.site-name, .main-nav a { text-decoration: none; }
.page { padding: 24px var(--page-padding) 44px; }

/* The navigation stays visible and fully transparent.
   Scrolling content intentionally overlaps with the header text. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  background: transparent;
  padding: 24px var(--page-padding) 12px;
  margin: -24px calc(-1 * var(--page-padding)) 60px;
}
.main-nav { display: flex; gap: 20px; white-space: nowrap; }
/* Keep anchored content clear of the persistent header. */
#student-work, #exhibitions, #texte { scroll-margin-top: calc(var(--type-size) * var(--line-height) + 48px); }

/* Two-column biography */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 var(--column-gap);
  align-items: start;
}
.intro { grid-column: 1; grid-row: 1; min-width: 0; }
.social-links { margin-top: 0.9em; margin-bottom: 2.55em; }
.portrait { grid-column: 2; grid-row: 1 / span 2; min-width: 0; position: sticky; top: 22px; }
.portrait img { display: block; width: 100%; height: auto; }
.biography { grid-column: 1; grid-row: 2; min-width: 0; }

/* Only image captions are smaller. 4px gap to portrait and publication images. */
.image-credit, .text-thumbnail .image-credit, .portrait .image-credit {
  margin: 4px 0 12px;
  color: #000;
  font-size: 11px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: left;
}
.image-credit a { color: inherit; }

/* Shared editorial grid; pictures are NOT cropped. */
.content-section { margin-top: var(--section-gap); }
.section-heading { margin-bottom: 0.85em; }
.exhibitions-grid, .books-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.exhibition-item, .book-item { min-width: 0; }
.exhibition-item .image-link { display: block; margin-bottom: 12px; }
.exhibition-item img, .book-item img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}
.exhibition-item p, .book-item p { overflow-wrap: break-word; }

/* Accordions: arrow immediately adjacent to section title. */
.texts-accordion > summary {
  display: inline-flex;
  align-items: baseline;
  gap: 0.12em;
  width: fit-content;
  max-width: 100%;
  list-style: none;
  cursor: pointer;
  user-select: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.texts-accordion > summary::-webkit-details-marker { display: none; }
.texts-accordion > summary::marker { content: ""; }
.accordion-arrow { display: inline-block; transition: transform .2s ease; }
.texts-accordion[open] .accordion-arrow { transform: rotate(180deg); }
.texts-list, .awards-list { margin-top: 1.3em; }

/* Publication rows: portrait images in their original proportions, no cropping. */
.text-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 28px 0;
  border-top: 1px solid #ddd;
}
.text-content { min-width: 0; }
.text-thumbnail { min-width: 0; }
.text-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}
.text-teaser { margin-top: 0.5em; }
.text-bibliography { margin-top: 0.9em; overflow-wrap: anywhere; }

/* Student awards: one project per row, complete equal-sized information. */

.awards-intro { margin-bottom: 1.2em; }
.award-project {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 25px 0;
  border-top: 1px solid #ddd;
}
.award-details { min-width: 0; }
.award-project-title { overflow-wrap: anywhere; }
.award-credits, .award-prizes { margin-top: 0.35em; }
/* Each competition is a separate row, with no mid-dot separators. */
.award-prizes .award-entry { display: block; }
.site-footer { margin-top: 126px; }

/* Responsive */
@media (max-width: 1250px) {
  :root { --type-size: clamp(25px, 2.5vw, 32px); }
}
@media (max-width: 900px) {
  :root { --type-size: 26px; --section-gap: 88px; }
  .site-header { margin-bottom: 42px; }
  .exhibitions-grid, .books-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 22px;
  }
}
@media (max-width: 680px) {
  :root { --type-size: 22px; --section-gap: 75px; }
  :root { --page-padding: 17px; }
  .page { padding: 19px var(--page-padding) 32px; }
  .site-header { padding-top: 19px; margin-top: -19px; margin-bottom: 34px; gap: 12px; }
  .main-nav { gap: 14px; }
  .hero { display: flex; flex-direction: column; gap: 0; }
  .intro { order: 1; }
  .social-links { margin-bottom: 1.3em; }
  .portrait { order: 2; position: static; width: 100%; margin-bottom: 1.85em; }
  .biography { order: 3; }
  .text-item { grid-template-columns: 80px minmax(0, 1fr); gap: 15px; padding: 22px 0; }
  .award-project { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 20px 0; }
  .site-footer { margin-top: 80px; }
}
@media (max-width: 390px) {
  :root { --type-size: 20px; }
  .exhibitions-grid, .books-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .accordion-arrow { transition: none; }
}