/* cult-community / temple
   Ceremonial temple: marble with grey veins, gold trim, serif titling capitals. The hero
   is a portico on the category skeleton (.cc-*): a gilded pediment, fluted columns at
   either end, three marble steps, and the gate in the middle, an arched gold-leaf door
   with the mascot (the pfp) standing in it and light behind it; the creed carved to the
   left, the summons and particulars to the right, the slogans as a gold frieze. Joining
   is the last rite (access in a double gold frame). Images: the pfp; scene-1 and scene-2
   only through a gallery. No sticker slots. */

:root {
  --tp-marble: #f8f7f5;
  --tp-marble-dk: #e8e6e3;
  --tp-gold: #d4af37;
  --tp-gold-dk: #b8941f;
  --tp-bronze: #cd7f32;
  --tp-stone: #5a5a5a;
  --tp-shadow: 0 6px 24px rgb(0 0 0 / 0.15);
  --tp-inner-shadow: inset 0 2px 8px rgb(0 0 0 / 0.08);

  --v-bg: var(--tp-marble);
  --v-fg: #2a2a2a;
  --v-soft: #5a5a5a;
  --v-faint: #888888;
  --v-line: #d4d2ce;
  --v-line-strong: #b8b6b0;
  --v-surface: #ffffff;
  --v-surface-2: var(--tp-marble-dk);
  --v-card-bg: #ffffff;
  --v-accent: var(--tp-gold);
  --v-accent-text: var(--tp-gold);
  --v-on-accent: #1a1a1a;
  --v-secondary: var(--tp-bronze);
  --v-seg-1: var(--tp-gold);
  --v-seg-2: var(--tp-bronze);
  --v-seg-3: #8b7355;
  --v-seg-4: #a67c52;
  --v-seg-5: #c9b697;
  --v-seg-6: #9a9a9a;
  --v-font-body: "Crimson Text", Georgia, "Times New Roman", Times, serif;
  --v-font-display: "Cinzel", "Trajan Pro", "Copperplate", Georgia, serif;
  --v-font-mono: "Courier New", Courier, monospace;
  --v-display-weight: 700;
  --v-display-tracking: 0.08em;
  --v-display-case: uppercase;
  --v-display-lh: 1.2;
  --v-title-size: clamp(2.2rem, 4.5vw, 3.8rem);
  --v-body-size: clamp(1.05rem, 0.3vw + 0.98rem, 1.22rem);
  --v-radius: 0px;
  --v-radius-sm: 0px;
  --v-radius-lg: 0px;
  --v-border: 2px solid var(--tp-gold);
  --v-shadow: var(--tp-shadow);
  --v-card-pad: clamp(28px, 4vw, 48px);
  --v-maxw: 1100px;
  --v-sec-gap: clamp(90px, 12vw, 160px);
  --v-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --v-spring: cubic-bezier(0.3, 1.1, 0.5, 1);

  --wl-label-lore: "The Creed";
  --wl-label-features: "The Tenets";
  --wl-label-supply: "The Treasury";
  --wl-label-flow: "The Path";
  --wl-label-timeline: "The Chronicle";
  --wl-label-comparison: "The Order";
  --wl-label-stats: "The Numbers";
  --wl-label-tweet: "The Voice";
  --wl-label-gallery: "The Hall";
  --wl-label-facts: "The Truth";
  --wl-label-quotes: "The Wisdom";
  --wl-label-faq: "The Knowledge";
  --wl-label-access: "Join the Order";

  --tp-col-x: clamp(14px, 2.6vw, 40px);
  --tp-ped-top: clamp(14px, 3vh, 30px);
  --tp-ped-h: clamp(58px, 10vh, 92px);
  --cc-top-h: 64px;
  --cc-hero-cols: minmax(0, 1fr) auto minmax(0, 1fr);
  --cc-hero-rows: auto;
  --cc-hero-areas: "lead art aside";
  --cc-hero-areas-phone: "lead" "art" "aside";
  --cc-hero-gap: clamp(26px, 3.4vw, 60px);
  --cc-hero-pad-y: clamp(96px, 15vh, 132px);
}

html { background: var(--tp-marble); color-scheme: light; }
body { background: var(--tp-marble); }
::selection { background: var(--tp-gold); color: #1a1a1a; }

/* ------------------------------------------------------------ chrome: marble, gold trim */
.cc-atmos {
  background:
    linear-gradient(115deg, transparent 0 38%, rgb(120 116 108 / 0.07) 38.4% 38.55%, transparent 38.9% 100%),
    linear-gradient(64deg, transparent 0 61%, rgb(120 116 108 / 0.06) 61.3% 61.42%, transparent 61.7% 100%),
    linear-gradient(152deg, transparent 0 20%, rgb(150 140 120 / 0.05) 20.3% 20.5%, transparent 20.9% 100%),
    linear-gradient(35deg, transparent 0 76%, rgb(120 116 108 / 0.05) 76.3% 76.42%, transparent 76.7% 100%),
    radial-gradient(90% 60% at 50% 0%, #ffffff, var(--tp-marble) 62%, var(--tp-marble-dk));
}
.cc-top {
  background: rgb(248 247 245 / 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 3px double var(--tp-gold);
}
.cc-brand__mark { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--tp-gold); }
.cc-brand__name { font-family: var(--v-font-display); font-weight: 700; font-size: 1.12rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tp-stone); }
.cc-brand__tick { font-family: var(--v-font-display); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--tp-gold-dk); }
.cc-top__nav .wl-nav__link { font-family: var(--v-font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tp-stone); }
.cc-top__nav .wl-nav__link:hover, .cc-top__nav .wl-nav__link.is-active { color: var(--tp-gold-dk); }
.cc-top__net { padding: 6px 14px; border: 1.5px solid var(--tp-gold); font-family: var(--v-font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tp-gold-dk); }

/* ------------------------------------------------------------ hero: the temple front
   A portico: a gilded pediment across the top, fluted columns at either end, three
   marble steps, and in the middle the gate: an arched doorway in gold leaf with the
   mascot standing in it. The creed is carved on the wall left of the gate, the summons
   and the particulars on the wall to its right. */
.cc-hero { padding-inline: calc(var(--tp-col-x) + 72px); }
.cc-hero::before, .cc-hero::after {
  content: ""; position: absolute; z-index: -1; left: 50%; transform: translateX(-50%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.cc-hero::before { top: var(--tp-ped-top); width: calc(100% - 2 * var(--tp-col-x) + 24px); height: var(--tp-ped-h); background: linear-gradient(var(--tp-gold), var(--tp-gold-dk)); }
.cc-hero::after { top: calc(var(--tp-ped-top) + 9px); width: calc(100% - 2 * var(--tp-col-x) - 12px); height: calc(var(--tp-ped-h) - 13px);
  background: linear-gradient(#ffffff, var(--tp-marble-dk)); }
.cc-hero__sky {
  background:
    linear-gradient(var(--tp-gold), var(--tp-gold-dk)) left calc(var(--tp-col-x) - 8px) top calc(var(--tp-ped-top) + var(--tp-ped-h) + 4px) / 58px 12px no-repeat,
    linear-gradient(var(--tp-gold), var(--tp-gold-dk)) right calc(var(--tp-col-x) - 8px) top calc(var(--tp-ped-top) + var(--tp-ped-h) + 4px) / 58px 12px no-repeat,
    linear-gradient(#d8d4cc, #c9c4ba) left calc(var(--tp-col-x) - 6px) bottom 54px / 54px 12px no-repeat,
    linear-gradient(#d8d4cc, #c9c4ba) right calc(var(--tp-col-x) - 6px) bottom 54px / 54px 12px no-repeat,
    repeating-linear-gradient(90deg, #fbfaf7 0 5px, #dcd8d0 5px 7px, #f1eee8 7px 10px) left var(--tp-col-x) top calc(var(--tp-ped-top) + var(--tp-ped-h) + 16px) / 42px calc(100% - var(--tp-ped-top) - var(--tp-ped-h) - 82px) no-repeat,
    repeating-linear-gradient(90deg, #fbfaf7 0 5px, #dcd8d0 5px 7px, #f1eee8 7px 10px) right var(--tp-col-x) top calc(var(--tp-ped-top) + var(--tp-ped-h) + 16px) / 42px calc(100% - var(--tp-ped-top) - var(--tp-ped-h) - 82px) no-repeat,
    linear-gradient(#ebe8e2, #d6d2ca) center bottom 36px / calc(100% - 2 * var(--tp-col-x) + 40px) 18px no-repeat,
    linear-gradient(#ebe8e2, #d6d2ca) center bottom 18px / calc(100% - 2 * var(--tp-col-x) + 80px) 18px no-repeat,
    linear-gradient(#ebe8e2, #d6d2ca) center bottom 0 / calc(100% - 2 * var(--tp-col-x) + 120px) 18px no-repeat;
}
.cc-chart, .cc-signal, .cc-sigil, .cc-photo, .cc-stamp { display: none; }

.cc-hero__lead { justify-self: end; max-width: 30rem; text-align: right; }
.cc-hero__kicker { margin-bottom: 18px; }
.cc-hero__kick { display: inline-flex; align-items: center; gap: 12px; font-family: var(--v-font-display); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tp-gold-dk); }
.cc-hero__kick::before { content: ""; width: 34px; height: 1.5px; background: var(--tp-gold); }
.cc-hero__headline {
  font-size: clamp(2rem, 3.3vw, 3.1rem); line-height: 1.16; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--tp-stone); text-shadow: 1px 1px 0 var(--tp-gold);
}
.cc-hero__art { align-self: end; margin-bottom: 44px; }
.cc-seal {
  width: clamp(240px, 25vw, 330px); aspect-ratio: 3 / 4; padding: 14px;
  border-radius: 50% 50% 3px 3px / 37.5% 37.5% 3px 3px;
  background: linear-gradient(135deg, #b8941f, #f1dc8b 26%, var(--tp-gold) 46%, #f6e4a0 64%, #a9861a);
  box-shadow: 0 0 0 2px var(--tp-gold-dk), 0 0 0 9px #f7f5f0, 0 0 0 11px var(--tp-gold), 0 26px 50px -22px rgb(80 60 20 / 0.5);
}
.cc-seal::before { /* the keystone */
  content: ""; position: absolute; z-index: 2; top: -18px; left: 50%; width: 34px; height: 40px; transform: translateX(-50%);
  background: linear-gradient(#f6e4a0, var(--tp-gold-dk)); clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
.cc-seal::after { /* light through the door */
  content: ""; position: absolute; z-index: -1; inset: -34% -40%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 236 170 / 0.75), rgb(255 236 170 / 0.18) 55%, transparent);
}
.cc-hero__media { position: absolute; inset: 14px; overflow: hidden; border-radius: 50% 50% 2px 2px / 37.5% 37.5% 2px 2px; background: var(--tp-marble-dk); box-shadow: inset 0 0 0 1px var(--tp-gold-dk); }
.cc-hero__media .wl-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 22% 30%; }
.cc-no-art .cc-seal { background: radial-gradient(circle at 50% 60%, #fffaf0, var(--tp-marble-dk)); }

.cc-hero__aside { justify-self: start; max-width: 25rem; display: grid; gap: 22px; }
.cc-hero__subhead { font-size: clamp(1.02rem, 1.25vw, 1.16rem); line-height: 1.7; font-style: italic; color: var(--v-soft); }
.cc-hero__cta { gap: 12px; }
.cc-hero__cta .wl-btn__ca { display: none; }
.cc-meta { gap: 0; border-top: 1.5px solid var(--tp-gold); border-bottom: 1.5px solid var(--tp-gold); }
.cc-meta__row { padding: 10px 18px 10px 0; margin-right: 18px; border-right: 1px solid var(--v-line); }
.cc-meta__row:last-child { border-right: 0; margin-right: 0; }
.cc-meta dt { font-family: var(--v-font-display); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tp-gold-dk); }
.cc-meta dd { font-size: 0.98rem; color: var(--tp-stone); }

/* the frieze: slogans carved in a gold band */
.cc-band { padding: 14px 0; background: var(--tp-marble-dk); border-block: 2px solid var(--tp-gold); font-family: var(--v-font-display); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tp-gold-dk); }
.cc-band .wl-marquee__item::after { content: "\2726"; margin-left: 3.2em; color: var(--tp-gold); }

/* buttons: ceremonial */
.wl-btn {
  padding: 0.85em 1.8em;
  border: 2px solid var(--tp-gold);
  background: var(--tp-marble-dk); color: var(--tp-stone);
  font-family: var(--v-font-display); font-size: 1rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: var(--tp-shadow);
  transition: all 0.2s;
}
.wl-btn .wl-glyph { display: none; }
.wl-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.18);
  background: var(--tp-marble);
}
.wl-btn--primary {
  background: var(--tp-gold); border-color: var(--tp-gold-dk);
  color: var(--v-on-accent);
}
.wl-btn--primary:hover {
  background: var(--tp-gold-dk);
  box-shadow: 0 8px 28px rgb(212 175 55 / 0.4);
}

/* ------------------------------------------------------------ section heads */
.wl-sec__head {
  margin: 0 auto clamp(44px, 6vw, 72px);
  text-align: center;
}
.wl-kicker {
  justify-content: center; margin-bottom: 0.6em;
  font-family: var(--v-font-display); font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tp-gold);
}
.wl-kicker .wl-ord {
  background: var(--tp-gold); color: var(--v-on-accent);
  border: 2px solid var(--tp-gold-dk);
  padding: 6px 14px; font-weight: 700;
  box-shadow: 0 3px 10px rgb(212 175 55 / 0.3);
}
.wl-sec__title {
  font-family: var(--v-font-display); font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tp-stone);
  text-shadow: 1px 1px 0 var(--tp-gold);
}

/* ------------------------------------------------------------ features: pillars */
.wl-features {
  display: grid; gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.wl-feature {
  padding: 32px 28px;
  background: var(--v-surface); border: 2px solid var(--tp-gold);
  box-shadow: var(--tp-shadow), var(--tp-inner-shadow);
  display: grid; justify-items: center; align-content: start;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.wl-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgb(0 0 0 / 0.18);
}
.wl-feature .wl-ord { display: none; }
.wl-feature__icon {
  width: 64px; height: 64px; margin-bottom: 20px;
  background: var(--tp-gold); border: 2px solid var(--tp-gold-dk);
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgb(212 175 55 / 0.3);
}
.wl-feature__icon img,
.wl-feature__icon .wl-glyph {
  width: 32px; height: 32px;
  filter: brightness(0) invert(1);
}
.wl-feature__title {
  font-family: var(--v-font-display); font-size: clamp(1.2rem, 1.6vw, 1.48rem);
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--tp-stone); margin-bottom: 10px;
}
.wl-feature__text {
  color: var(--v-soft); font-size: 1.05rem; line-height: 1.65;
  font-style: italic;
}

/* ------------------------------------------------------------ lore: sacred text */
.wl-sec--lore .wl-lore {
  margin-inline: auto; max-width: 52rem; text-align: center;
  padding: clamp(40px, 6vw, 64px);
  background: var(--v-surface); border: 3px solid var(--tp-gold);
  box-shadow: var(--tp-shadow), var(--tp-inner-shadow);
}
.wl-lore__lead {
  font-family: var(--v-font-display); font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.35; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--tp-stone); margin-bottom: 22px;
}
.wl-lore__p {
  margin-inline: auto; font-size: clamp(1.08rem, 1.45vw, 1.28rem);
  line-height: 1.75; font-style: italic; color: var(--v-soft);
}

/* ------------------------------------------------------------ infographic */
.wl-infographic { gap: clamp(24px, 3.5vw, 36px); }
.wl-graphic--supply,
.wl-graphic--comparison {
  padding: clamp(36px, 5.5vw, 60px);
  background: var(--v-surface); border: 3px solid var(--tp-gold);
  box-shadow: var(--tp-shadow), var(--tp-inner-shadow);
}
@media (min-width: 761px) {
  .wl-graphic--supply {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "chart legend" "chart rings";
    column-gap: clamp(36px, 7vw, 84px); row-gap: 36px;
  }
  .wl-graphic--supply:not(:has(.wl-rings)) { grid-template-areas: "chart legend"; }
  .wl-graphic--supply:not(:has(.wl-legend)) { grid-template-areas: "chart rings"; }
  .wl-graphic--supply .wl-donut { display: contents; }
  .wl-graphic--supply .wl-donut__chart { grid-area: chart; justify-self: center; }
  .wl-graphic--supply .wl-legend { grid-area: legend; align-self: start; width: 100%; }
  .wl-graphic--supply .wl-rings { grid-area: rings; align-self: end; }
}
.wl-donut__track { stroke: var(--tp-marble-dk); stroke-width: 18; }
.wl-donut__seg { stroke-width: 18; }
.wl-donut__ticks line { stroke: var(--tp-gold); stroke-width: 1; opacity: 0.3; }
.wl-donut__value {
  font-weight: 700; font-size: clamp(1.4rem, 2.9vw, 2.3rem);
  letter-spacing: 0.02em; color: var(--tp-stone);
}
.wl-donut__label,
.wl-ring__label,
.wl-stat__label {
  font-family: var(--v-font-display); font-size: 0.8rem;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
  color: var(--tp-gold);
}
.wl-legend__item {
  border-bottom-color: var(--v-line); padding-bottom: 14px;
  font-size: 1.05rem;
}
.wl-legend__swatch { width: 14px; height: 14px; border: 1px solid var(--tp-gold); }
.wl-legend__value {
  font-family: var(--v-font-display); font-weight: 700;
  font-size: 1.35rem; letter-spacing: 0.02em; color: var(--tp-stone);
}
.wl-rings { gap: clamp(24px, 3.5vw, 42px); }
.wl-ring__track { stroke: var(--tp-marble-dk); stroke-width: 6; }
.wl-ring__fill { stroke-width: 6; }
.wl-ring__value {
  font-weight: 700; letter-spacing: 0; color: var(--tp-stone);
  font-size: clamp(2.3rem, 4.6vw, 3.6rem);
}
.wl-stats {
  background: var(--tp-marble-dk); border: 2px solid var(--tp-gold);
  box-shadow: var(--tp-shadow);
}
.wl-stat {
  background: var(--v-surface);
  padding: clamp(28px, 3.5vw, 40px) clamp(24px, 3vw, 36px);
  text-align: center; align-items: center;
  border: 1px solid var(--v-line);
}
.wl-stat__value {
  font-weight: 700; color: var(--tp-stone);
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  letter-spacing: 0.02em;
}
.wl-stat--word .wl-stat__value {
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 700; letter-spacing: 0;
}
.wl-caption {
  text-align: center; color: var(--v-soft); font-size: 0.9rem;
  font-style: italic;
}

/* ------------------------------------------------------------ gallery */
.wl-gallery {
  gap: clamp(20px, 2.8vw, 32px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wl-gallery[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.wl-gallery .wl-shot:first-child { grid-column: 1 / -1; }
.wl-gallery .wl-shot:nth-child(even):last-child { grid-column: 1 / -1; }
.wl-shot {
  background: var(--tp-marble-dk); border: 3px solid var(--tp-gold);
  overflow: hidden; box-shadow: var(--tp-shadow);
  transition: transform 0.2s, box-shadow 0.2s;
}
.wl-shot:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgb(0 0 0 / 0.2);
}
.wl-shot img { height: auto; aspect-ratio: 16 / 9; }
.wl-shot__caption {
  padding: 16px 20px; background: var(--tp-marble-dk);
  color: var(--tp-stone); font-size: 0.92rem; font-weight: 600;
  text-align: center; letter-spacing: 0.04em; text-transform: uppercase;
}

/* ------------------------------------------------------------ quotes */
.wl-quotes { gap: clamp(20px, 2.8vw, 32px); }
.wl-quote {
  padding: 36px 32px;
  background: var(--v-surface); border: 2px solid var(--tp-gold);
  box-shadow: var(--tp-shadow), var(--tp-inner-shadow);
}
.wl-quote::before {
  position: static; display: inline-block; margin-bottom: 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.6rem; font-weight: 400;
  color: var(--tp-gold); line-height: 1;
}
.wl-quote__text {
  font-family: var(--v-font-body); font-size: clamp(1.12rem, 1.55vw, 1.38rem);
  font-weight: 400; line-height: 1.65; font-style: italic;
  color: var(--tp-stone); margin-bottom: 16px;
}
.wl-quote__who {
  font-family: var(--v-font-display); font-size: 0.92rem;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tp-gold);
}

/* ------------------------------------------------------------ facts */
.wl-facts {
  margin-inline: auto; max-width: 52rem; gap: 18px;
}
.wl-fact {
  grid-template-columns: 38px 1fr; gap: 18px; padding: 20px 24px;
  background: var(--v-surface); border: 2px solid var(--tp-gold);
  box-shadow: var(--tp-shadow);
  font-family: var(--v-font-body); font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 400; letter-spacing: 0; color: var(--tp-stone);
}
.wl-fact__mark {
  width: 38px; height: 38px;
  background: var(--tp-gold); color: var(--v-on-accent);
  border: 2px solid var(--tp-gold-dk);
  box-shadow: 0 3px 10px rgb(212 175 55 / 0.3);
}
.wl-fact__mark .wl-glyph { width: 20px; height: 20px; }

/* ------------------------------------------------------------ faq */
.wl-faq {
  margin-inline: auto; max-width: 54rem; gap: 0;
  background: var(--v-surface); border: 3px solid var(--tp-gold);
  box-shadow: var(--tp-shadow);
}
.wl-qa {
  background: none; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--v-line);
}
.wl-qa:first-child { border-top: 0; }
.wl-qa:last-child { border-bottom: 0; }
.wl-qa__q {
  padding: 26px 28px;
  font-family: var(--v-font-display); font-size: clamp(1.08rem, 1.5vw, 1.32rem);
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--tp-stone);
}
.wl-qa__sign {
  width: 30px; height: 30px;
  background: var(--tp-marble-dk); color: var(--tp-stone);
  border: 2px solid var(--tp-gold);
}
.wl-qa__sign::before,
.wl-qa__sign::after {
  left: 7px; right: 7px; height: 2px; background: currentColor;
}
.wl-qa[open] .wl-qa__sign {
  background: var(--tp-gold); color: var(--v-on-accent);
}
.wl-qa__a {
  padding: 0 28px 28px; max-width: 44rem;
  color: var(--v-soft); font-size: 1.05rem; line-height: 1.7;
  font-style: italic;
}

.wl-post {
  background: var(--v-surface); border: 2px solid var(--tp-gold);
  box-shadow: var(--tp-shadow);
  margin-inline: auto;
}
.wl-post__text {
  font-family: var(--v-font-body); letter-spacing: 0;
  color: var(--tp-stone);
}

/* ------------------------------------------------------------ access */
.wl-sec--access .wl-sec__inner {
  padding: clamp(52px, 8vw, 96px) clamp(32px, 5.5vw, 68px);
  background: var(--tp-marble-dk); border: 4px solid var(--tp-gold);
  box-shadow: var(--tp-shadow), var(--tp-inner-shadow);
  position: relative;
}
.wl-sec--access .wl-sec__inner::before {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid var(--tp-gold-dk);
  pointer-events: none;
}
.wl-access {
  margin-inline: auto; justify-items: center; text-align: center;
}
.wl-access__net {
  font-family: var(--v-font-display); font-size: 0.92rem;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
  color: var(--tp-gold);
}
.wl-ca {
  width: min(100%, 52rem); padding: 12px 12px 12px 28px;
  border: 2px solid var(--tp-gold);
  background: var(--v-surface); box-shadow: var(--tp-shadow);
}
.wl-ca__label {
  font-family: var(--v-font-display); font-size: 0.78rem;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
  color: var(--tp-gold);
}
.wl-ca__value { color: var(--tp-stone); text-align: left; }
.wl-ca .wl-copy {
  padding: 14px 28px;
  background: var(--tp-gold); color: var(--v-on-accent);
  border: 2px solid var(--tp-gold-dk);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  box-shadow: 0 4px 12px rgb(212 175 55 / 0.35);
}
.wl-ca .wl-copy:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 18px rgb(212 175 55 / 0.45);
}
.wl-links { justify-content: center; }
.wl-link {
  padding: 14px 24px;
  border: 2px solid var(--tp-gold);
  background: var(--v-surface); font-weight: 700;
  color: var(--tp-stone); letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: var(--tp-shadow);
  transition: all 0.2s;
}
.wl-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
  background: var(--tp-gold); color: var(--v-on-accent);
}
.wl-link .wl-glyph { color: var(--tp-gold); }

/* ------------------------------------------------------------ footer */
.cc-footer {
  border-top: 3px solid var(--tp-gold);
  color: var(--v-soft); font-size: 0.88rem;
  max-width: calc(var(--v-maxw) + 2 * var(--v-pad-x)); margin: 0 auto;
}
.wl-foot__name {
  font-family: var(--v-font-display); font-weight: 700;
  font-size: 1.05rem; color: var(--tp-stone);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.wl-foot__net,
.wl-foot__nfa { color: var(--v-faint); font-size: 0.88rem; }
.wl-foot .wl-link { padding: 6px 12px; font-size: 0.85rem; }

/* ------------------------------------------------------------ motion */
.wl-motion-calm[data-wl-reveal="on"] .wl-reveal {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.9s var(--v-ease), transform 0.9s var(--v-ease);
}
.wl-motion-calm[data-wl-reveal="on"] .wl-reveal.wl-in {
  opacity: 1; transform: none;
}

@media (max-width: 900px) {
  .cc-hero { padding-inline: calc(var(--tp-col-x) + 58px); }
  .cc-hero__lead, .cc-hero__aside { justify-self: center; text-align: center; }
  .cc-hero__cta, .cc-meta { justify-content: center; }
  .cc-hero__art { margin-bottom: 70px; }
}

/* ------------------------------------------------------------ phone */
@media (max-width: 760px) {
  .cc-hero__lead, .cc-hero__aside { justify-self: center; text-align: center; }
  .cc-hero__kick::before { display: none; }
  .cc-hero__headline { font-size: clamp(1.9rem, 8.6vw, 2.8rem); }
  .cc-hero__cta { justify-content: center; gap: 10px; }
  .cc-hero__cta .wl-btn { font-size: 0.9rem; padding: 0.75em 1.4em; }
  .cc-meta { justify-content: center; }
  .cc-hero__art { margin-bottom: 0; }
  .wl-features { grid-template-columns: minmax(0, 1fr); }
  .wl-gallery { grid-template-columns: minmax(0, 1fr); }
  .wl-ca { padding: 16px; }
}