:root {
  /* Large desktop (default >1440px) */
  --fs-bg-color: #ffffff;
  --fs-text-color: #0a2e09;
  --fs-overprint-color: #C4C4C4;
  --fs-small: 18px;
  --fs-large: 30px;

  --lh-factor: 1.25;
  --smallcaps-scale: 1.1666666667;
  --italic-scale: 1;
  --padding-base: 2.8rem 3.2rem;
  --caption-row-h: calc(var(--fs-small) * var(--lh-factor)); /* one-line height for caption rows */

  color-scheme: light dark; /* lets the browser style form controls correctly */
}

@media (prefers-color-scheme: dark) {
  :root {
    --fs-bg-color: #000000;
    --fs-text-color: #ffffff;
  }
}


/* 1025–1440px (laptops) */
@media (min-width: 1025px) and (max-width: 1440px) {
  :root {
    --fs-small: 16px;
    --fs-large: 24px;
    --padding-base: 2.6rem 3rem;
  }
}

/* 769–1024px (tablets) */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --fs-small: 16px;
    --fs-large: 26px;
    --padding-base: 2.4rem 2.8rem;
  }
}

/* 481–768px (big phones / small tablets) */
@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --fs-small: 13px;
    --fs-large: 24px;
    --padding-base: .85rem .5rem;
  }
}

/* 0–480px (phones) */
@media (max-width: 480px) {
  :root {
    --fs-small: 13px;
    --fs-large: 18px;
    --padding-base: 1.2rem 1.4rem;
  }
  #footer-wrapper .inner,
  #footer-wrapper .inner .credits-container { 
    display: flex;
    gap: 0.4em;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  #footer-wrapper .inner .caption-row span,
  #footer-wrapper .inner .credit-row span { display: block; }
}

@font-face {
  font-family: 'Stempel Garamond CE';
  src:
    url('../fonts/StempelGaramond-CERoman.woff2') format('woff2'),
    url('../fonts/StempelGaramond-CERoman.woff') format('woff'),
    url('../fonts/StempelGaramond-CERoman.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Stempel Garamond CE';
  src:
    url('../fonts/StempelGaramond-CEItalic.woff2') format('woff2'),
    url('../fonts/StempelGaramond-CEItalic.woff') format('woff'),
    url('../fonts/StempelGaramond-CEItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Small-caps + oldstyle figures cut, renamed to avoid '&' issues */
@font-face {
  font-family: 'Stempel Garamond SCOSF';
  src:
    url('../fonts/StempelGaramond-RomanSmallcapsOldstyleFigures.woff2') format('woff2'),
    url('../fonts/StempelGaramond-RomanSmallcapsOldstyleFigures.woff') format('woff'),
    url('../fonts/StempelGaramond-RomanSmallcapsOldstyleFigures.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/*************************************************************/
/*                           Reset                           */
/*************************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

a{ 
  text-decoration: none; 
  color: var(--fs-text-color);
}

html, body {
  background: var(--fs-bg-color);
  color: var(--fs-text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/***** Generic *****/

.upper{ text-transform: uppercase; }
.caps{ text-transform: capitalize; }
a{ border-bottom: solid 1px var(--fs-text-color); padding-bottom: 0.1em; }

.hidden{ display: none !important; }
.box{ box-sizing: border-box; }
.button{ cursor: pointer; }

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
i { font-style: italic; }

/*************************************************************/
/*                           Spacing                         */
/*************************************************************/

.small-caps {
  font-family: 'Stempel Garamond SCOSF','Stempel Garamond CE', serif;
  text-transform: lowercase;
  font-size: calc(var(--fs-small) * var(--smallcaps-scale));
  line-height: calc(var(--fs-small) * var(--lh-factor));
  letter-spacing: .04em;
}

/*************************************************************/
/*                             New                           */
/*************************************************************/

#masthead-wrapper{
  width: 100vw;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  z-index: 9999;
}

#masthead-wrapper .inner{
  position: absolute;
  z-index: 2;
  padding: var(--padding-base);
  box-sizing: border-box;
}

/* Masthead typography */
#masthead-wrapper .inner {
  font-family: 'Stempel Garamond CE', serif;
  font-size: var(--fs-large);
  line-height: calc(var(--fs-large) * var(--lh-factor));
}

#masthead-wrapper .inner .small-caps {
  font-family: 'Stempel Garamond SCOSF','Stempel Garamond CE', serif;
  text-transform: lowercase;
  font-size: calc(var(--fs-large) * var(--smallcaps-scale));
  line-height: calc(var(--fs-large) * var(--lh-factor));
  letter-spacing: .06em;
}

#masthead-wrapper .inner .italics {
  font-family: 'Stempel Garamond CE', serif; /* same family, italic style selects italic face */
  font-style: italic;
  font-size: calc(var(--fs-large) * var(--italic-scale));
  line-height: calc(var(--fs-large) * var(--lh-factor));
}

#footer-wrapper{
  font-family: 'Stempel Garamond CE', serif;
  font-size: 1.2rem;
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 9999;
}

#footer-wrapper .inner{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: var(--padding-base);
  box-sizing: border-box;
  /* background-color: lime; */
}

#footer-wrapper .caption-row {
  color: var(--fs-text-color);
  transition: color 200ms ease;
  line-height: calc(var(--fs-small) * var(--lh-factor));
}        

#footer-wrapper:hover .caption-row,
#footer-wrapper:focus-within .caption-row{
  color: var(--fs-overprint-color);
}

/* --- Captions reveal: match credits timing & style --- */
#footer-wrapper #dynamic-caption .captions {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}

/* Container holding only rows AFTER the first */
#footer-wrapper #dynamic-caption .captions-extra {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 320ms ease,
    opacity 220ms ease;         /* identical to credits */
  will-change: max-height, opacity;
}

/* Reveal extra lines on hover/focus — same as credits */
#footer-wrapper:hover #dynamic-caption .captions-extra,
#footer-wrapper:focus-within #dynamic-caption .captions-extra {
  max-height: 240px;            /* mirror credits’ value */
  opacity: 1;
}
/* --- END captions reveal --- */

#footer-wrapper .credits-container {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 320ms ease,
    opacity 220ms ease;
  will-change: max-height, transform;
  line-height: calc(var(--fs-small) * var(--lh-factor));
}

#footer-wrapper:hover .credits-container,
#footer-wrapper:focus-within .credits-container{
  max-height: 240px;             /* set higher than your tallest credits */
  opacity: 1;
}

#footer-wrapper .credits-container{
  line-height: calc(var(--fs-small) * var(--lh-factor));
}
#footer-wrapper .credits-container .credit-row{
        line-height: calc(var(--fs-small) * var(--lh-factor));
}

/* Footer typography */
#footer-wrapper .inner .default {
  font-family: 'Stempel Garamond CE', serif;
  font-size: var(--fs-small);
  line-height: calc(var(--fs-small) * var(--lh-factor));
}

#footer-wrapper .inner .small-caps {
  font-family: 'Stempel Garamond SCOSF','Stempel Garamond CE', serif;
  text-transform: lowercase;
  font-size: calc(var(--fs-small) * var(--smallcaps-scale));
  line-height: calc(var(--fs-small) * var(--lh-factor));
  letter-spacing: .04em;
}

#footer-wrapper .inner .italics {
  font-family: 'Stempel Garamond CE', serif;
  font-style: italic;
  font-size: calc(var(--fs-small) * var(--italic-scale));
  line-height: calc(var(--fs-small) * var(--lh-factor));
}

#image-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

#overprint-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

#grid-canvas {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.caption-row .small-caps{ margin-right: 0.25em;}
.credit-row .small-caps{ margin-right: 0.25em;}