/* cult-community skeleton: structure only. Colour, type, ornament and motion are the
   variant's (variants/*.css); everything here paints from --v-* tokens.

   The hero is one grid over three blocks: lead (kicker + headline), art (the seal or
   the collage around the hero image) and aside (subhead, calls to action, particulars).

   Layout knobs a variant may turn (never the grid properties themselves, or the phone
   breakpoint below would lose to the variant's later rule):
     --cc-top-h              chrome bar height
     --cc-hero-cols          hero columns (desktop)
     --cc-hero-rows          hero rows (desktop)
     --cc-hero-areas         hero areas over lead / art / aside (desktop)
     --cc-hero-areas-phone   the order of lead / art / aside once the hero is one column
     --cc-hero-gap           hero column gap          --cc-hero-row-gap   hero row gap
     --cc-hero-pad-y         hero padding, top and bottom
     --cc-seal               the art block's size (width; the seal is square) */

:root {
  --cc-top-h: 64px;
  --cc-hero-cols: minmax(0, 1.1fr) minmax(0, 0.9fr);
  --cc-hero-rows: auto auto;
  --cc-hero-areas: "lead art" "aside art";
  --cc-hero-areas-phone: "lead" "art" "aside";
  --cc-hero-gap: clamp(28px, 4vw, 64px);
  --cc-hero-row-gap: clamp(20px, 3vw, 36px);
  --cc-hero-pad-y: clamp(36px, 5vw, 72px);
  --cc-seal: min(100%, 540px);
}

.cc-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

.cc-page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow-x: clip;
}
/* the page's own atmosphere (a sky, a paper), fixed behind everything */
.cc-atmos { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

/* ---- chrome */
.cc-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px);
  height: var(--cc-top-h);
  padding: 0 var(--v-pad-x);
}
/* a long name gives way (ellipsis) before the bar runs off a narrow screen */
.cc-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; flex: 0 1 auto; text-decoration: none; }
.cc-brand__mark { width: 34px; height: 34px; flex: none; object-fit: cover; }
.cc-brand__name, .cc-brand__tick { white-space: nowrap; }
.cc-brand__name { min-width: 0; overflow-x: clip; text-overflow: ellipsis; }
.cc-brand__tick { flex: none; }
/* The nav only takes the room left over (basis 0), so it gives way before the name does;
   auto margins on its first and last link keep the links centred while they fit. */
.cc-top__nav { display: flex; flex: 1 1 0; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cc-top__nav .wl-nav__link:first-child { margin-left: auto; }
.cc-top__nav .wl-nav__link:last-child { margin-right: auto; }
.cc-top__nav::-webkit-scrollbar { display: none; }
.cc-top__nav .wl-nav__link { flex: none; white-space: nowrap; text-decoration: none; padding: 8px 12px; }
.cc-top__net { flex: none; margin-left: auto; white-space: nowrap; }
.cc-top__nav + .cc-top__net { margin-left: 0; }

/* ---- hero */
.cc-hero {
  position: relative; z-index: 0;
  display: grid;
  grid-template-columns: var(--cc-hero-cols);
  grid-template-rows: var(--cc-hero-rows);
  grid-template-areas: var(--cc-hero-areas);
  column-gap: var(--cc-hero-gap);
  row-gap: var(--cc-hero-row-gap);
  align-items: center;
  align-content: center;
  min-height: calc(100vh - var(--cc-top-h));
  min-height: calc(100svh - var(--cc-top-h));
  padding: var(--cc-hero-pad-y) var(--v-pad-x);
}
.cc-hero__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.cc-chart { position: absolute; inset: 0; width: 100%; height: 100%; }
.cc-signal { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 150px; }

.cc-hero__lead, .cc-hero__art, .cc-hero__aside { position: relative; min-width: 0; }
.cc-hero__lead { grid-area: lead; }
.cc-hero__art { grid-area: art; display: grid; place-items: center; }
.cc-hero__aside { grid-area: aside; }

.cc-hero__kicker { margin: 0; }
.cc-hero__headline {
  margin: 0;
  font-family: var(--v-font-display);
  font-weight: var(--v-display-weight);
  letter-spacing: var(--v-display-tracking);
  line-height: var(--v-display-lh);
  text-transform: var(--v-display-case);
  overflow-wrap: break-word;
}
/* app.js groups a split headline's letters by word, so a line only ever breaks between words */
.cc-word { display: inline-block; white-space: nowrap; }
.cc-hero__subhead { margin: 0; }
.cc-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

.cc-seal { position: relative; width: var(--cc-seal); max-width: 100%; aspect-ratio: 1; }
.cc-sigil { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cc-hero__media .wl-hero-img { display: block; }
.cc-photo, .cc-sticker, .cc-stamp { display: block; pointer-events: none; }

.cc-meta { margin: 0; display: flex; flex-wrap: wrap; }
.cc-meta__row { margin: 0; min-width: 0; }
.cc-meta dt, .cc-meta dd { margin: 0; }
.cc-meta code { font: inherit; }

/* ---- band, sections, footer */
.cc-band { position: relative; z-index: 1; }
.cc-flow { position: relative; padding-bottom: clamp(64px, 9vw, 128px); }
.cc-footer { position: relative; padding: 40px var(--v-pad-x) 56px; }

@media (max-width: 900px) {
  .cc-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: var(--cc-hero-areas-phone);
    min-height: 0;
  }
  .cc-top__nav { display: none; }
}
@media (max-width: 480px) {
  .cc-top { gap: 12px; }
  .cc-brand__mark { width: 30px; height: 30px; }
}