/* The Art of Eldritch (art/index.html only). Loaded after site.css.
   Part one is the strongbox frame: a flat iron frame with a vellum hairline, a vellum mat ruled
   in iron, and a crooked forged nail. Depth comes from a soft shadow, never from shine.
   Part two lays the frames out by subject on the black sheet, the vellum sheet, and the table. */

.plate { --frame:14px; --mat:7%; position:relative; margin:0; min-width:0; }
.plate .box {
  position:relative; display:block; padding:var(--frame); border-radius:3px; color:inherit; text-decoration:none;
  background:#211d19;
  box-shadow:inset 0 0 0 1px rgb(0 0 0 / .6), 0 0 0 1px #000, 0 14px 26px rgb(0 0 0 / .45), 0 30px 50px rgb(0 0 0 / .2);
}
/* the inner vellum hairline */
.plate .box::before {
  content:""; position:absolute; inset:calc(var(--frame) / 2); z-index:1; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgb(201 188 158 / .4);
}
/* the vellum mat, ruled in iron */
.plate .card {
  position:relative; z-index:2; display:block; padding:var(--mat);
  background:var(--b-hi);
  box-shadow:inset 0 0 0 1px rgb(59 54 49 / .55), 0 0 0 1px rgb(0 0 0 / .6);
}
.plate .card img { width:100%; height:auto; }
/* Ink drawings are printed straight onto the mat: their white paper drops away. */
.plate.ink .card img { mix-blend-mode:multiply; }
/* Maps, paintings, and photographs keep their own paper, set into the mat with an ink line. */
.plate.map { --mat:12px; }
.plate.map .card img { box-shadow:0 0 0 1px rgb(18 16 14 / .6); }

/* A crooked forged nail, as if the frame hangs from it */
.plate.nail::before {
  content:""; position:absolute; z-index:4; left:calc(50% - 15px); top:-16px; width:30px; height:30px; pointer-events:none;
  background:url(../img/tex/nail-21.png) center / contain no-repeat; filter:drop-shadow(0 2px 2px rgb(0 0 0 / .4));
}
.plate.nail.n7::before { background-image:url(../img/tex/nail-7.png); left:calc(50% - 12px); }
.plate.nail.n33::before { background-image:url(../img/tex/nail-33.png); left:calc(50% - 17px); }

/* The museum label: the plain title, nothing more */
.plate figcaption { margin:.95rem 0 0; text-align:center; font:400 1.1rem/1.25 var(--sc); letter-spacing:.05em; }
.plate figcaption::before { content:""; display:block; width:2.2rem; height:4px; margin:0 auto .5rem; border-block:1px solid currentColor; opacity:.6; }

/* Links: lifted a little higher on hover, pressed on click. Shadow only, no glow. */
a.box { transition:transform .25s ease, box-shadow .25s ease; }
@media (hover:hover) {
  a.box:hover {
    transform:translateY(-3px);
    box-shadow:
      inset 0 0 0 1px rgb(0 0 0 / .6), 0 0 0 1px #000, 0 22px 34px rgb(0 0 0 / .5), 0 42px 62px rgb(0 0 0 / .22);
  }
}
a.box:active { transform:translateY(1px); }
a.box:focus-visible { outline:3px solid currentColor; outline-offset:5px; }
@media (prefers-reduced-motion:reduce) { a.box { transition:none; } a.box:hover, a.box:active { transform:none; } }
@media print { .plate .box { box-shadow:none; } .plate.nail::before { display:none; } }

/* Labels on the table */
.table .plate figcaption { color:var(--b); text-shadow:0 1px 6px rgb(0 0 0 / .9); }

.art-page .mast h1 { font-size:15.2cqw; padding-bottom:.12em; }
.art-intro { max-width:46rem; margin:0 0 1rem; font-size:clamp(1.15rem, 2cqw, 1.4rem); line-height:1.35; }

/* The jump list: one plain row of section names between two rules */
.jump { display:flex; flex-wrap:wrap; gap:0 1.6rem; margin:0 0 1.75rem; padding:.3rem 0 .25rem; border-top:4px double var(--b-lo); border-bottom:1px solid var(--b-lo); }
.jump a { display:inline-flex; align-items:center; min-height:44px; font:400 1.18rem/1.15 var(--sc); letter-spacing:.04em; text-decoration:none; color:var(--b); }
@media (hover:hover) { .jump a:hover { color:var(--r-lit); } }
.jump a:focus-visible { outline:3px solid var(--b); outline-offset:3px; }
@media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }

/* Each section: a plain heading and one sentence */
.gallery { padding:.75rem var(--pad) 3.25rem; scroll-margin-top:.5rem; }
.gallery.table { padding-top:.25rem; padding-bottom:2.25rem; }
.sec-head { max-width:52rem; margin:0 0 2.4rem; }
.sec-head h2 { font:700 clamp(2.5rem, 6cqw, 4.6rem)/1.05 var(--black); margin:0 0 .55rem; padding-bottom:.3rem; border-bottom:4px double var(--rule); }
.sec-head p { margin:0; font-size:1.25rem; line-height:1.38; }
.table .sec-head { color:var(--b); }
.table .sec-head h2 { text-shadow:0 2px 10px rgb(0 0 0 / .85); border-bottom-color:rgb(201 188 158 / .7); }
.table .sec-head p { text-shadow:0 1px 8px rgb(0 0 0 / .95); }
.sheet.gallery:not(.bone) .plate figcaption { color:var(--b); }
.bone .plate figcaption { color:var(--ink); }

/* A small label for each group within a section, such as each great house among the high houses */
.sub-h { margin:2.75rem 0 1.6rem; padding:0 0 .45rem; border-bottom:1px solid var(--rule); font:400 1.3rem/1.2 var(--sc); letter-spacing:.05em; }
.sec-head + .sub-h { margin-top:0; }
.table .sub-h { color:var(--b); text-shadow:0 1px 6px rgb(0 0 0 / .9); border-bottom-color:rgb(201 188 158 / .6); }
.sub-h + .smalls { margin-top:0; padding-top:0; border-top:0; }

/* Every frame hangs from its nail, so each one leaves room above for it */
.gallery .plate { padding-top:16px; }
.gallery .plate.nail::before { top:0; }
.gallery .plate figcaption { font-size:.95rem; }
.plate.arms .card img { filter:drop-shadow(0 3px 3px rgb(60 40 15 / .35)); }

/* The hero pieces: two great maps side by side, or one large piece with two beside it */
.heroes { display:grid; gap:2.75rem clamp(1.75rem, 3.6cqw, 3.25rem); align-items:center; margin:0 0 3.25rem; }
.heroes.two { grid-template-columns:repeat(2, minmax(0,1fr)); }
.heroes.one { grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.heroes .side { display:grid; gap:2.75rem; }
.heroes .plate.map { --mat:14px; }
.heroes figcaption { font-size:1.05rem; }

/* Under each title, one plain line of context in the body face */
.plate figcaption .ttl { display:block; }
.plate figcaption .ctx { display:block; max-width:34rem; margin:.4rem auto 0; font:400 .95rem/1.38 var(--serif); letter-spacing:0; }
.heroes .plate figcaption .ctx { font-size:.95rem; }

/* Three great maps side by side */
.heroes.three { grid-template-columns:repeat(3, minmax(0,1fr)); align-items:start; }

/* Mixed shapes hang in columns, like a crowded gallery wall */
.hangs { columns:4 13rem; column-gap:clamp(1.25rem, 2.6cqw, 2.4rem); }
.hangs > .plate { break-inside:avoid; margin:0 0 2.5rem; }
.g-maps .hangs, .g-scenes .hangs { columns:3 15rem; }
.g-saints .hangs { columns:4 11rem; }

/* Long pieces (strip maps, schematics, card sheets) sit two to a row */
.wides { --wgap:clamp(1.25rem, 2.6cqw, 2.4rem); display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2.5rem var(--wgap); align-items:center; margin-top:.5rem; }
.wides .plate.map { --mat:10px; }

/* Arms, sigils, and map pieces of one shape line up in even rows; a short last row is centered */
.g-banners .hangs, .g-shields .hangs, .g-sigils .hangs, .g-tokens .hangs, .g-flags .hangs, .smalls {
  --n:6; --gap:clamp(1rem, 2.2cqw, 2rem); columns:auto; display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:2.25rem var(--gap);
}
:is(.g-banners, .g-shields, .g-sigils, .g-tokens, .g-flags) .hangs > .plate, .smalls > .plate { flex:0 0 calc((100% - (var(--n) - 1) * var(--gap)) / var(--n)); margin:0; }
.g-banners .hangs { --n:5; }
.g-banners .hangs .card { aspect-ratio:3 / 5; }
.smalls { --n:6; margin-top:3rem; padding-top:2rem; border-top:1px solid var(--rule); }
.smalls .card { aspect-ratio:2 / 3; }
.g-shields .hangs { --n:6; }
.g-shields .hangs .card { aspect-ratio:4 / 5; }
.g-sigils .hangs { --n:5; }
.g-sigils .hangs .card, .g-tokens .hangs .card { aspect-ratio:1; }
.g-tokens .hangs { --n:6; }
#pieces .hangs { --n:5; }
.g-flags .hangs { --n:4; }
.g-sigils .wides { margin-top:2.5rem; }
/* a single long piece, or the odd one at the end, is centered under the others */
.wides > .plate:last-child:nth-child(odd) { grid-column:1 / -1; justify-self:center; width:calc(50% - var(--wgap) / 2); }
:is(.g-banners, .g-shields, .g-sigils, .g-tokens) .hangs .card img, .smalls .card img { width:100%; height:100%; object-fit:contain; }

/* Smaller frames for the small pieces: a lighter frame and a smaller nail */
:is(.g-shields, .g-tokens, .g-sigils) .hangs .plate, .smalls .plate { --frame:9px; --mat:9%; }
:is(.g-shields, .g-tokens, .g-sigils) .hangs .plate.nail::before, .smalls .plate.nail::before { width:24px; height:24px; left:calc(50% - 12px); top:3px; }
:is(.g-shields, .g-tokens) .plate figcaption, .smalls .plate figcaption { font-size:.95rem; letter-spacing:.04em; margin-top:.7rem; }

@container broad (max-width:900px) {
  .heroes.one { grid-template-columns:minmax(0,1fr); }
  .heroes.one > .plate { justify-self:center; width:min(100%, 36rem); }
  .heroes .side { grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.75rem; align-items:center; }
  .hangs { columns:3 11rem; }
  .g-flags .hangs { --n:3; }
  .smalls { --n:4; }
  .g-shields .hangs, .g-sigils .hangs, #pieces .hangs { --n:5; }
  .g-tokens .hangs { --n:4; }
  #pieces .hangs { --n:4; }
  .heroes.three { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .heroes.three > .plate:last-child { grid-column:1 / -1; justify-self:center; width:calc(50% - 1rem); }
}
@container broad (max-width:640px) {
  .art-page .mast h1 { white-space:normal; font-size:25cqw; line-height:.84; }
  .jump { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 1rem; }
  .jump a { font-size:1.05rem; line-height:1.1; padding:.2rem 0; }
  .sec-head { margin-bottom:1.9rem; }
  .sec-head p { font-size:1.1rem; }
  .heroes { gap:2rem; margin-bottom:2.25rem; }
  .heroes.two { grid-template-columns:minmax(0,1fr); }
  .heroes .side { gap:1rem; }
  .gallery .plate { --frame:9px; }
  .gallery .plate.nail::before { width:24px; height:24px; left:calc(50% - 12px); top:3px; }
  .gallery .plate figcaption { font-size:.95rem; letter-spacing:.03em; margin-top:.65rem; }
  .hangs, .g-maps .hangs, .g-scenes .hangs, .g-saints .hangs { columns:2 8rem; column-gap:1rem; }
  .hangs > .plate { margin-bottom:1.6rem; }
  .wides { grid-template-columns:minmax(0,1fr); gap:1.75rem; }
  .g-banners .hangs, .g-shields .hangs, .g-sigils .hangs { --n:3; }
  .g-tokens .hangs, #pieces .hangs, .smalls { --n:2; }
  .heroes.three { grid-template-columns:minmax(0,1fr); }
  .heroes.three > .plate:last-child { width:auto; justify-self:stretch; }
  .plate figcaption .ctx { font-size:.88rem; }
  .g-flags .hangs { --n:2; }
  .wides > .plate:last-child:nth-child(odd) { width:auto; justify-self:stretch; }
  :is(.g-banners, .g-shields, .g-sigils, .g-tokens, .g-flags) .hangs, .smalls { --gap:.9rem; row-gap:1.5rem; }
  :is(.g-shields, .g-tokens, .g-sigils) .hangs .plate, .smalls .plate { --frame:7px; }
}