:root {
  --paper: #F8F3DC;
  --ink: #4A78AE;
  --ink-dark: #2F5A8C;
  --text: #1a1a1a;
  --measure: 36rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --rule: 0.45rem;                         /* the covers' thick blue rule */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--text);
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.45;
  padding: var(--gutter);
}
a { color: var(--ink-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

.masthead { border-bottom: var(--rule) solid var(--ink); padding-bottom: 0.9rem; margin-bottom: 2.5rem; color: var(--ink); }
.masthead h1, .masthead > p:first-child { font-size: clamp(1.7rem, 5vw, 2.8rem); line-height: 1.1; font-weight: 700; }
.masthead a { color: inherit; }
.masthead .sub { font-size: clamp(1.05rem, 2.4vw, 1.4rem); font-weight: 500; margin-top: 0.3em; }
.masthead .nd { margin-left: .07em; }   /* Helvetica's 6 sits tight against the en dash */
.backline { margin: -0.9rem 0 1.25rem; font-size: .95rem; font-weight: 700; }
.backline a { color: var(--ink); display: inline-block; padding: .5rem 0; }
.backline a:hover { text-decoration: none; }
.backline a:hover .t { text-decoration: underline; }   /* the arrow stays un-underlined */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
main.grid a:target:focus-visible { outline: none; }   /* returning to a gallery spot by link focuses it; no ring for that */
.plate-page .masthead > p:first-child, .gallery .masthead h1 { font-size: clamp(1.2rem, 3vw, 1.6rem); }
.plate-page .masthead .sub, .gallery .masthead .sub { font-size: 1rem; }


/* Commission landing: text beside the samples on wide screens */
main.intro { display: grid; gap: 3rem var(--gutter); align-items: start; }
@media (max-width: 56rem) { .frame img { object-position: center; } }
@media (max-width: 66rem) {   /* one column: the drawing first, so the first screen shows a drawing */
  main.intro .samples { order: -1; }
  main.intro .samples img { max-height: 42svh; max-height: calc(var(--vh0, 1svh) * 42); }
}
@media (min-width: 66rem) {
  main.intro { grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr); grid-template-rows: auto 1fr; }
  main.intro .samples { grid-column: 2; grid-row: 1 / span 2; }
  main.intro footer.inline { grid-column: 1; grid-row: 2; margin-top: 0; }
}
.text p { margin-bottom: 1em; }
.enter { font-weight: 700; margin-top: 1.5em; font-size: 1.15rem; }
.enter a { color: var(--ink); }
.samples { display: flex; flex-direction: column; gap: 3rem; align-items: center; }
.samples img { max-height: 70vh; width: auto; }

/* gallery */
main.grid { --k: 0.42; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .75rem 1rem; }
@media (max-width: 40rem) { main.grid { --k: 0.2; gap: .75rem .6rem; } }   /* same shared scale idea, smaller on phones */
main.grid::after { content: ""; flex: auto; }   /* a short last row sits left instead of spreading */
main.grid a { display: block; width: min(100%, calc(var(--gw) * var(--k))); }
/* short drawings lift a little off the row's baseline, more the shorter they are; full-page-tall ones stay on it */
main.grid a { margin-bottom: max(0px, calc((900px - var(--gh)) * var(--k) * 0.12)); }
main.grid img { width: 100%; height: auto; display: block; }
main.grid a { scroll-margin-top: var(--gutter); }

/* one plate: the drawing in a fixed frame, scaled to fit; the controls never move */
.plate-page .masthead { margin-bottom: 1.5rem; }
main.viewer { display: grid; gap: 1.25rem var(--gutter); grid-template-rows: 54vh auto; }
/* on phones the whole plate page fits the small viewport (browser toolbars showing), so a bottom toolbar
   never covers the pager: the page is one screen tall and the drawing's frame takes whatever height the
   masthead, reference and pager leave, however they wrap */
body.plate-page { box-sizing: border-box; height: 100svh; display: flex; flex-direction: column;
                  padding-bottom: calc(var(--gutter) + env(safe-area-inset-bottom)); }
body.plate-page main.viewer { flex: 1; min-height: 0; }
@media (max-width: 56rem) { body.plate-page main.viewer { grid-template-rows: minmax(7rem, 1fr) auto; } }
@media (max-width: 56rem) and (max-height: 540px) {   /* e.g. an iPhone SE with toolbars showing */
  .plate-page .masthead .sub { display: none; }
  .plate-page .masthead { margin-bottom: .75rem; padding-bottom: .5rem; }
  .plate-page .backline { margin: -.5rem 0 .25rem; }
  .plate-page main.viewer { gap: .75rem; }
  .plate-page .info { min-height: 0; }
  .plate-page nav.pager { margin-top: .5rem; padding-top: .5rem; }
}
/* a page reached by swiping starts its drawing off-screen on the side it came from, then slides in */
html.in-next .frame img { transform: translateX(100vw); }
html.in-prev .frame img { transform: translateX(-100vw); }
@media (min-width: 56rem) {
  main.viewer { grid-template-columns: minmax(0, 1fr) 22rem; grid-template-rows: minmax(16rem, 1fr); }
}
.frame { margin: 0; min-height: 0; height: 100%; }
.frame a { display: block; height: 100%; }
.frame img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.frame { touch-action: pan-y; overflow: hidden; }   /* a sliding drawing stays inside its frame */   /* horizontal swipes on the drawing page between plates (script below) */
.frame img.swiping { transition: none; } .frame img { transition: transform .18s ease-out; }
/* the whole block sits at the foot, pager last: under the frame with a fixed-height info block on
   a phone, at the bottom of the side column (level with the frame's foot) on wide screens, so the
   pager never moves and a long reference grows upward */
.about { display: flex; flex-direction: column; justify-content: flex-end; }
.info { min-height: 6rem; }
@media (min-width: 56rem) { .info { min-height: 0; } .about { height: 100%; padding-right: 2rem; } }
nav.pager {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem;
  padding-top: 0.8rem; margin-top: 1rem; border-top: 1px solid rgba(47, 90, 140, 0.35);
  font-weight: 700;
}
nav.pager a { color: var(--ink); padding: .75rem 0; margin: -.75rem 0; }   /* 44px tap height, same layout */
nav.pager [rel=prev] { padding-right: 1.5rem; }
nav.pager [rel=next] { padding-left: 1.5rem; }
nav.pager [rel=next] { justify-self: end; }
.ref { max-width: var(--measure); }
.ref h1 { font: inherit; margin: 0; }
.ref cite { font-style: italic; display: block; }
.ref .date { display: block; }
.links { margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.4rem; font-weight: 500; }

footer { max-width: var(--measure); border-top: var(--rule) solid var(--ink); padding-top: 1rem; margin-top: 6rem; font-size: 0.9rem; color: #444; }
footer p { margin-bottom: 0.8em; }
footer.inline { margin-top: 1rem; align-self: start; }

/* container landing: one card per collection, a thumbnail drawing over its name */
a.collection { display: block; width: fit-content; max-width: 100%; color: var(--ink); }
a.collection img { max-height: 55vh; width: auto; margin-bottom: 1rem; }
a.collection .name { font-weight: 700; font-size: 1.25rem; }
a.collection .sub { display: block; font-weight: 500; }
a.collection:hover { text-decoration: none; }
a.collection:hover .name { text-decoration: underline; }