/* ==========================================================================
   Chrissie Hynde Paintings — prototype stylesheet
   Fonts are approximations of the current site; swap the two families in
   :root and the Google Fonts link in each page head to match exactly.
   ========================================================================== */

:root {
  /* Colour */
  --c-bg:          #ffffff;
  --c-blue:        #83dcff;   /* measured — the single blue */
  --c-ink:         #000000;   /* measured — labels */
  --c-body:        #837777;   /* measured — all grey text */
  --c-rule:        #dededa;   /* hairline on the publication image only */

  /* Type */
  /* Type — Adobe Fonts kit wpa1kyr */
  --f-serif: "mrs-eaves", Baskerville, Georgia, serif;
  --f-caps:  "mrs-eaves-roman-all-petite-c", "mrs-eaves", Baskerville, Georgia, serif;

  --fs-body:       18px;   /* measured */
  /* The wordmark runs to ~14x its own font-size, so it needs a lower floor
     than the titles or it overflows a phone. Tops out at the same 45px. */
  --fs-wordmark:   clamp(1.5625rem, 3.2vw, 2.8125rem);   /* 25px floor */
  --fs-label:      20px;   /* measured */
  --fs-caps-md:    28px;   /* measured — exhibition titles, Order button */

  /* Layout */
  --measure:   50rem;
  --exhibit-w: 34rem;   /* image cap, entry width and divider width */
  --gutter:    clamp(1rem, 5vw, 4.5rem);

  /* Distance from the viewport edge to the axis that the menu button and the
     rotated wordmark are both centred on — horizontally for the wordmark,
     and vertically for the button and the top wordmark. Increase it to move
     them further in; content clearance follows automatically. */
  --rail-axis: clamp(1.75rem, 3.5vw, 2.75rem);
  --toggle:    clamp(1.6rem, 4vw, 2.25rem);
  --bar-h:     2px;
  --bar-gap:   0.28rem;
  --space-s:   clamp(0.5rem, 1vw, 0.85rem);
  --space-m:   clamp(1rem, 2.2vw, 1.75rem);
  --space-l:   clamp(2rem, 5vw, 4rem);
  --space-xl:  clamp(3rem, 7vw, 6rem);

  --dur:  0.6s;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--c-bg);
  /* Keeps centred elements in the same place on pages that scroll and pages
     that don't — otherwise the scrollbar shifts them by its own width. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-body);
  font-family: var(--f-serif);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-feature-settings: "onum" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a { color: inherit; }

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--c-body);
  outline-offset: 4px;
}

/* ---------- Skip link ---------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--c-bg);
  font-family: var(--f-caps);
  font-size: 0.9rem;
  letter-spacing: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.skip:focus { left: 0; }

/* ---------- Wordmark ---------- */

.wordmark {
  position: fixed;
  z-index: 60;
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: var(--fs-wordmark);
  letter-spacing: normal;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.wordmark a { text-decoration: none; }

.wordmark__name { color: var(--c-blue); }
.wordmark__word { color: var(--c-body); }

/* Horizontal, centred — the at-rest state. Vertically aligned to the centre
   of the menu button so the two read off one line.

   Centred by spanning the viewport and centring the inline anchor, NOT by
   translateX(-50%). GSAP animates y on this element, and writing a transform
   on top of a percentage translate it has already read from the computed
   matrix shifts the element by half its own width. Leaving the transform
   property entirely to GSAP avoids that. */
.wordmark--top {
  top: calc(var(--rail-axis) - 0.5em);
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
}

/* The band spans the full width, so only the text itself takes clicks —
   otherwise it would sit over the menu button. */
.wordmark--top a { pointer-events: auto; }

/* Vertical, left edge — the scrolled state, reading bottom to top.
   Centred on the rail and on the viewport, then rotated about its own centre,
   so it always sits centrally within the left padding at any size.

   This one keeps its transform because GSAP only animates autoAlpha on it.
   Do not animate x or y here without moving the centring off transform
   first — see the note on .wordmark--top. */
.wordmark--side {
  top: 50%;
  left: var(--rail-axis);
  transform-origin: center center;
  transform: translate(-50%, -50%) rotate(-90deg);
  opacity: 0;
  visibility: hidden;
}

/* ---------- Menu button ---------- */

.menu-toggle {
  position: fixed;
  z-index: 90;
  top: calc(var(--rail-axis) - var(--toggle) / 2);
  left: calc(var(--rail-axis) - var(--toggle) / 2);
  width: var(--toggle);
  height: var(--toggle);
  padding: 0;
  display: grid;
  place-content: center;
  gap: var(--bar-gap);
  background: none;
  border: 0;
  cursor: pointer;
}

.menu-toggle__bar {
  display: block;
  width: 1.4rem;
  height: var(--bar-h);
  background: var(--c-blue);
  transition: transform var(--dur) var(--ease), opacity 0.25s linear;
}

/* Open state: the outer bars travel to the centre line and cross; the middle
   one fades. The offset is one bar height plus one gap, so it stays correct
   if either token changes. */
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
  transform: translateY(calc(var(--bar-h) + var(--bar-gap))) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
  transform: translateY(calc(-1 * (var(--bar-h) + var(--bar-gap)))) rotate(-45deg);
}

/* ---------- Menu overlay ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-content: center;
  background: var(--c-bg);
  opacity: 0;
  visibility: hidden;
}

.menu.is-open {
  opacity: 1;
  visibility: visible;
}

.menu__inner {
  text-align: center;
  width: min(52rem, 90vw);
}

.menu__wordmark {
  font-family: var(--f-caps);
  font-weight: 400;
  /* Same 45px as the menu links on desktop, but scales down on narrow
     screens — at 24 characters it overflows a phone otherwise. */
  font-size: var(--fs-wordmark);
  letter-spacing: normal;
  text-transform: uppercase;
  line-height: 1;
}

.menu__wordmark a { text-decoration: none; }

.menu__rule {
  height: 0;
  margin: var(--space-m) 0 0;
  border: 0;
  border-top: 1px solid var(--c-body);
}

.menu__list {
  display: grid;
  gap: 0;
  margin-top: var(--space-m);
}

.menu__link {
  font-family: var(--f-caps);
  font-weight: 400;
  /* Same size as the wordmark above them. */
  font-size: var(--fs-wordmark);
  letter-spacing: normal;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-body);
  transition: color 0.3s var(--ease);
}

.menu__link:hover,
.menu__link:focus-visible,
.menu__link[aria-current="page"] { color: var(--c-blue); }

.menu__item--minor { margin-top: var(--space-l); }

.menu__item--minor .menu__link {
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  color: var(--c-blue);
}

.menu__item--minor .menu__link:hover,
.menu__item--minor .menu__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* ---------- Page shell ---------- */

/* Transitions fade this element out before navigating. The background is
   painted on body, so the colour never changes between pages. will-change is
   applied from JS for the duration of the fade rather than permanently. */

.page {
  padding-block:
    calc(var(--rail-axis) + var(--fs-wordmark) / 2 + var(--space-s))
    var(--space-l);
  padding-inline: var(--rail-axis);
  margin-inline: auto;
  max-width: calc(var(--measure) + var(--gutter) * 2);
  text-align: center;
}

/* The exhibitions list runs its dividing rules much wider than the
   images sitting between them. */
.page--wide { max-width: min(96rem, 100%); }

/* 404 — a single line, centred in the viewport. svh so mobile browser chrome
   does not push it below the fold. */
.page--404 {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-content: center;
  padding-block: var(--space-l);
}

.page--404 .page-title { margin-bottom: 0; }

/* ---------- Home page lockup ---------- */

/* The exhibition title is supplied artwork (o_c.png), not live type — the
   font kit contains no sans, so this was never set in HTML. */
.lockup {
  margin: 0 auto;
  max-width: 28rem;
}

.page-title {
  font-family: var(--f-caps);
  font-weight: 400;
  /* Same size as the wordmark. */
  font-size: var(--fs-wordmark);
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: var(--space-l);
}

/* ---------- Artwork ---------- */

.artwork {
  margin: var(--space-l) auto 0;
  max-width: 34rem;
}

.artwork img {
  margin-inline: auto;
  box-shadow: 0 1.5rem 3.5rem rgba(20, 20, 20, 0.16);
}

.gallery-mark {
  margin: var(--space-l) auto 0;
  max-width: 15rem;
}

/* ---------- Label / value pairs ---------- */

.details {
  margin-top: var(--space-l);
  display: grid;
  gap: var(--space-m);
}

.details__label {
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: var(--fs-label);
  line-height: 0.95;
  /* The petite caps face supplies the spacing — none is added. */
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--c-ink);
  margin-bottom: var(--space-s);
  font-feature-settings: "onum" 0;
}

.details__value {
  color: var(--c-body);
  line-height: 1.056;   /* 19px on 18px, measured */
}

.details__value a {
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

/* Underlined on hover and keyboard focus only — matches the contact page. */
.details__value a:hover,
.details__value a:focus-visible {
  color: var(--c-blue);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* ---------- Exhibitions ---------- */

.exhibitions {
  display: grid;
  gap: var(--space-m);
  min-width: 0;
}

.exhibitions > * { min-width: 0; }

/* Capped to the image width so the divider above each entry matches the
   artwork rather than running the full container. */
.exhibition {
  max-width: min(var(--exhibit-w), 100%);
  margin-inline: auto;
  min-width: 0;
}

.exhibition + .exhibition {
  border-top: 1px solid var(--c-body);
  padding-top: var(--space-m);
}

.exhibition__image {
  margin-inline: auto;
  max-width: min(var(--exhibit-w), 100%);
  box-shadow: 0 1rem 2.5rem rgba(20, 20, 20, 0.13);
}

.exhibition__title {
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: var(--fs-caps-md);
  line-height: 1;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--c-blue);
  margin-top: var(--space-m);
}

.exhibition__meta {
  margin-top: 0;
  color: var(--c-body);
}

.exhibition__venue,
.exhibition__sep,
.exhibition__dates { display: block; }

.exhibition__sep {
  margin: 0.35em 0;
  color: var(--c-body);
}

.exhibition.is-current .exhibition__title { color: var(--c-blue); }

/* ---------- Publication ---------- */

.publication__image {
  margin: 0 auto var(--space-l);
  max-width: min(36rem, 100%);
  border: 1px solid var(--c-rule);
}

.publication__title {
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: var(--fs-caps-md);
  line-height: 1;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: var(--space-m);
}

.publication__body {
  max-width: 40rem;
  margin: 0 auto var(--space-l);
}

.button {
  display: inline-block;
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: var(--fs-caps-md);
  line-height: 1;
  letter-spacing: normal;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-blue);
  padding: 0.9rem 2.6rem;
  border: 1px solid currentColor;
  background-color: transparent;
  transition: background-color 0.3s var(--ease),
              border-color 0.3s var(--ease),
              color 0.3s var(--ease);
}

.button:hover,
.button:focus-visible {
  background-color: var(--c-blue);
  border-color: var(--c-blue);
  color: #ffffff;
}

/* ---------- Contact ---------- */

.contact__email {
  font-family: var(--f-serif);
  font-size: var(--fs-body);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

/* Underlines on hover and on keyboard focus, so the link is still
   identifiable as one without carrying a rule at rest. */
.contact__email:hover,
.contact__email:focus-visible {
  color: var(--c-blue);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* ---------- Motion defaults ---------- */

/* Elements JS will reveal. Guarded by .js so they stay visible without it. */
.js [data-reveal] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; }
  .menu-toggle__bar { transition: none; }
}

/* Very short viewports cannot fit the rotated wordmark whatever its size. */
@media (max-height: 26rem) {
  .wordmark--side { display: none; }
}

/* ---------- Long-form copy ---------- */

/* The live policy page runs its measure nearly the full width of the
   viewport. Matched here — see README for the reservation about it. */
/* Lets the prose centre on the viewport rather than inside the narrower page
   box. The column width itself comes from .prose. */
.page--full { max-width: none; }

.prose {
  /* Same column as the exhibitions list, so the two pages line up. */
  max-width: var(--exhibit-w);
  margin-inline: auto;
  text-align: left;
}

/* Section headings sit under a full-width rule, in grey rather than blue. */
.prose h2 {
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--c-body);
  border-top: 1px solid var(--c-body);
  padding-top: var(--space-m);
  margin: var(--space-l) 0 var(--space-m);
}

.prose > h2:first-of-type { margin-top: var(--space-m); }

.prose h3 {
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--c-body);
  margin: 0 0 var(--space-m);
}

.prose p { margin-bottom: var(--space-m); }

.prose ol {
  margin: 0 0 var(--space-m);
  padding-left: 2.6em;
  list-style: decimal;
}

.prose ol ul {
  margin: var(--space-m) 0;
  padding-left: 1.2em;
  list-style: disc;
}

.prose li { margin-bottom: var(--space-m); }
.prose li p:last-child { margin-bottom: 0; }

/* Emphasis in the source is not bold on the live page. */
.prose strong { font-weight: 400; }

.prose a {
  color: var(--c-blue);
  text-decoration: none;
}

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

/* Accessible page heading where the design shows none. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   Responsive overrides
   These sit after every base rule deliberately. Media queries add no
   specificity, so an override placed above the rule it targets simply
   loses — which is what was happening to the policy page indents.
   ========================================================================== */

/* The policy page is the only one with running text, and on a phone the
   desktop indents and gaps leave it wrapping at around 28 characters. */
@media (max-width: 40rem) {
  /* Flush left. The markers move inside the text flow so they are not
     clipped, which costs the hanging indent — wrapped lines start at the
     left edge rather than under the first word. Worth it for the width. */
  .prose ol,
  .prose ol ul {
    padding-left: 0;
    list-style-position: inside;
  }

  .prose ol ul { margin: var(--space-s) 0; }

  .prose li { margin-bottom: var(--space-s); }
  .prose p  { margin-bottom: var(--space-s); }

  .prose h2 {
    margin-top: var(--space-m);
    margin-bottom: var(--space-s);
    padding-top: var(--space-s);
  }

  .prose h3 { margin-bottom: var(--space-s); }
}

/* ==========================================================================
   Cookie consent (CookieYes)
   Overrides for the third-party banner. !important throughout is required —
   CookieYes ships its own stylesheet and loads it after this one.
   Consolidated from the supplied rules; behaviour is unchanged.
   ========================================================================== */

.cky-consent-title,
.cky-bar-text,
.cky-btn {
  font-family: "mrs-eaves", serif !important;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: -0.1px;
}

.cky-consent-title,
.cky-bar-text { color: #827777 !important; }

.cky-consent-title {
  font-weight: normal !important;
  text-align: center;
  margin-bottom: 10px !important;
}

.cky-bar-text,
.cky-btn-readMore {
  font-size: 11px !important;
  line-height: 14px !important;
}

.cky-banner { background-color: #ffffff !important; }

.cky-consent-bar.cky-banner {
  border: 0 !important;
  border-top: 2px solid #ffffff !important;
}

.cky-btn { border: 1px solid #827777 !important; }

.cky-btn-reject,
.cky-btn-accept,
.cky-btn-settings {
  color: #827777 !important;
  background-color: #ffffff !important;
}

/* NOTE: white text. On the white banner above this is invisible — see README. */
.cky-btn-readMore { color: #ffffff !important; }