/* ==========================================================
   Imagery
   A small set of image components, used consistently.
   Every photograph either fades into the paper or sits behind
   a hairline; nothing floats in a drop-shadowed box.
   ========================================================== */

:root{
  --img-wash: 168,73,46;      /* terracotta, for the duotone multiply */
  --img-fade: 251,248,241;    /* paper-light, what images fade into   */
}

/* ----------------------------------------------------------
   1. TREATMENT
   One filter across the whole site so photographs from
   different sources read as one collection.
   ---------------------------------------------------------- */

.img-treat{
  /* Warm, not washed. Saturation goes UP, not down; the warmth comes from a
     slight hue rotation towards amber rather than from sepia, which greys. */
  filter:saturate(1.12) contrast(1.05) brightness(1.02) hue-rotate(-4deg);
  transition:filter .5s ease, transform .7s ease;
}
.img-treat:hover{filter:saturate(1.2) contrast(1.06) brightness(1.04) hue-rotate(-4deg)}

/* The unifying warmth is an overlay, not a filter — it sits on top at low
   opacity in soft-light, so shadows warm and highlights stay clean. */
.warm{position:relative}
.warm::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(145deg,
    rgba(214,138,72,.20),
    rgba(168,73,46,.10) 55%,
    rgba(120,60,40,.16));
  mix-blend-mode:soft-light;
}

/* Stronger, for images used as background rather than content. */
.img-quiet{filter:saturate(1.05) contrast(1.02) brightness(1.03) hue-rotate(-4deg)}

/* ----------------------------------------------------------
   2. PLATE BAND
   A full-bleed photograph that dissolves into the page at top
   and bottom. Use between sections to give the page breath.
   ---------------------------------------------------------- */

.plate-band{
  position:relative;
  margin:0;
  height:clamp(240px,38vw,460px);
  overflow:hidden;
  background:var(--paper-deep,#ebe1d0);
}
.plate-band img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
/* The fade. A mask is used rather than an overlay so the paper
   texture behind stays visible through the dissolve. */
.plate-band::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(var(--img-fade),1) 0%,
    rgba(var(--img-fade),.35) 16%,
    rgba(var(--img-fade),0) 42%,
    rgba(var(--img-fade),0) 62%,
    rgba(var(--img-fade),.5) 86%,
    rgba(var(--img-fade),1) 100%
  );
}
.plate-band.tall{height:clamp(320px,52vw,620px)}
.plate-band.short{height:clamp(160px,22vw,260px)}

/* Caption sitting inside the band, bottom left. */
.plate-band figcaption{
  position:absolute;
  left:0; right:0; bottom:18px;
  z-index:2;
  width:min(calc(100% - 64px),var(--max,1380px));
  margin-inline:auto;
  font:400 .74rem/1.5 var(--sans);
  color:#5b5348;
}
.plate-band figcaption b{color:var(--terracotta-dark,#7f3423);font-weight:600}

/* ----------------------------------------------------------
   3. PLATE WITH TEXT
   Image on one side, text on the other, image bleeding to the
   page edge. Alternate .flip down a page for rhythm.
   ---------------------------------------------------------- */

.image-spread{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:0;
  margin:0;
}
.image-spread .spread-media{position:relative;overflow:hidden;min-height:340px}
.image-spread .spread-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
/* Dissolve towards the text, so the two sides meet rather than butt. */
.image-spread .spread-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(var(--img-fade),0) 55%,
    rgba(var(--img-fade),.6) 82%,
    rgba(var(--img-fade),1) 100%);
}
.image-spread .spread-copy{padding:56px 8% 56px 52px}
.image-spread.flip .spread-media{order:2}
.image-spread.flip .spread-media::after{
  background:linear-gradient(270deg,
    rgba(var(--img-fade),0) 55%,
    rgba(var(--img-fade),.6) 82%,
    rgba(var(--img-fade),1) 100%);
}
.image-spread.flip .spread-copy{order:1;padding:56px 52px 56px 8%}

/* ----------------------------------------------------------
   4. FRAMED PLATE
   For a single image inside a text column: hairline, caption,
   slight inset. The scholarly default.
   ---------------------------------------------------------- */

.plate{
  margin:34px 0;
  padding:0;
}
.plate img{
  width:100%;
  height:auto;
  border:1px solid var(--line,rgba(75,55,38,.18));
  background:var(--white,#fffdf8);
}
.plate figcaption{
  margin-top:10px;
  font:400 .78rem/1.5 var(--sans);
  color:var(--muted,#655f56);
  max-width:56ch;
}
.plate figcaption b{color:var(--terracotta-dark,#7f3423);font-weight:600}
.plate.wide{margin-inline:-8%}
@media (max-width:900px){.plate.wide{margin-inline:0}}

/* ----------------------------------------------------------
   5. PAGE HEADER WITH IMAGE
   Interior banner carrying a photograph that fades out behind
   the text. Set --header-image inline on the section.
   ---------------------------------------------------------- */

.page-header.has-image{position:relative;overflow:hidden}
.page-header.has-image::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--header-image);
  background-size:cover;
  background-position:var(--header-pos,center 40%);
  filter:saturate(1.1) contrast(1.04) brightness(1.02) hue-rotate(-4deg);
  opacity:.9;
}
/* Text sits on paper; the photograph occupies the right and
   dissolves before it reaches the words. */
.page-header.has-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
      rgba(var(--img-fade),.97) 0%,
      rgba(var(--img-fade),.92) 30%,
      rgba(var(--img-fade),.55) 58%,
      rgba(var(--img-fade),.18) 82%,
      rgba(var(--img-fade),.06) 100%),
    linear-gradient(180deg,
      rgba(var(--img-fade),.5) 0%,
      rgba(var(--img-fade),0) 30%,
      rgba(var(--img-fade),0) 70%,
      rgba(var(--img-fade),.55) 100%);
}
.page-header.has-image .container{position:relative;z-index:2}
@media (max-width:760px){
  .page-header.has-image::after{
    background:linear-gradient(180deg,
      rgba(var(--img-fade),.86) 0%,
      rgba(var(--img-fade),.94) 45%,
      rgba(var(--img-fade),.98) 100%);
  }
}

/* ----------------------------------------------------------
   6. STRIP
   A row of small plates. Scrolls rather than wraps, so the
   rhythm survives on a phone.
   ---------------------------------------------------------- */

.plate-strip{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(220px,1fr);
  gap:2px;
  background:var(--line,rgba(75,55,38,.18));
  border-block:1px solid var(--line,rgba(75,55,38,.18));
  overflow-x:auto;
  scrollbar-width:thin;
}
.plate-strip figure{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--paper-deep,#ebe1d0)}
.plate-strip img{width:100%;height:100%;object-fit:cover}
.plate-strip figcaption{
  position:absolute;
  inset:auto 0 0 0;
  padding:34px 16px 14px;
  background:linear-gradient(180deg,rgba(40,28,20,0),rgba(40,28,20,.72));
  color:#f6efe4;
  font:400 .74rem/1.4 var(--sans);
}
.plate-strip figure:hover img{transform:scale(1.04)}

/* ----------------------------------------------------------
   7. THUMBNAIL IN A CARD
   For record rows and dataset cards that carry an image.
   ---------------------------------------------------------- */

.card-media{
  display:block;
  aspect-ratio:16/9;
  margin:0 0 16px;
  overflow:hidden;
  background:var(--paper-deep,#ebe1d0);
  border:1px solid var(--line,rgba(75,55,38,.18));
}
.card-media img{width:100%;height:100%;object-fit:cover}

/* ----------------------------------------------------------
   8. SLOW REVEAL
   A very small amount of movement. Off entirely for anyone who
   has asked for reduced motion, and for the accessibility panel.
   ---------------------------------------------------------- */

@media (prefers-reduced-motion:no-preference){
  .plate-band img,
  .image-spread .spread-media img{
    transform:scale(1.03);
    transition:transform 9s ease-out;
  }
  .plate-band:hover img,
  .image-spread:hover .spread-media img{transform:scale(1)}
}
html.a11y-motion .plate-band img,
html.a11y-motion .image-spread .spread-media img,
html.a11y-motion .plate-strip img{transform:none !important;transition:none !important}

/* High-contrast mode: strip the washes, they cost legibility. */
html.a11y-contrast .img-treat,
html.a11y-contrast .img-quiet,
html.a11y-contrast .page-header.has-image::before{filter:none !important}
html.a11y-contrast .page-header.has-image::before{opacity:.15}

/* ----------------------------------------------------------
   9. RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width:900px){
  .image-spread{grid-template-columns:minmax(0,1fr)}
  .image-spread .spread-media{min-height:240px;order:1}
  .image-spread .spread-media::after{
    background:linear-gradient(180deg,
      rgba(var(--img-fade),0) 60%,
      rgba(var(--img-fade),1) 100%) !important;
  }
  .image-spread .spread-copy,
  .image-spread.flip .spread-copy{order:2;padding:30px 0 44px}
}
@media (max-width:620px){
  .plate-band figcaption{width:calc(100% - 36px)}
  .plate-strip{grid-auto-columns:minmax(180px,1fr)}
}

@media print{
  .plate-band,.plate-strip{display:none}
}


/* ==========================================================
   MOSAIC — one large plate with two stacked beside it.
   The asymmetry is the point: equal boxes in a row read as a
   grid, unequal ones read as a composition.
   ========================================================== */

.plate-mosaic{
  display:grid;
  grid-template-columns:1.62fr 1fr;   /* golden-ish, not halves */
  grid-template-rows:1fr 1fr;
  gap:14px;
  margin:0;
}
.plate-mosaic figure{position:relative;margin:0;overflow:hidden;background:var(--paper-deep,#ebe1d0)}
.plate-mosaic figure:first-child{grid-row:1 / span 2}
.plate-mosaic img{width:100%;height:100%;object-fit:cover;display:block}
.plate-mosaic.flip figure:first-child{order:2}
.plate-mosaic.flip{grid-template-columns:1fr 1.62fr}
.plate-mosaic.flip figure:first-child{grid-column:2;grid-row:1 / span 2}

/* Caption rises on hover rather than sitting there permanently. */
.plate-mosaic figcaption{
  position:absolute;
  inset:auto 0 0 0;
  padding:40px 18px 16px;
  background:linear-gradient(180deg,rgba(43,29,20,0),rgba(43,29,20,.82));
  color:#f7f0e6;
  font:400 .76rem/1.45 var(--sans);
  transform:translateY(12px);
  opacity:0;
  transition:transform .35s ease, opacity .35s ease;
}
.plate-mosaic figure:hover figcaption,
.plate-mosaic figure:focus-within figcaption{transform:none;opacity:1}
.plate-mosaic figcaption b{color:#f0c9a8;font-weight:600}

@media (max-width:760px){
  .plate-mosaic,.plate-mosaic.flip{grid-template-columns:1fr;grid-template-rows:auto}
  .plate-mosaic figure:first-child,.plate-mosaic.flip figure:first-child{grid-row:auto;grid-column:auto;order:0}
  .plate-mosaic figure{aspect-ratio:16/10}
  .plate-mosaic figcaption{transform:none;opacity:1}
}

/* ==========================================================
   DETAIL + WHOLE
   A large detail crop with the complete object small beside it.
   This is how an art historian actually looks at something, and
   it makes one image do the work of two.
   ========================================================== */

.plate-detail{
  display:grid;
  grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);
  gap:26px;
  align-items:end;
  margin:0;
}
.plate-detail .detail-main{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--paper-deep,#ebe1d0)}
.plate-detail .detail-main img{width:100%;height:100%;object-fit:cover}
.plate-detail .detail-whole{margin:0}
.plate-detail .detail-whole img{
  width:100%;height:auto;
  border:1px solid var(--line,rgba(75,55,38,.18));
  background:var(--white,#fffdf8);
}
.plate-detail figcaption{
  margin-top:10px;
  font:400 .76rem/1.5 var(--sans);
  color:var(--muted,#655f56);
}
.plate-detail figcaption b{color:var(--terracotta-dark,#7f3423);font-weight:600}
@media (max-width:760px){
  .plate-detail{grid-template-columns:1fr;gap:18px}
  .plate-detail .detail-whole{max-width:260px}
}

/* ==========================================================
   OFFSET PAIR
   Two plates that overlap and sit off the baseline. Nothing
   lines up, which is what stops it reading as a grid.
   ========================================================== */

.plate-offset{position:relative;margin:0;padding-bottom:6%}
.plate-offset figure{margin:0;overflow:hidden;background:var(--paper-deep,#ebe1d0)}
.plate-offset .offset-a{width:64%;aspect-ratio:4/3}
.plate-offset .offset-b{
  position:absolute;
  right:0;
  bottom:0;
  width:44%;
  aspect-ratio:3/4;
  border:6px solid var(--paper-light,#fbf8f1);
}
.plate-offset img{width:100%;height:100%;object-fit:cover}
@media (max-width:620px){
  .plate-offset{padding-bottom:0}
  .plate-offset .offset-a{width:100%}
  .plate-offset .offset-b{position:static;width:70%;margin:-12% 0 0 auto;border-width:5px}
}

/* ==========================================================
   MARGINAL PLATE
   A small image hanging in the margin beside a text column,
   the way a plate sits in a printed book.
   ========================================================== */

.plate-margin{
  float:right;
  width:min(300px,38%);
  margin:6px 0 20px 34px;
}
.plate-margin img{width:100%;height:auto;border:1px solid var(--line,rgba(75,55,38,.18))}
.plate-margin figcaption{
  margin-top:8px;
  font:400 .74rem/1.45 var(--sans);
  color:var(--muted,#655f56);
}
.plate-margin.left{float:left;margin:6px 34px 20px 0}
@media (max-width:700px){
  .plate-margin,.plate-margin.left{float:none;width:100%;margin:22px 0}
}

/* ==========================================================
   FEATHERED EDGE
   Add .feather to any figure to dissolve its edges instead of
   cutting them. Works on mosaic tiles, details, anything.
   ========================================================== */

.feather img{
  -webkit-mask-image:radial-gradient(120% 120% at 50% 50%, #000 58%, transparent 100%);
  mask-image:radial-gradient(120% 120% at 50% 50%, #000 58%, transparent 100%);
}
.feather-b img{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 82%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 82%,transparent 100%);
}

html.a11y-contrast .warm::after{display:none}
html.a11y-contrast .feather img,
html.a11y-contrast .feather-b img{-webkit-mask-image:none;mask-image:none}