/* ==========================================================================
   Cinderside — site stylesheet
   Dark Cumbrian Gothic. Stone, glowering sky, iron and copper.

   Header art: .banner carries the artwork as a background-image, with a
   gradient scrim baked in front of it so the text stays legible over a busy
   sky. PLACEHOLDER art is the gradient alone; the real header drops in as
   an extra url() on .banner's background-image, nothing else changes.
   ========================================================================== */

:root {
  --ground:      #0e0d0c;   /* page */
  --ground-2:    #141211;   /* raised panels */
  --stone:       #1c1a18;   /* rules, edges */
  --text:        #c9c2b8;   /* body */
  --text-dim:    #8f877c;   /* secondary */
  --text-bright: #e8e0d4;   /* headings over art */
  --copper:      #c08a4e;   /* headings, links */
  --copper-dim:  #8d6537;   /* link underlines, rules */
  --ember:       #d4693a;   /* the one warm accent, used sparingly */

  --measure: 68rem;         /* max content width */
  --gap: 1.5rem;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;

  /* scrim over the header art — tune once, applies everywhere */
  --scrim: linear-gradient(180deg, rgba(14,13,12,.25) 0%, rgba(14,13,12,.15) 35%,
                           rgba(14,13,12,.72) 78%, var(--ground) 100%);
  /* stand-in artwork until the illustrated headers exist */
  --art-placeholder: radial-gradient(120% 90% at 70% 15%, rgba(212,105,58,.16), transparent 55%),
                     linear-gradient(180deg, #2a2523 0%, #1b1816 60%, #121010 100%);
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 17px/1.65 var(--serif);
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; display: block; }

a { color: var(--copper); text-decoration: none; border-bottom: 1px solid var(--copper-dim); }
a:hover { color: var(--text-bright); border-bottom-color: var(--copper); }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1.25rem; }

/* --------------------------------------------------------------- banner  */
/* Everything — title, tagline, about link and the nav — sits OVER the art. */

/* Header art arrives as inline custom properties set by the generator:
   --art (large, ~2400px) and --art-sm (~1280px, used on narrow screens). */
.banner {
  display: flex;
  align-items: flex-end;
  min-height: clamp(280px, 30vw, 400px);
  background-image: var(--scrim), var(--art, none), var(--art-placeholder);
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}
@media (max-width: 800px) {
  .banner { background-image: var(--scrim), var(--art-sm, var(--art, none)), var(--art-placeholder); }
}
.banner--home { min-height: clamp(360px, 46vw, 560px); }

.banner__inner { width: 100%; padding-bottom: 1rem; }

.banner__title {
  margin: 0;
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  font-weight: normal;
  letter-spacing: .06em;
  color: var(--text-bright);
  text-shadow: 0 2px 16px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.8);
}
.banner__tagline {
  margin: .15rem 0 0;
  font-size: clamp(.95rem, 1.7vw, 1.15rem);
  font-style: italic;
  color: var(--copper);
  text-shadow: 0 2px 12px rgba(0,0,0,.95);
}
.banner__about {
  display: inline-block; margin: .55rem 0 0;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim); border: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,.95);
}
.banner__about:hover { color: var(--copper); }

/* nav, inside the banner */
.nav ul {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  margin: 1rem 0 0; padding: 0; list-style: none;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
}
.nav a {
  color: var(--text-dim); border: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,.95);
}
.nav a:hover, .nav a[aria-current] { color: var(--copper); }

/* ------------------------------------------------------------------ sets  */

main { padding: 2.5rem 0 1rem; }

.intro { max-width: 46rem; }
.intro p:first-child { margin-top: 0; }

.set { margin: 0 0 3.25rem; }

/* Capped so the on-page size stays close to the ~500px display derivative,
   and so the lightbox is always LARGER than the page image, never smaller. */
.set__images {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 54rem;
}
.set__images a { border: 0; display: block; }
.set__images img {
  /* width:auto + max-width:100% means an image is never UPSCALED past its own
     pixels, so the page version can't end up bigger than the lightbox. */
  width: auto; max-width: 100%; height: auto;
  background: var(--ground-2);
  border: 1px solid var(--stone);
  transition: border-color .15s ease;
}
.set__images a:hover img { border-color: var(--copper-dim); }

.set__meta {
  display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: baseline;
  margin-top: .7rem; font-size: .85rem; color: var(--text-dim);
}
.set__no { letter-spacing: .12em; text-transform: uppercase; }
.set__caption { color: var(--text); font-style: italic; }

.set-nav { display: flex; flex-wrap: wrap; gap: .75rem 2rem; font-size: .9rem; }
.empty { color: var(--text-dim); font-style: italic; }

/* ------------------------------------------------------- place / set grid */

.places {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  padding: 0; margin: 2rem 0 0; list-style: none;
}
.place-card { border: 1px solid var(--stone); background: var(--ground-2); }
.place-card a { border: 0; display: block; }
.place-card__art {
  height: 130px;
  background-image: var(--art, none), var(--art-placeholder);
  background-size: cover; background-position: center 45%;
}
.place-card__body { padding: .85rem 1rem 1.1rem; }
.place-card__name { margin: 0; font-size: 1.15rem; font-weight: normal; color: var(--copper); }
.place-card__tag { margin: .1rem 0 0; font-size: .9rem; font-style: italic; color: var(--text-dim); }
.place-card__count { margin: .55rem 0 0; font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-dim); }

.thumbs {
  display: grid; gap: .9rem;
  /* Thumbnails are exactly 130px wide; the height is whatever the picture's own aspect ratio
     gives. Image sizes vary, so nothing here may assume a shape. */
  grid-template-columns: repeat(auto-fill, 130px);
  align-items: start;
  padding: 0; margin: 1.5rem 0 0; list-style: none;
}
.thumbs a { border: 0; display: block; }
/* height:auto overrides the width/height attributes, which are there only to reserve space;
   without it the image is stretched to the attribute height. */
.thumbs img { width: 130px; height: auto; border: 1px solid var(--stone); }
.thumbs a:hover img { border-color: var(--copper-dim); }

/* ------------------------------------------------------------------- lore */

.lore {
  margin: 3.5rem 0 0; padding: 2rem 0 0;
  border-top: 1px solid var(--stone);
  max-width: 46rem;
}
.lore h2 {
  margin: 0 0 .6rem; font-weight: normal; font-size: 1.35rem;
  letter-spacing: .05em; color: var(--copper);
}
.lore p { color: var(--text-dim); }

.rule {
  margin: 3rem 0 1.25rem; padding-top: 1.5rem;
  border-top: 1px solid var(--stone);
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim); font-weight: normal;
}

/* ----------------------------------------------------------------- footer */

.foot {
  margin-top: 4rem;
  border-top: 1px solid var(--stone);
  background: linear-gradient(180deg, var(--ground) 0%, #121010 100%);
}
.foot__inner {
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between;
  padding: 1.6rem 0 2.2rem; font-size: .85rem; color: var(--text-dim);
}
.foot__disclosure { max-width: 34rem; margin: 0; }
.foot__links { display: flex; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }

/* --------------------------------------------------------------- lightbox */
/* Pure CSS (:target) — no JavaScript. Clicking the image OR the backdrop
   closes it, as well as the Close link. The image is shown as large as the
   window allows and is always bigger than the page version.                */

.lb { display: none; }
.lb:target { display: block; position: fixed; inset: 0; z-index: 10;
  background: rgba(8,7,7,.97); overflow: auto; }

.lb__dismiss {            /* backdrop: click anywhere to close */
  position: absolute; inset: 0; z-index: 0; border: 0; display: block;
}
.lb__inner {
  position: relative; z-index: 1;
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem; padding: 1.25rem;
  pointer-events: none;   /* so gaps fall through to the backdrop */
}
.lb__img { pointer-events: auto; border: 0; display: block; }
.lb__img img {
  /* As large as the window allows, never distorted: both dimensions auto, capped by
     the window. The web derivative (1600px long edge) is taller than almost any window,
     so on a desktop it still fills the height and stays larger than the page version;
     on a phone the width cap wins and the height follows in proportion. */
  width: auto; height: auto;
  max-width: min(100%, 1400px);
  max-height: 94vh;
}
.lb__close {
  pointer-events: auto;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
}