/* ==========================================================================
   Bluff and Bash - sections
   Hero, page headers, mosaics, split blocks, steps, showcase, legal prose.
   ========================================================================== */

/* ---------- Breadcrumbs ---------- */
.crumbs {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
  color: var(--mist);
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "\2014"; margin-right: 0.5rem; opacity: 0.6; }
.crumbs a { color: var(--champagne); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ==========================================================================
   HOME HERO - asymmetric: type column + offset photograph + vertical rail
   ========================================================================== */
.hero {
  background: radial-gradient(130% 100% at 80% 0%, #16282a 0%, var(--ink) 58%, #060a0b 100%);
  color: var(--platinum);
  position: relative;
  overflow: hidden;
  padding-block: var(--space-6) 0;
}
.hero__grid {
  display: grid;
  gap: var(--space-5);
  align-items: end;
}
.hero__title {
  font-size: var(--step-5);
  color: var(--paper);
  margin-bottom: var(--space-3);
}
.hero__title em {
  font-style: italic;
  color: var(--champagne);
}
.hero__lede { color: #bccdcb; font-size: var(--step-1); max-width: 46ch; }
.hero__actions { margin-top: var(--space-4); }
.hero__meta {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--rule-dark);
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hero__meta li { margin: 0; }
.hero__meta dt, .hero__meta b {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 400;
  margin-bottom: 0.2rem;
}
.hero__meta span { font-size: 0.9rem; color: var(--platinum); }

.hero__figure { position: relative; margin: 0; }
.hero__figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.04);
}
.hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 15, 17, 0.1) 0%, rgba(10, 15, 17, 0.55) 100%);
  pointer-events: none;
}
.hero__strip {
  margin-top: var(--space-5);
  border-top: 1px solid var(--rule-dark);
  padding-block: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem var(--space-4);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #86a09d;
}
.hero__strip span { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__strip span::before { content: ""; width: 5px; height: 5px; background: var(--brass); border-radius: 50%; }

@media (min-width: 900px) {
  .hero { padding-block: var(--space-7) 0; }
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-6); }
  .hero__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   PLEDGE - the symbolic-chip statement, a band of its own directly under the
   hero rather than a plate floating inside it.
   ========================================================================== */
.pledge {
  background: var(--paper-2);
  border-top: 2px solid var(--brass);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--space-4);
}
.pledge__inner {
  display: grid;
  gap: var(--space-2) var(--space-4);
  align-items: start;
}
.pledge__label {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-dark);
}
.pledge p + p { margin-top: var(--space-2); }
.pledge__body { margin: 0; font-size: 0.92rem; color: var(--text-soft); max-width: 92ch; }
.pledge__body strong { color: var(--ink); }
@media (min-width: 820px) {
  .pledge__inner { grid-template-columns: 11rem 1fr; }
}

/* ==========================================================================
   PAGE HEAD - compact dark banner for inner pages
   ========================================================================== */
.pagehead {
  background: linear-gradient(115deg, var(--ink) 0%, #12282a 65%, var(--teal-deep) 100%);
  color: var(--platinum);
  padding-block: var(--space-6);
  position: relative;
}
.pagehead--photo { background: var(--ink); }
.pagehead__grid { display: grid; gap: var(--space-4); align-items: center; }
.pagehead h1 { color: var(--paper); margin-bottom: var(--space-3); font-size: var(--step-4); }
.pagehead .lede { color: #bccdcb; }
.pagehead__kicker {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--champagne);
  margin: 0 0 var(--space-2);
}
.pagehead__figure { margin: 0; }
.pagehead__figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid rgba(192, 160, 100, 0.3);
}
.pagehead__facts {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: 0.8rem;
}
.pagehead__facts li {
  margin: 0;
  padding-left: 0.9rem;
  position: relative;
  color: #a9bfbc;
}
.pagehead__facts li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 1px;
  background: var(--brass);
}
@media (min-width: 900px) {
  .pagehead__grid--split { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-6); }
}

/* ==========================================================================
   SPLIT - image beside copy, alternating
   ========================================================================== */
.split { display: grid; gap: var(--space-4); align-items: center; }
.split__figure { margin: 0; position: relative; }
.split__figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.split__figure figcaption {
  font-size: 0.74rem;
  color: var(--text-soft);
  margin-top: 0.6rem;
  font-style: italic;
}
.band--ink .split__figure figcaption, .band--teal .split__figure figcaption { color: #8aa3a0; }
@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .split--flip .split__figure { order: 2; }
  .split--wide-text { grid-template-columns: 1.15fr 0.85fr; }
}

/* ==========================================================================
   MOSAIC - asymmetric image set on the home page
   ========================================================================== */
.mosaic { display: grid; gap: var(--space-2); }
.mosaic figure { margin: 0; position: relative; overflow: hidden; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.mosaic figure:hover img { transform: scale(1.03); }
.mosaic figcaption {
  position: absolute;
  left: 0; bottom: 0; right: 0;
  padding: 1.1rem;
  background: linear-gradient(180deg, transparent, rgba(6, 10, 11, 0.85));
  color: var(--paper);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mosaic__a img { aspect-ratio: 1 / 1; }
.mosaic__b img { aspect-ratio: 1 / 1; }
.mosaic__c img { aspect-ratio: 3 / 2; }
.mosaic__d img { aspect-ratio: 3 / 2; }
@media (min-width: 760px) {
  .mosaic {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "a a b c"
      "a a d d";
  }
  .mosaic__a { grid-area: a; }
  .mosaic__b { grid-area: b; }
  .mosaic__c { grid-area: c; }
  .mosaic__d { grid-area: d; }
  .mosaic__a img, .mosaic__b img, .mosaic__c img, .mosaic__d img { aspect-ratio: auto; height: 100%; }
  .mosaic__a { min-height: 460px; }
}

/* ==========================================================================
   STEPS - numbered process ledger
   ========================================================================== */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.steps > li {
  counter-increment: step;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.steps > li:last-child { border-bottom: 1px solid var(--rule); }
.steps__no {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--brass-dark);
}
.steps h3 { margin: 0; font-size: var(--step-1); }
.steps p { color: var(--text-soft); margin: 0; }
.band--ink .steps > li, .band--teal .steps > li { border-color: var(--rule-dark); }
.band--ink .steps p, .band--teal .steps p { color: #a9bfbc; }
.band--ink .steps__no, .band--teal .steps__no { color: var(--champagne); }
@media (min-width: 820px) {
  .steps > li { grid-template-columns: 7rem 1fr 1.1fr; gap: var(--space-4); align-items: start; }
}

/* ==========================================================================
   STAT RAIL
   ========================================================================== */
.stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, 1fr);
}
.stats li {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--rule-dark);
  border-left: 2px solid var(--brass);
  background: rgba(221, 228, 227, 0.04);
}
.stats b {
  display: block;
  font-family: var(--serif);
  font-size: var(--step-3);
  color: var(--champagne);
  line-height: 1;
  margin-bottom: 0.4rem;
  font-weight: 500;
}
.stats span { font-size: 0.8rem; color: #a9bfbc; }
@media (min-width: 880px) { .stats { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   SHOWCASE / REFERENCES
   ========================================================================== */
.case {
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.case__tag {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--teal-deep);
  padding: 0.45rem var(--space-3);
}
.case__body { padding: var(--space-4); display: grid; gap: var(--space-2); }
.case__body h3 { margin: 0; font-size: var(--step-1); }
.case dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.9rem; font-size: 0.82rem; }
.case dt { font-weight: 650; color: var(--ink); }
.case dd { margin: 0; color: var(--text-soft); }

.quote {
  border-left: 2px solid var(--brass);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  margin: 0;
}
.quote p {
  font-family: var(--serif);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink);
  font-style: italic;
}
.quote footer {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin-top: var(--space-2);
}
.band--ink .quote p, .band--teal .quote p { color: var(--paper); }
.band--ink .quote footer, .band--teal .quote footer { color: var(--champagne); }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.ctaband {
  background: linear-gradient(100deg, var(--teal-deep) 0%, var(--ink) 70%);
  color: var(--platinum);
  padding-block: var(--space-6);
  border-top: 2px solid var(--brass);
}
.ctaband__grid { display: grid; gap: var(--space-4); align-items: center; }
.ctaband h2 { color: var(--paper); margin-bottom: var(--space-2); }
.ctaband p { color: #bccdcb; }
@media (min-width: 880px) { .ctaband__grid { grid-template-columns: 1.3fr 0.7fr; } }

/* ==========================================================================
   NOT-GAMBLING NOTICE BLOCK (inline, per page)
   ========================================================================== */
.notgambling {
  border: 1px solid rgba(192, 160, 100, 0.45);
  background: rgba(192, 160, 100, 0.08);
  border-left: 3px solid var(--brass);
  padding: var(--space-4);
  border-radius: var(--radius);
  display: grid;
  gap: var(--space-2);
}
.notgambling h2, .notgambling h3 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin: 0;
}
.notgambling p { font-size: 0.9rem; color: var(--text-soft); margin: 0; }
.notgambling ul { margin: 0; padding-left: 1.1rem; font-size: 0.88rem; color: var(--text-soft); }
.band--ink .notgambling, .band--teal .notgambling {
  background: rgba(192, 160, 100, 0.1);
  border-color: rgba(192, 160, 100, 0.4);
}
.band--ink .notgambling h2, .band--ink .notgambling h3,
.band--teal .notgambling h2, .band--teal .notgambling h3 { color: var(--champagne); }
.band--ink .notgambling p, .band--ink .notgambling ul,
.band--teal .notgambling p, .band--teal .notgambling ul { color: #c2d2d0; }

/* ==========================================================================
   FORMAT INDEX (formats.php) - editorial rows
   ========================================================================== */
.rows { display: grid; gap: 0; }
.rowitem {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.rowitem:last-child { border-bottom: 1px solid var(--rule); }
.rowitem__no {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--brass-dark);
}
.rowitem h2 { font-size: var(--step-2); margin-bottom: var(--space-2); }
.rowitem p { color: var(--text-soft); }
.rowitem img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.rowitem ul { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.rowitem ul li {
  font-size: var(--step--1);
  color: var(--text-soft);
  padding-left: 1rem;
  position: relative;
}
.rowitem ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 6px; height: 1px;
  background: var(--brass);
}
@media (min-width: 900px) {
  .rowitem { grid-template-columns: 5rem 1.25fr 0.95fr; gap: var(--space-5); }
  .rowitem__media { order: 3; }
}

/* ==========================================================================
   INCLUDED / EXCLUDED COLUMNS
   ========================================================================== */
.twocol { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .twocol { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: 0.7rem;
  color: var(--text-soft);
  font-size: 0.92rem;
}
.checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0; top: 0;
  color: var(--teal-soft);
  font-weight: 700;
}
.checklist--no li::before { content: "\00D7"; color: var(--error); }
.band--ink .checklist li, .band--teal .checklist li { color: #bccdcb; }

/* ==========================================================================
   LEGAL PROSE
   ========================================================================== */
.legal { padding-block: var(--space-6); }
.legal__layout { display: grid; gap: var(--space-5); }
@media (min-width: 980px) {
  .legal__layout { grid-template-columns: 260px 1fr; gap: var(--space-6); align-items: start; }
  .legal__toc { position: sticky; top: 6rem; }
}
.legal__toc {
  border: 1px solid var(--rule);
  background: #fff;
  padding: var(--space-3);
  border-radius: var(--radius);
}
.legal__toc p {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin: 0 0 var(--space-2);
}
.legal__toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; font-size: 0.84rem; }
.legal__toc li { counter-increment: toc; margin-bottom: 0.45rem; }
.legal__toc a { text-decoration: none; color: var(--text-soft); }
.legal__toc a::before { content: counter(toc) ". "; color: var(--brass-dark); font-family: var(--mono); font-size: 0.75em; }
.legal__toc a:hover { color: var(--teal); text-decoration: underline; }

.prose { max-width: 76ch; }
.prose h2 {
  font-size: var(--step-2);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
  scroll-margin-top: 6rem;
}
.prose h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.prose h3 { font-size: var(--step-1); margin-top: var(--space-4); }
.prose p, .prose li { color: var(--text-soft); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: 0.5rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.86rem; margin-bottom: var(--space-4); }
.prose th, .prose td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { background: var(--paper-2); font-family: var(--sans); font-weight: 650; color: var(--ink); }
.prose dl { margin: 0 0 var(--space-4); }
.prose dt { font-weight: 650; color: var(--ink); margin-top: var(--space-2); }
.prose dd { margin: 0.2rem 0 0; color: var(--text-soft); }

.legalnote {
  border: 1px dashed var(--brass);
  background: rgba(192, 160, 100, 0.09);
  padding: var(--space-3);
  border-radius: var(--radius);
  font-size: 0.84rem;
  color: var(--text-soft);
  margin-bottom: var(--space-4);
}
.legalnote strong { color: var(--ink); }

.identity {
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.identity dl { margin: 0; }
.identity div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem;
  padding: 0.85rem var(--space-3);
  border-bottom: 1px solid var(--rule);
}
.identity div:last-child { border-bottom: 0; }
.identity dt {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-dark);
  font-weight: 700;
  margin: 0;
}
.identity dd { margin: 0; color: var(--text); }
@media (min-width: 620px) {
  .identity div { grid-template-columns: 220px 1fr; gap: var(--space-3); align-items: baseline; }
}

/* ==========================================================================
   THANK-YOU PAGE
   ========================================================================== */
.ty {
  background: radial-gradient(120% 100% at 20% 0%, #163033 0%, var(--ink) 60%);
  color: var(--platinum);
  padding-block: var(--space-7);
}
.ty__grid { display: grid; gap: var(--space-5); align-items: center; }
.ty h1 { color: var(--paper); }
.ty__seal {
  width: 92px; height: 92px;
  border: 1px solid var(--brass);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--champagne);
  font-family: var(--serif);
  font-size: 2.1rem;
  margin-bottom: var(--space-4);
}
.ty__figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid rgba(192, 160, 100, 0.3); }
@media (min-width: 900px) { .ty__grid { grid-template-columns: 1fr 0.85fr; gap: var(--space-6); } }

.nextsteps { list-style: none; margin: 0; padding: 0; counter-reset: ns; }
.nextsteps li {
  counter-increment: ns;
  position: relative;
  padding-left: 2.4rem;
  margin-bottom: var(--space-3);
  color: #bccdcb;
  font-size: 0.92rem;
}
.nextsteps li::before {
  content: counter(ns, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--brass);
  border: 1px solid rgba(192, 160, 100, 0.5);
  width: 1.7rem; height: 1.7rem;
  display: grid;
  place-items: center;
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contactgrid { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 980px) { .contactgrid { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-6); } }
.contactcard {
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.contactcard h2, .contactcard h3 { font-size: var(--step-1); margin-bottom: var(--space-2); }
.contactcard a { font-weight: 600; }
.contactcard__hours { list-style: none; padding: 0; margin: 0; font-size: 0.86rem; color: var(--text-soft); }
.contactcard__hours li { display: flex; justify-content: space-between; gap: var(--space-3); border-bottom: 1px dotted var(--rule); padding: 0.4rem 0; }

/* ==========================================================================
   MISC
   ========================================================================== */
.rail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.rail li { margin: 0; display: inline-flex; align-items: center; gap: 0.5rem; }
.rail li::before { content: ""; width: 5px; height: 5px; background: var(--brass); border-radius: 50%; }

.pillrow { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.pillrow li {
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  padding: 0.4rem 0.8rem;
  border-radius: 100px;
  color: var(--text-soft);
  background: #fff;
}
.band--ink .pillrow li, .band--teal .pillrow li {
  background: rgba(221, 228, 227, 0.05);
  border-color: var(--rule-dark);
  color: #bccdcb;
}

.linkgrid { display: grid; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
@media (min-width: 680px) { .linkgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .linkgrid { grid-template-columns: repeat(4, 1fr); } }
.linkgrid a {
  display: block;
  padding: var(--space-3);
  border: 1px solid var(--rule);
  background: #fff;
  text-decoration: none;
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.linkgrid a:hover { border-color: var(--brass); transform: translateY(-2px); }
.linkgrid b { display: block; color: var(--ink); font-family: var(--serif); font-size: var(--step-1); font-weight: 500; }
.linkgrid span { font-size: 0.8rem; color: var(--text-soft); }

.section-head { margin-bottom: var(--space-5); }
.section-head--split { display: grid; gap: var(--space-3); }
@media (min-width: 880px) {
  .section-head--split { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-5); align-items: end; }
}