/* ==========================================================================
   Lola Raine — foundations, revised direction (2026-07-03, round 5)
   Voice: Times New Roman. Apparatus: Arial, regular weight.
   Palette: black on white; one light grey for navigation, easing to black
   on approach. No footer. No underlined navigation.
   Icons: the menu bars and the back chevron only.
   ========================================================================== */

:root {
  /* families */
  --serif: "Times New Roman", Times, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* colour — the entire palette */
  --black: #000;
  --white: #fff;
  --grey: #a6a6a6;     /* sampled from the reference — darkens to black on approach */

  /* motion */
  --nav-ease: color 200ms ease;

  /* type scale */
  --size-small: 1rem;       /* 16px — metadata, captions (site minimum) */
  --size-ui: 1.0625rem;     /* 17px — header, navigation */
  --size-base: 1.25rem;     /* 20px — reading text */
  --size-title: 0.875rem;   /* 14px — work titles, reduced per the client */
  --size-page: 2rem;        /* 32px — page titles, medium rooms */
  --leading: 1.6;

  /* spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;

  /* layout */
  --header-h: 4.5rem;
  --measure: 40rem;         /* reading column — ~65 characters at 20px Times */
  --work-col: 48rem;        /* artwork column — images sit in more air */
  --doc-col: 72rem;         /* document pages — labels left, text floats to the centre */
  --image-h: 70vh;          /* no artwork taller than this */
  --gutter: clamp(1.5rem, 5vw, 3rem);
}

@media (max-width: 40em) {
  :root {
    --size-base: 1.125rem;  /* 18px reading on phones */
    --header-h: 3.75rem;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--serif);
  font-size: var(--size-base);
  line-height: var(--leading);
}

h1, h2, h3, p, ul { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: normal; font-size: inherit; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }

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

.skip-link {
  position: absolute;
  left: -999px;
  top: var(--space-2);
  z-index: 20;
  background: var(--white);
  padding: var(--space-1) var(--space-2);
  font-family: var(--sans);
  font-size: var(--size-small);
}

.skip-link:focus { left: var(--space-2); }

/* visually hidden, available to screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: -1px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Opening: black settles into white, then the four rooms fade in.
   Runs once per visit; never for reduced-motion visitors.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  [data-intro] body.work-landing { animation: page-in 1800ms ease both; }
  [data-intro] .rooms a { animation: fade-in 700ms ease backwards; }
  [data-intro] .rooms a:nth-child(1) { animation-delay: 1700ms; }
  [data-intro] .rooms a:nth-child(2) { animation-delay: 1850ms; }
  [data-intro] .rooms a:nth-child(3) { animation-delay: 2000ms; }
  [data-intro] .rooms a:nth-child(4) { animation-delay: 2150ms; }
}

@keyframes page-in { from { background: var(--black); } }
@keyframes fade-in { from { opacity: 0; } }

/* --------------------------------------------------------------------------
   Header (interior pages) — name left, menu icon right
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: var(--header-h);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
}

.brand {
  font-family: var(--serif);
  font-size: var(--size-ui);
  text-decoration: none;
}

.brand:hover,
.brand:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* <details> drop-down: works without JavaScript; nav.js adds
   hover-open, close-on-outside-click and Escape */
.menu { position: relative; }

.menu > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: var(--space-2) 0 var(--space-2) var(--space-2);
  color: var(--grey);
  transition: var(--nav-ease);
}

.menu > summary::-webkit-details-marker { display: none; }

.menu > summary:hover,
.menu > summary:focus-visible,
.menu[open] > summary { color: var(--black); }

/* the three bars */
.bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bars span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
}

/* the possibilities lower down in line with the page — no box, no underline */
.menu-panel {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  width: max-content;
  background: var(--white);
  padding: var(--space-1) 0 var(--space-2) var(--space-2);
  text-align: left; /* same compact block as the homepage list */
}

.menu-panel ul {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.menu[open] .menu-panel li { animation: menu-drop 450ms ease backwards; }
.menu[open] .menu-panel li:nth-child(2) { animation-delay: 130ms; }
.menu[open] .menu-panel li:nth-child(3) { animation-delay: 260ms; }
.menu[open] .menu-panel li:nth-child(4) { animation-delay: 390ms; }

@keyframes menu-drop {
  from { opacity: 0; transform: translateY(-0.35rem); }
}

.menu-panel a {
  font-family: var(--sans);
  font-size: var(--size-ui);
  line-height: 1.35;
  color: var(--grey);
  text-decoration: none;
  transition: var(--nav-ease);
}

.menu-panel a:hover,
.menu-panel a:focus-visible,
.menu-panel a[aria-current="page"] { color: var(--black); }

/* --------------------------------------------------------------------------
   Page structure
   -------------------------------------------------------------------------- */

main {
  padding: calc(var(--header-h) + var(--space-5)) var(--gutter) var(--space-6);
}

.reading  { max-width: var(--measure);  margin-inline: auto; }
.work-col { max-width: var(--work-col); margin-inline: auto; }

.page-title {
  font-size: var(--size-page);
  margin-bottom: var(--space-4);
}

.reading p + p { margin-top: var(--space-2); }

/* --------------------------------------------------------------------------
   Work — the landing is four doors in a row; rooms carry the tab switcher
   -------------------------------------------------------------------------- */

.work-landing main {
  min-height: 100svh;
  padding-top: var(--header-h);
  padding-bottom: var(--header-h);
  display: grid;
  place-items: center;
}

.rooms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
}

.rooms a {
  font-size: 1rem; /* halved, per the client */
  text-decoration: none;
}

.rooms a:hover,
.rooms a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* On phones: two by two — sculpture performance / painting writing */
@media (max-width: 40em) {
  .rooms {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    justify-items: center;
    column-gap: var(--space-4);
    row-gap: var(--space-3);
  }
}

/* Medium switcher on room pages — current page is simply black */
.medium-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  font-family: var(--sans);
  font-size: var(--size-small);
  margin-bottom: var(--space-5);
}

.medium-nav a {
  color: var(--grey);
  text-decoration: none;
  transition: var(--nav-ease);
}

.medium-nav a:hover,
.medium-nav a:focus-visible,
.medium-nav a[aria-current="page"] { color: var(--black); }

/* The catalogue: one spacious column — images held back from every edge */
.work-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.work-entry img,
.detail-images img {
  width: auto;
  max-width: 100%;
  max-height: var(--image-h);
  margin-inline: auto; /* every picture centred, as in her portfolio */
}

.work-caption {
  margin-top: var(--space-2);
  text-align: center; /* captions centred under the work, like the portfolio pages */
}

.work-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--size-title);
}

.work-title a { text-decoration: none; }

.work-title a:hover,
.work-title a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.work-meta {
  font-family: var(--sans);
  font-size: 0.75rem;    /* 12px — descriptions reduced per the client */
  line-height: 1.6;
  margin-top: 0.35rem;
  color: #555;
}

/* Multi-image works: the picture itself is clickable and cycles through
   its views with a soft fade; a small counter keeps the position */
.cycle {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}

.cycle img { transition: opacity 150ms ease; }

.cycle-count {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--grey);
  margin-top: var(--space-1);
}

/* Poems — each sheet replicates a page of her writing samples:
   poems placed top/middle/bottom, centred, left or right, as she set them */
.poems {
  display: flex;
  flex-direction: column;
}

.poem-sheet {
  min-height: 95vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-5) 0;
}

.poem {
  max-width: var(--measure);
  font-family: var(--sans);   /* the writing samples are set in sans, as in her PDF */
  font-size: var(--size-ui);
  line-height: 1.45;
}

.poem--center { align-self: center; text-align: center; }
.poem--right  { align-self: flex-end; text-align: right; }
.poem--left   { align-self: flex-start; text-align: left; }

.poem-title {
  font-size: var(--size-ui);   /* plain, body-size titles, exactly as the PDF */
  margin-bottom: var(--space-2);
}

/* Shared document language — Statement and CV use the same grid,
   the same bold lowercase labels, the same sans text */
.cv-label {
  font-family: var(--serif);
  font-size: var(--size-small);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.18em;   /* the homepage's spaced capitals, at reading scale */
  color: var(--black);
  margin: 0;
}

.cv-grid div > p + p { margin-top: var(--space-3); }

/* captions under detail images */
.detail-caption {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: #555;
  margin-top: var(--space-1);
  text-align: center;
}

/* video embed on performance detail pages */
.video-embed {
  aspect-ratio: 16 / 9;
  width: 100%;
  margin-inline: auto;
}

.video-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-file video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  margin-inline: auto;
}

/* CV — label column left, entries right, as in her document */
.doc-col { max-width: var(--doc-col); margin-inline: auto; }

.cv-grid {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--space-6);
  font-family: var(--sans);
  font-size: var(--size-ui);
  line-height: var(--leading); /* the site's reading rhythm, not a tighter one */
}

/* the text block drifts toward the centre of the page;
   the titles hold the left edge like wall labels */
.cv-grid > div {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
}

.cv-entry { margin-bottom: var(--space-3); }
.cv-entry:last-child { margin-bottom: 0; }

/* names step up gently instead of shouting — no hard bold
   against the quiet spaced capitals of the section titles */
.cv-entry strong { font-weight: 500; }

/* Statement — the reading voice inside the same document grid */
.stmt-text {
  font-family: var(--serif);
  font-size: var(--size-base);
  line-height: var(--leading);
}

.stmt-text p + p { margin-top: var(--space-3); }

@media (max-width: 40em) {
  .cv-grid { grid-template-columns: 1fr; row-gap: var(--space-2); }
  .cv-grid .cv-label { margin-top: var(--space-4); }
  .cv-grid > div { margin-inline: 0; }
}

/* --------------------------------------------------------------------------
   Work detail pages — a thin chevron waits at the left edge
   -------------------------------------------------------------------------- */

.back-link {
  position: fixed;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  padding: var(--space-2);
  color: var(--grey);
  transition: var(--nav-ease);
}

.back-link:hover,
.back-link:focus-visible { color: var(--black); }

.back-link svg {
  display: block;
  width: 1.1rem;
  height: 2.2rem;
}

/* On small screens the chevron sits in the flow above the title */
@media (max-width: 60em) {
  .back-link {
    position: static;
    transform: none;
    display: inline-block;
    margin: 0 0 var(--space-3) calc(-1 * var(--space-2));
  }
}

.detail-title {
  font-style: italic;
  font-size: 1.375rem;
  text-align: center;
}

.work-col > .work-meta { text-align: center; }

.detail-images {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-5) 0;
}

.detail-text { max-width: var(--measure); }

.detail-text p + p { margin-top: var(--space-2); }

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header,
  .home-nav,
  .menu,
  .skip-link,
  .back-link,
  .cycle-count { display: none; }

  main { padding: 0; }
}