/* Website templates gallery.
   Lives on paper, not on the sky: this page has no scroll-linked sunrise, so
   it sets its own solid background rather than inheriting the transparent
   sections the home page relies on. Structure (wordmark, masthead, footer,
   .shell, .eyebrow, .btn) still comes from site.css.

   Type is deliberately NOT the parent site's. The marketing site is set in a
   serif; this page and the eight templates behind it are set in Plus Jakarta
   Sans over Inter, and carry more weight than the parent. That is the house
   style for the template product, and the cards should read the same way as
   the sites they open. */

.gallery-body {
  background: var(--paper);
  color: var(--graphite);
  font-family: "Inter", var(--body);
}

/* Local overrides of the shared tokens, scoped to this page only so the rest of
   the marketing site keeps its own voice. */
.gallery-body {
  --face:      "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, sans-serif;
  --face-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, sans-serif;
}

.gallery-body .masthead-nav a,
.gallery-body .masthead-cta,
.gallery-body .wordmark-text,
.gallery-body .eyebrow,
.gallery-body .footer-fine {
  font-family: var(--face-text);
  font-weight: 600;
}
.gallery-body .wordmark-text { font-family: var(--face); font-weight: 800; }

/* The masthead on the home page floats over a dark sky and is styled for it.
   Here it sits on warm white from the first pixel, so the link colours have to
   come back to the paper side of the palette. */
.gallery-masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 250, 247, 0.88);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.gallery-masthead .wordmark-text,
.gallery-masthead .masthead-nav a { color: var(--graphite); }
.gallery-masthead .masthead-nav a:hover { color: var(--light-deep); }
.gallery-masthead .masthead-nav a[aria-current="page"] {
  color: var(--light-deep);
}
.gallery-masthead .masthead-cta {
  color: var(--graphite);
  border-color: var(--rule);
}
.gallery-masthead .masthead-cta:hover { border-color: var(--light-deep); }

.gallery-head {
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(2rem, 4vw, 3rem);
}
.gallery-h1 {
  font-family: var(--face);
  /* 800 rather than 700: at display sizes a geometric sans reads lighter than
     the serif it replaced, so it needs one step more to carry the same weight. */
  font-weight: 800;
  font-size: clamp(2.3rem, 6.2vw, 4.3rem);
  line-height: 1.04;
  /* Sets wider than the serif this replaced, so pull the tracking back in. */
  letter-spacing: -0.032em;
  margin: 0.5rem 0 1.1rem;
  color: var(--graphite);
}
.gallery-lede {
  max-width: 46ch;
  font-family: var(--face-text);
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.gallery-grid-wrap { padding-bottom: clamp(3rem, 8vw, 6rem); }

.gallery-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: clamp(1.6rem, 3.2vw, 2.6rem);
}

.demo-card { display: flex; flex-direction: column; }

/* Each card carries a drawn impression of its site rather than a screenshot:
   the real palette and the real typographic weight, in the real proportions of
   a browser window, with no image files to go stale when a template changes. */
.demo-shot {
  /* Column rather than block so the CTA can be pushed to the bottom by the
     layout. It used to be absolutely positioned, which meant a title that wrapped
     to two lines (Meridian does) pushed the subtitle underneath it. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  border: 1px solid var(--rule);
  overflow: hidden;
  text-decoration: none;
  padding: 2.5rem 1.6rem 1.6rem;
  transition: transform 220ms cubic-bezier(.2,.7,.3,1),
              box-shadow 220ms cubic-bezier(.2,.7,.3,1);
}
.demo-card:hover .demo-shot,
.demo-shot:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px -18px rgba(18, 22, 28, 0.5);
}

/* The browser chrome strip along the top of every card. */
.shot-bar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1.6rem;
  background: rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.shot-bar::before {
  content: "";
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.1rem;
  height: 0.4rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
}

.shot-title {
  display: block;
  font-family: var(--face);
  font-weight: 800;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -0.028em;
  margin-top: 1.4rem;
}
.shot-sub {
  display: block;
  font-family: var(--face-text);
  font-weight: 600;
  margin-top: 0.55rem;
  margin-bottom: 0.9rem;
  font-size: 0.85rem;
  line-height: 1.45;
  opacity: 0.72;
  max-width: 22ch;
}
/* Stands in for the primary button every one of these sites leads with. The
   auto top margin is what pins it to the bottom of the card without taking it
   out of flow, so it can never land on top of the subtitle. */
.shot-cta {
  flex: none;
  margin-top: auto;
  width: 6.4rem;
  height: 1.7rem;
  border-radius: 999px;
}

/* Per site: the palette each template actually ships with, so the card is a
   true miniature of the site behind it rather than a generic tile. */
.demo-shot-aster { background: #FFFFFF; color: #1F4A3C; }
.demo-shot-aster .shot-cta { background: #1F4A3C; }

.demo-shot-bramwell { background: #F7F0E8; color: #2B1D17; }
.demo-shot-bramwell .shot-cta { background: #B4472A; }

.demo-shot-meridian { background: #F2F4F7; color: #0D3B66; }
.demo-shot-meridian .shot-cta { background: #0D3B66; }

.demo-shot-willowbrook { background: #F4FAFA; color: #14262A; }
.demo-shot-willowbrook .shot-cta { background: #0E7C86; }

.demo-shot-linden { background: #141014; color: #E9E1E6; }
.demo-shot-linden .shot-cta { background: #5B2A4E; }

.demo-shot-quadrant { background: #FFFFFF; color: #12131A; }
.demo-shot-quadrant .shot-cta { background: #1B29D4; }

.demo-shot-fifthash { background: #090D0C; color: #EDE7DD; }
.demo-shot-fifthash .shot-cta { background: #63E2AB; }

.demo-shot-larkspur { background: #E9E7DE; color: #23483A; }
.demo-shot-larkspur .shot-cta { background: #23483A; }

/* The dark cards need their own chrome strip: the shared rule tints with black,
   which is invisible on a near black card. */
.demo-shot-linden .shot-bar,
.demo-shot-fifthash .shot-bar {
  background: rgba(255, 255, 255, 0.07);
  border-bottom-color: rgba(255, 255, 255, 0.09);
}
.demo-shot-linden .shot-bar::before,
.demo-shot-fifthash .shot-bar::before { background: rgba(255, 255, 255, 0.22); }

/* A dot of the hue beside the caption, so the set can be read as a palette at a
   glance without opening anything. */
.swatch {
  display: inline-block;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: -0.02em;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.swatch-aster { background: #1F4A3C; }
.swatch-bramwell { background: #B4472A; }
.swatch-meridian { background: #0D3B66; }
.swatch-willowbrook { background: #0E7C86; }
.swatch-linden { background: #5B2A4E; }
.swatch-quadrant { background: #1B29D4; }
.swatch-fifthash { background: #63E2AB; }
.swatch-larkspur { background: #23483A; }

.demo-meta { padding-top: 1.05rem; }
.demo-name {
  font-family: var(--face);
  font-weight: 800;
  font-size: 1.22rem;
  line-height: 1.25;
  letter-spacing: -0.022em;
  margin: 0 0 0.4rem;
}
.demo-name a {
  color: var(--graphite);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.demo-name a:hover { border-bottom-color: var(--light-deep); color: var(--light-deep); }
.demo-note {
  margin: 0 0 0.55rem;
  font-family: var(--face-text);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 38ch;
}
.demo-pages {
  margin: 0;
  font-family: var(--face-text);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.75;
}

.gallery-fine {
  font-family: var(--face-text);
  margin: clamp(2.4rem, 5vw, 3.6rem) 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}
.gallery-fine p { margin: 0 0 0.7rem; }
.gallery-fine p:last-child { margin-bottom: 0; }
.gallery-fine a { color: var(--light-deep); }

/* Marks a link that leaves for a new tab. The demo cards all open in one, and
   an arrow is the cheapest way to say so before the click rather than after. */
.demo-name .ext,
.gallery-fine .ext {
  display: inline-block;
  margin-left: 0.28em;
  font-size: 0.78em;
  vertical-align: 0.08em;
  opacity: 0.55;
}
.demo-name a:hover .ext { opacity: 1; }

.gallery-footer { padding: 2.2rem 0; }

@media (prefers-reduced-motion: reduce) {
  .demo-shot { transition: none; }
  .demo-card:hover .demo-shot { transform: none; }
}