/* ==========================================================
   Ornament
   ========================================================== */

/* ----------------------------------------------------------
   TREATMENT
   Printed, not pasted. A warm paper tone bleeds into the
   edges so the image sits in the page rather than on it.
   ---------------------------------------------------------- */
.printed{position:relative;display:block}
.printed img{
  display:block;
  width:100%;
  height:auto;
  filter:saturate(1.06) contrast(1.06) brightness(1.02) hue-rotate(-4deg);
}
.printed::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(110% 110% at 50% 45%,
    transparent 52%, rgba(120,92,58,.14) 82%, rgba(96,70,42,.26) 100%);
  mix-blend-mode:multiply;
}

/* An engraver's vignette: no edge at all, the image simply stops. */
.vignette img{
  -webkit-mask-image:radial-gradient(72% 78% at 50% 48%, #000 46%, transparent 96%);
  mask-image:radial-gradient(72% 78% at 50% 48%, #000 46%, transparent 96%);
}
.vignette::after{display:none}

/* ----------------------------------------------------------
   1. HISTORIATED INITIAL
   The first letter of a passage, carrying an image behind it.
   ---------------------------------------------------------- */
.initial{
  float:left;
  width:clamp(78px,9vw,116px);
  aspect-ratio:1;
  margin:6px 18px 6px 0;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(96,68,38,.4);
  background:var(--paper-deep,#ebe1d0);
  box-shadow:0 1px 0 rgba(255,250,240,.7) inset;
}
.initial img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(1.05) contrast(1.04) brightness(.92);
}
.initial span{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font:400 clamp(3.2rem,5.4vw,4.6rem)/1 var(--serif);
  color:#fdf6e8;
  text-shadow:0 2px 5px rgba(40,24,12,.75), 0 0 22px rgba(30,18,10,.5);
  z-index:2;
}
/* the rule that runs down beside an initial, as in a printed page */
.initial::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:3px;
  background:var(--terracotta,#a8492e);
  z-index:3;
}

/* ----------------------------------------------------------
   2. MARGINAL FIGURE
   Hangs in the white space beside a paragraph. Never large.
   ---------------------------------------------------------- */
.marginal{
  float:right;
  width:clamp(110px,15vw,190px);
  margin:4px 0 16px 26px;
  font:400 .66rem/1.4 var(--sans);
  color:var(--muted,#655f56);
}
.marginal.left{float:left;margin:4px 26px 16px 0}
.marginal figcaption{
  margin-top:7px;
  padding-top:6px;
  border-top:1px solid rgba(96,68,38,.28);
  font-style:italic;
}
@media (max-width:620px){
  .marginal,.marginal.left{float:none;width:min(240px,70%);margin:20px auto}
}

/* ----------------------------------------------------------
   3. INSET PLATE
   Set into the column with the text running around it. The
   silhouette, not the box, defines the wrap.
   ---------------------------------------------------------- */
.inset{
  float:left;
  width:clamp(150px,22vw,270px);
  margin:8px 26px 14px 0;
  shape-outside:ellipse(50% 50%);
  shape-margin:14px;
}
.inset.right{float:right;margin:8px 0 14px 26px}
.inset figcaption{
  margin-top:8px;
  font:400 .66rem/1.4 var(--sans);
  color:var(--muted,#655f56);
  font-style:italic;
}
@media (max-width:620px){
  .inset,.inset.right{float:none;width:100%;margin:20px 0;shape-outside:none}
}

/* ----------------------------------------------------------
   4. TAILPIECE
   A small engraving centred where a section ends, the way a
   printer closed a chapter. Vignetted, so it fades to nothing.
   ---------------------------------------------------------- */
.tailpiece{
  width:clamp(110px,14vw,190px);
  margin:38px auto 8px;
  text-align:center;
}
.tailpiece figcaption{
  margin-top:8px;
  font:400 .64rem/1.4 var(--sans);
  color:var(--muted,#655f56);
  font-style:italic;
}

/* ----------------------------------------------------------
   5. FLEURON RULE
   A divider with a printer's ornament at its centre.
   ---------------------------------------------------------- */
.fleuron{
  display:flex;
  align-items:center;
  gap:18px;
  margin:44px 0;
  color:var(--terracotta,#a8492e);
}
.fleuron::before,.fleuron::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(127,52,35,.42),transparent);
}
.fleuron svg{width:34px;height:18px;fill:currentColor;flex:none}
.fleuron.tight{margin:26px 0}

/* ----------------------------------------------------------
   6. CARTOUCHE
   A single image inside a ruled border with corner marks, as
   a title-page vignette is framed.
   ---------------------------------------------------------- */
.cartouche{
  position:relative;
  margin:30px auto;
  padding:13px;
  max-width:min(560px,100%);
  border:1px solid rgba(96,68,38,.45);
  background:var(--paper-light,#fbf8f1);
}
.cartouche::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(96,68,38,.22);
  pointer-events:none;
}
.cartouche i{                       /* the four corner marks */
  position:absolute;
  width:9px;height:9px;
  border:1px solid var(--terracotta,#a8492e);
  background:var(--paper-light,#fbf8f1);
  transform:rotate(45deg);
}
.cartouche i:nth-of-type(1){top:-5px;left:-5px}
.cartouche i:nth-of-type(2){top:-5px;right:-5px}
.cartouche i:nth-of-type(3){bottom:-5px;left:-5px}
.cartouche i:nth-of-type(4){bottom:-5px;right:-5px}
.cartouche figcaption{
  margin-top:11px;
  text-align:center;
  font:400 .68rem/1.45 var(--sans);
  color:var(--muted,#655f56);
  font-style:italic;
}

/* ----------------------------------------------------------
   7. THE CABINET
   A drawer of specimens: small plates in hairline compartments,
   each numbered. A cabinet of curiosities, not a photo grid.
   ---------------------------------------------------------- */
.cabinet{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:1px;
  background:rgba(96,68,38,.3);
  border:1px solid rgba(96,68,38,.42);
  counter-reset:curio;
  margin:0;
}
.cabinet figure{
  counter-increment:curio;
  position:relative;
  margin:0;
  padding:13px 11px 30px;
  background:var(--paper-light,#fbf8f1);
  transition:background .35s ease;
}
.cabinet figure:hover{background:#fffdf7}
.cabinet img{
  display:block;
  width:100%;
  aspect-ratio:1;
  object-fit:contain;
  filter:saturate(1.05) contrast(1.05);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.cabinet figure:hover img{transform:scale(1.06)}
.cabinet figcaption{
  position:absolute;
  inset:auto 10px 8px 10px;
  font:400 .62rem/1.3 var(--sans);
  color:var(--muted,#655f56);
  text-align:center;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.cabinet figure::before{
  content:counter(curio,upper-roman) ".";
  position:absolute;
  top:7px;left:9px;
  font:600 .56rem/1 var(--sans);
  letter-spacing:.08em;
  color:var(--terracotta,#a8492e);
}

/* ----------------------------------------------------------
   8. INCIPIT
   An opening line set as a printed book sets one: small caps,
   letterspaced, with a rule beneath.
   ---------------------------------------------------------- */
.incipit{
  font:400 .82rem/1.5 var(--sans);
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--terracotta-dark,#7f3423);
  padding-bottom:9px;
  margin:0 0 22px;
  border-bottom:1px solid rgba(127,52,35,.3);
}

/* ----------------------------------------------------------
   MOTION & ACCESS
   ---------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .cabinet img{transition:none}
}
html.a11y-motion .cabinet img{transition:none !important;transform:none !important}
html.a11y-contrast .printed::after,
html.a11y-contrast .initial::after{display:none}
html.a11y-contrast .vignette img{-webkit-mask-image:none;mask-image:none}
html.a11y-contrast .initial span{color:#000;text-shadow:none;background:rgba(255,255,255,.8)}