/* Fonts and colours pass, 2 November 2026 (claude/design-plan-v3-ribbon-2-nov-26.md, regrouped: fonts and colours only).
   Bodoni Moda is retired (Sarah: it reads as Times New Roman). Spectral takes its place for Ray's name, his words and titles; Archivo stays for everything else.
   The page lightens from the old paper to "air" so the studio photographs sit on something close to their own walls. Nothing else changes. */
@import url("https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap");

/* Type pass, 2 November 2026 (claude/design-plan-2-nov-26.md).
   Two families: Bodoni Moda for Ray's name, his words and titles; Archivo for everything else.
   Sizes: 13 caption · 15 menu, buttons, dates · 17 body · 22 quote · 29 section · 39 page title · 52 display.
   Ordinary line spacing. The rust accent is retired from the interface; red stays only where it means something (sold dots, form errors).
   Loaded last on every page so it overrides each page's own styles. */

:root{
  --display: "Spectral", Georgia, "Times New Roman", serif;   /* replaces Bodoni Moda everywhere */
  --paper: #F6F6F3;                                           /* air: lighter than the old paper */
  --air: #F6F6F3;
  --mono: var(--grot);   /* every former typewriter use becomes Archivo */
  --oxide: var(--ink);   /* rust retired: focus rings, footer links, labels become ink */
  --sold: #A04A22;
  --t-cap: .8125rem;     /* 13 */
  --t-small: .9375rem;   /* 15 */
  --t-body: 1.0625rem;   /* 17 */
  --t-quote: 1.375rem;   /* 22 */
  --t-sec: 1.8125rem;    /* 29 */
  --t-title: 2.4375rem;  /* 39 */
  --t-disp: 3.25rem;     /* 52 */
}

body{ font-size: var(--t-body); line-height: 1.65 }

/* ---------- Header ---------- */
header .wordmark, header h1.wordmark, header p.wordmark{
  font-size: clamp(2.1rem, 4.4vw, var(--t-disp));
  letter-spacing: -.005em;
  text-transform: none;
  line-height: 1.1;
}
header nav li{ font-size: var(--t-small); letter-spacing: 0 }
header nav .here{ text-underline-offset: 6px }

/* ---------- Headings ---------- */
h1:not(.wordmark), #archive-view h1:not(.wordmark){
  font-size: clamp(2rem, 3.4vw, var(--t-title));
  line-height: 1.1;
}
/* The Index page keeps its small heading (Francee's choice, 18 Oct) */
.ix-intro h1:not(.wordmark){
  font-family: var(--grot); font-size: var(--t-small); font-weight: 400;
  letter-spacing: 0; color: var(--steel); line-height: 1.4;
}
.show h1, .show h2, .upc h2{
  font-size: clamp(2.2rem, 3.4vw, var(--t-title));
  line-height: 1.05;
}
.ex-title{ font-size: clamp(1.5rem, 2.6vw, var(--t-sec)) }
.hx-t{ font-size: var(--t-quote) }

/* Small labels become real headings in Bodoni, sentence case, no rule above */
.hlabel, .past-h, .bio h2, .cv h2,
.details h2, .msg h2, .idx h2{
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
  border-top: 0;
  padding-top: 0;
  line-height: 1.2;
}
.hlabel, .past-h, .bio h2{ font-size: var(--t-sec) }
.cv h2, .details h2, .msg h2, .idx h2{ font-size: var(--t-quote) }
.hx-head{ border-top: 0; padding-top: 0 }
/* Year markers on Current Work group a list, so they keep their fine rule */
.year{ font-family: var(--display); font-weight: 400; font-size: var(--t-quote); color: var(--ink) }

/* ---------- Running text ---------- */
.bio p, .ov p, .upc-ov, .ha-text p.ha-p{
  font-size: var(--t-body);
  line-height: 1.65;
  margin-bottom: 1.65em;
}
.intro .avail, .cw-top .avail{ font-size: var(--t-body); line-height: 1.65 }
.show .intro{ font-size: var(--t-body); line-height: 1.65 }

/* Ray's own words */
.ab-open{ margin: var(--top, 3rem) 0 clamp(2.5rem, 5vw, 3.75rem); max-width: none }
.ab-open .ab-q{
  font-size: clamp(1.9rem, 4.2vw, var(--t-disp));
  line-height: 1.12;
  max-width: 19em;
  margin: 0;
  text-wrap: balance;
}
.ab-open + section.ab-top{ margin-top: 0 }
.bio blockquote.ab-pull{ border-left: 0; padding-left: 0; margin: 0 0 1.65em }
.bio blockquote.ab-pull p{ font-size: var(--t-quote); line-height: 1.45 }
.ab-q, .ha-q, .ha-text p.ha-q{ line-height: 1.4 }

/* ---------- Details, dates, captions ---------- */
.spec, .ha-spec, .ha-text p.ha-spec, .ex-meta, .upc-meta, .show .dates, .stand .ways{
  font-family: var(--grot);
  font-size: var(--t-small);
  letter-spacing: 0;
  line-height: 1.6;
}
.show .venue, .upc-lab{
  font-family: var(--grot);
  font-size: var(--t-small);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--steel);
}
figcaption, .wspec, .rs, .iv-works, .ixv .s, .ixv .x, .note,
.vid figcaption, .cw-fig figcaption, .ab-fig figcaption, .ab-photos figcaption, .walk figcaption{
  font-family: var(--grot);
  font-size: var(--t-cap);
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--steel);
}
.hx-yr, .hx-d{ font-family: var(--grot); font-size: var(--t-cap); letter-spacing: 0 }

/* CV and press rows */
.row .yr{ font-size: var(--t-small); font-variant-numeric: tabular-nums; letter-spacing: 0 }
.row .d{ font-size: var(--t-small); line-height: 1.5; letter-spacing: 0 }
.row .ti{ font-size: var(--t-body) }

/* ---------- Links and buttons ---------- */
.go, .enq-go, .upc-go, .ov-enq, button[type="submit"]{
  font-family: var(--grot);
  font-size: var(--t-small);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.more, .upc-more, .ov-btn, .back, .ex-pn, .ex-more, .tabs button, .ix-clear{
  font-family: var(--grot);
  font-size: var(--t-small);
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- Index lists and filters ---------- */
.idx li, .ix-list li, .ix-list .nm{ font-size: var(--t-cap) }
.ix-list .yr, .ix-count{ font-size: var(--t-cap) }
.ix-bar label{ font-size: var(--t-cap); letter-spacing: 0; text-transform: none }
.ix-bar input, .ix-bar select{ font-size: var(--t-body) }
.idx-toggle{ letter-spacing: 0 }

/* ---------- Footer ---------- */
footer p{ font-family: var(--grot); font-size: var(--t-cap); letter-spacing: 0 }
footer a{ color: var(--ink) }

/* ---------- Red only where it means something ---------- */
.sdot{ background: var(--sold) }
.err, .formerr{ color: var(--sold); font-family: var(--grot); font-size: var(--t-cap) }
input[aria-invalid="true"], textarea[aria-invalid="true"]{ border-color: var(--sold) }

/* ---------- Layout pass, 2 Nov: the work larger (Current Work + every exhibition's Artworks tab) ----------
   Two across instead of three on screens 900px and wider, so each photo is about 2.3x the area.
   Pairs sit on a common baseline, so captions line up like a hang. Portrait works a little narrower so they don't tower. */
@media (min-width: 900px){
  .plate-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(3rem, 7vw, 7rem);
    row-gap: clamp(5rem, 11vh, 8rem);
    align-items: end;
  }
  #plates .plate-grid .imgwrap.port, #pane .plate-grid .imgwrap.port, .plate-grid .imgwrap.port{
    width: 72%;
    margin-inline: auto;
  }
}

/* ---------- Current Work opener, 2 Nov (Francee: gap under the text, the works felt cut off, nothing said "scroll") ----------
   The paragraph becomes a 22px lead so text and photo end at about the same height; Re-orient stays whole (height-limited,
   never cropped); the full-width rule under the opener is gone; the works start inside the first screen. Phones unchanged. */
@media (min-width: 861px){
  section.intro.cw-top{
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(3rem, 7vw, 7rem);
    align-items: start;
  }
  .cw-fig{ justify-self: end }
  .cw-fig img{ height: min(54vh, 500px); width: auto; max-width: 100% }
  .cw-text{ align-self: start; margin-top: clamp(1.6rem, 3vh, 2.2rem) }
  .cw-top .avail{ font-size: var(--t-quote); line-height: 1.5; max-width: 27em; margin: 0 }
}
.cw-top + hr.intro-rule{ display: none }
#plates .plate-grid{ margin-top: clamp(3.5rem, 8vh, 5rem) }

/* ---------- Spectral specifics, 2 Nov ----------
   Spectral's italic is lighter than Bodoni's: Ray's quotes use the 300 weight; titles and the wordmark stay at 400. */
.ab-open .ab-q, .ab-q, .ha-q, .ha-text p.ha-q, .stand .q, .range .q, .bio blockquote.ab-pull p{ font-weight: 300 }
header .wordmark, header h1.wordmark, header p.wordmark{ letter-spacing: 0 }
html{ background: var(--paper) }


/* ---------- Sizing pass, 2 November (evening) ----------
   One scale on every page, measured against the live site at 1440px:
   wordmark 52 · page title 36 · section 26 · small heading 20 · quote 22 (the Biography opening stays at 52) · body 17 · small 15 · caption 13.
   Fixes: Current Work's 22px intro and 12.5px enquiries line; the home "Ray Haydon" heading (61px, bigger than the wordmark);
   section headings the same size as the items under them; and the strays at 14.7, 15.2, 16 and 25.6px. */
:root{
  --t-title: 2.25rem;    /* 36 */
  --t-sec: 1.625rem;     /* 26 */
  --t-sub: 1.25rem;      /* 20 */
}
/* Page titles and the named shows */
h1:not(.wordmark), #archive-view h1:not(.wordmark){ font-size: clamp(1.9rem, 3vw, var(--t-title)) }
.show h1, .show h2, .upc h2{ font-size: clamp(1.9rem, 3vw, var(--t-title)) }
/* Home: the about heading sits a step below the wordmark, and the quote matches the other quotes */
.ha-h, h2.ha-h{ font-size: clamp(1.9rem, 3vw, var(--t-title)); line-height: 1.1 }
.ha-q, .ha-text p.ha-q{ font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.3; font-weight: 300; max-width: 17em; text-wrap: balance }
/* Sections, then the items under them */
.hlabel, .past-h, .bio h2{ font-size: var(--t-sec) }
.ex-title{ font-size: clamp(1.35rem, 2.2vw, var(--t-sec)) }
.hx-t{ font-size: var(--t-sub) }
/* Small headings: Collections, Video, Message, Gallery, Contact, Hours, Index */
.cv h2, .details h2, .msg h2, .idx h2, .gal h2, .vid h2, h3{ font-family: var(--display); font-weight: 400; font-size: var(--t-sub); letter-spacing: 0; text-transform: none; line-height: 1.25 }
.idx h2{ font-size: var(--t-body) }
/* Current Work: body text at body size, the enquiries line readable */
.intro .avail, .cw-top .avail, .cw-text p{ font-size: var(--t-body); line-height: 1.65; max-width: 38em }
@media (min-width: 861px){ .cw-top .avail{ font-size: var(--t-body); line-height: 1.65; max-width: 38em } }
.spec.cw-avail, p.cw-avail, .intro .spec, .intro.cw-top .cw-avail, .intro.cw-top p.cw-avail{ font-size: var(--t-small) }
.wtitle, .plate-grid .wtitle{ font-size: var(--t-body) }
/* Strays onto the scale */
.ex-ov, p.ex-ov{ font-size: var(--t-small) }
.row .b, .b{ font-size: var(--t-small) }
p.name, .gal .name, .details .name, .details p.name{ font-size: var(--t-quote); font-weight: 400 }
.gal a, .gal address, .gal p, .gal dt, .gal dd, address, .details p, .details a, .details dt, .details dd, .details address{ font-size: var(--t-small) }
#sent h3{ font-size: var(--t-sec) }
label{ font-size: var(--t-small) }