/* Content sections. No chrome: no cards, pills, or buttons. Every element is
   engraved text stamped on the felt (the stamp comes from the inherited
   text-shadow in base.css). Interactive treatments for links/CTAs come later.
   Hero styles live in hero.css. */

.content-section {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) var(--space-4);
  /* No clip: props bleed onto the continuous felt and across section edges.
     Horizontal overflow is clipped on the body instead. */
}

/* Each section sits inside a hairline gold frame with a diamond ornament
   straddling every corner. Centered content reads as an engraved invitation
   panel on the felt. */
.section-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 64rem);
  margin: 0 auto;
  padding: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4rem);
  border: 4px solid var(--gold-line);
  text-align: center;
  background-image:
    var(--ornament-diamond),
    var(--ornament-diamond),
    var(--ornament-diamond),
    var(--ornament-diamond);
  background-position:
    left -10px top -10px,
    right -10px top -10px,
    left -10px bottom -10px,
    right -10px bottom -10px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
}

.section-shell-split {
  display: grid;
  gap: var(--space-6);
}

/* Ornamental eyebrow: a hairline gold rule fades in from each side toward a
   suit ornament (diamond left, spade right) that frames the engraved label.
   The two pseudo-elements are the rules; the suits are pseudo-elements on the
   inner .kicker-text so all four pieces line up. */
.section-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.85rem, 2.5vw, 1.6rem);
  margin-bottom: var(--space-3);
  font-family: var(--font-eyebrow);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.section-kicker::before,
.section-kicker::after {
  content: "";
  flex: 1 1 0;
  max-width: clamp(2.5rem, 24vw, 15rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 92%);
}

.section-kicker::after {
  background: linear-gradient(90deg, var(--gold) 8%, transparent);
}

.kicker-text {
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  white-space: nowrap;
}

.kicker-text::before,
.kicker-text::after {
  font-size: 0.78em;
  line-height: 1;
  color: var(--gold);
  transform: translateY(-0.04em);
}

.kicker-text::before {
  content: "\2666"; /* black diamond suit */
}

.kicker-text::after {
  content: "\2660"; /* black spade suit */
}

.content-section h2 {
  max-width: 16ch;
  margin: 0 auto var(--space-4);
  /* Engraved Roman caps read tall, so a touch smaller than the slab was. */
  font-size: clamp(2.5rem, 7.5vw, 4.75rem);
  line-height: 1.08;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
}

.section-copy {
  max-width: 38rem;
  margin-inline: auto;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.24;
  color: var(--white-soft);
}

.section-copy-center {
  margin: var(--space-4) auto 0;
  text-align: center;
}

/* The pot split keeps a row rule under the heading and a column divider.
   Choose Your Seat does NOT: its cards are self-framed (see .ticket-card),
   so the ticket grid never gets the divider rules that would fight the
   cards' own borders. */
.split-grid {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-2);
  padding-top: var(--space-6);
  border-top: 4px solid var(--gold-line);
}

.ticket-grid {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

/* Column divider, only between items: horizontal when stacked (mobile). */
.split-grid > * + *,
.section-shell-split > * + * {
  padding-top: var(--space-4);
  border-top: 4px solid var(--gold-line);
}

.sponsor-card {
  padding: var(--space-2) 0;
}

/* Choose Your Seat: each tier is a dealt card, its own gold frame with a
   diamond at every corner. */
.ticket-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 2.5rem);
  border: 2px solid var(--gold-line);
  background-image:
    var(--ornament-diamond),
    var(--ornament-diamond),
    var(--ornament-diamond),
    var(--ornament-diamond);
  background-position:
    left -8px top -8px,
    right -8px top -8px,
    left -8px bottom -8px,
    right -8px bottom -8px;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

.ticket-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-eyebrow);
  font-size: var(--fs-small);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.ticket-badge::before,
.ticket-badge::after {
  content: "\2666"; /* black diamond suit */
  font-size: 0.72em;
}

.ticket-tier {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
}

.ticket-includes {
  max-width: 26ch;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.3;
  color: var(--white-soft);
}

/* Pin the CTA to the bottom so it aligns across both equal-height cards,
   while the badge and tier align at the top. */
.ticket-card .section-button {
  margin-top: auto;
}

.goal-line {
  margin: var(--space-3) 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  /* Lower floor so a long word like "Fundraising" fits small phones. */
  font-size: clamp(2rem, 9vw, 7rem);
  line-height: 1;
  overflow-wrap: break-word;
  color: var(--gold);
}

.section-note {
  margin-top: var(--space-3);
  text-align: center;
  color: var(--gold);
  font-family: var(--font-eyebrow);
  letter-spacing: 0.08em;
}

/* Outline CTA: thin gold rule, transparent fill, fills faintly on hover.
   Same language as the frames, not a glossy pill. */
.section-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: var(--space-3);
  padding: 0.8rem 1.7rem;
  border: 2px solid var(--gold-line);
  border-radius: 2px;
  color: var(--gold);
  font-family: var(--font-eyebrow);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.section-button:hover,
.section-button:focus-visible {
  border-color: var(--gold);
  background-color: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--gold-light);
}

.section-button-large {
  font-size: 1.05rem;
  padding: 0.95rem 2.4rem;
}

/* Inclusion / tier / split labels: engraved gold lines, no pills. */
.inclusion-list,
.tier-list {
  display: grid;
  gap: var(--space-3);
}

.inclusion-list li,
.tier-list li,
.split-grid article {
  text-align: center;
  font-family: var(--font-eyebrow);
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.split-grid article {
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* The Night inclusions: large engraved labels with a gold line-icon, for
   impact. Left-aligned rows (icons line up), the block centered in its column. */
.inclusion-list {
  gap: var(--space-4);
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}

.inclusion-list li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55em;
  font-size: clamp(1.4rem, 3vw, 1.95rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: left;
  /* One line each, so the block stays content-width and centers in the card. */
  white-space: nowrap;
}

.inclusion-icon {
  width: 1.35em;
  height: 1.35em;
  flex: none;
  color: var(--gold);
}

/* Sponsor tiers: large like The Night, each tagged with a diamond marker,
   left-aligned with the block centered in its column. */
.tier-list {
  gap: var(--space-4);
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}

.tier-list li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5em;
  font-size: clamp(1.3rem, 2.8vw, 1.7rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: left;
  white-space: nowrap;
}

.tier-list li::before {
  content: "\2666"; /* black diamond suit */
  flex: none;
  font-size: 0.62em;
  color: var(--gold);
}

.sponsor-card h3 {
  margin-bottom: var(--space-2);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  color: var(--white-soft);
}

.final-shell {
  display: grid;
  justify-items: center;
  text-align: center;
}

.final-shell h2 {
  max-width: 12ch;
  margin-bottom: var(--space-3);
}

/* Footer: stamped text on the felt, no bar. */
.site-footer {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  padding: var(--space-8) var(--space-4);
  color: var(--white-soft);
  text-align: center;
}

.footer-logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2rem);
}

.footer-logo-link {
  display: inline-flex;
  align-items: center;
}

.footer-logo {
  display: block;
  width: auto;
  max-width: min(48vw, 32.5rem);
  max-height: 9.5rem;
  object-fit: contain;
  filter:
    drop-shadow(0 -1px 1px rgb(255 244 214 / 0.18))
    drop-shadow(0 2px 3px rgb(0 0 0 / 0.72));
}

.footer-logo-dd {
  height: clamp(4.3rem, 9.45vw, 7.85rem);
}

.footer-logo-kxk {
  height: clamp(4.05rem, 8.9vw, 7.3rem);
}

.footer-logo-x {
  color: var(--gold);
  font-family: var(--font-eyebrow);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1;
}

.footer-email {
  display: inline-block;
  font-family: var(--font-eyebrow);
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  color: var(--gold);
  transition: color 0.3s ease;
}

.footer-email:hover {
  color: var(--gold-light);
}

@media (min-width: 768px) {
  .section-shell-split,
  .ticket-grid,
  .split-grid {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }

  /* Swap the stacked horizontal divider for a vertical center rule. */
  .split-grid > * + *,
  .section-shell-split > * + * {
    padding-top: 0;
    border-top: 0;
  }

  .section-shell-split::before,
  .split-grid::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    transform: translateX(-50%);
    background: linear-gradient(
      180deg,
      transparent,
      var(--gold-line) 14%,
      var(--gold-line) 86%,
      transparent
    );
  }
}

/* Choose Your Seat sits as two self-framed cards on the felt, so it drops the
   outer section frame and all the inner grid dividers. */
.section-tickets .section-shell {
  border: 0;
  padding: 0;
  background-image: none;
}

@media (min-width: 768px) {
  /* Stretch both cards to equal height so the two frames match exactly. */
  .section-tickets .ticket-grid {
    align-items: stretch;
  }
}

/* Table props scattered behind each section's content, clipped at the edges,
   all lit from the upper-left via the shared --prop-shadow. */
.section-prop {
  position: absolute;
  /* Above the text: the type is stamped into the felt, the props rest on top. */
  z-index: 2;
  pointer-events: none;
  user-select: none;
  filter: var(--prop-shadow);
}

/* One scale for the whole table: a card reads ~1.5x a chip, like the real
   props. Size comes from the type class; pos-* classes only place them. */
.prop-chip {
  z-index: 3;
  width: clamp(3.4rem, 5vw, 5.2rem);
}
.prop-card {
  z-index: 3;
  width: clamp(7.8rem, 11vw, 12.5rem);
}
.prop-fan {
  z-index: 3;
  width: clamp(11rem, 17vw, 20rem);
}
.prop-transition {
  width: clamp(12rem, 18vw, 21rem);
}
.prop-chip-pile {
  z-index: 2;
  width: clamp(7rem, 10.5vw, 12rem);
}
.prop-money {
  z-index: 5;
  width: clamp(14rem, 20vw, 23rem);
}
.prop-bills {
  width: clamp(15rem, 22vw, 25rem);
}
.prop-dice {
  z-index: 6;
  width: clamp(1.9rem, 2.7vw, 3.2rem);
}
.prop-sign {
  z-index: 3;
  width: clamp(10rem, 16vw, 19rem);
}

/* Props rest near the corners, mostly on-screen (only a small bleed off the
   sides, which the body clips). */

/* Choose Your Seat */
.pos-tickets-cards { left: clamp(0.5rem, 2vw, 2rem); bottom: clamp(1.5rem, 4vw, 4rem); transform: rotate(-8deg); }
.pos-tickets-king  { right: clamp(1rem, 3vw, 3rem); top: clamp(2.5rem, 5vw, 5rem); transform: rotate(12deg); }
.pos-tickets-chip  { left: clamp(1.5rem, 5vw, 6rem); top: clamp(3rem, 6vw, 6rem); transform: rotate(-8deg); }
.pos-tickets-die   { right: clamp(2rem, 6vw, 7rem); bottom: clamp(3rem, 6vw, 6rem); transform: rotate(-14deg); }

/* The Night */
.pos-night-cards { left: clamp(1rem, 3vw, 3rem); top: clamp(2rem, 5vw, 5rem); transform: rotate(7deg); }
.pos-night-chip  { left: clamp(1.5rem, 5vw, 6rem); bottom: clamp(3rem, 6vw, 6rem); transform: rotate(10deg); }
.pos-night-die-a { right: clamp(2rem, 6vw, 7rem); bottom: clamp(3rem, 6vw, 6rem); transform: rotate(12deg); }
.pos-night-die-b { right: clamp(4.5rem, 11vw, 12rem); bottom: clamp(5rem, 10vw, 10rem); transform: rotate(-16deg); }

/* The Pot */
.pos-pot-money  { left: clamp(0.5rem, 2vw, 2rem); bottom: clamp(3rem, 6vw, 6rem); transform: rotate(-5deg); }
.pos-pot-chips  { right: clamp(0.5rem, 2vw, 2rem); top: clamp(2rem, 5vw, 5rem); transform: rotate(6deg); }
.pos-pot-chip-a { left: clamp(1.5rem, 5vw, 6rem); top: clamp(3rem, 6vw, 6rem); transform: rotate(-8deg); }
.pos-pot-chip-b { right: clamp(2rem, 6vw, 7rem); bottom: clamp(3rem, 6vw, 6rem); transform: rotate(10deg); }
.pos-pot-ace    { right: clamp(1rem, 4vw, 5rem); top: clamp(8rem, 20vw, 15rem); transform: rotate(13deg); }

/* Sponsor the Table */
.pos-sponsors-chips  { right: clamp(0.5rem, 2vw, 2rem); bottom: clamp(3rem, 6vw, 6rem); transform: rotate(8deg); }
.pos-sponsors-chip-a { left: clamp(1.5rem, 5vw, 6rem); top: clamp(3rem, 6vw, 6rem); transform: rotate(-9deg); }
.pos-sponsors-chip-b { left: clamp(2.5rem, 7vw, 8rem); bottom: clamp(3rem, 6vw, 6rem); transform: rotate(12deg); }
.pos-sponsors-chip-c { right: clamp(2rem, 8vw, 9rem); top: clamp(4rem, 9vw, 9rem); transform: rotate(-7deg); }
.pos-sponsors-thanks { right: clamp(0.5rem, 2vw, 2rem); bottom: clamp(0.5rem, 2vw, 2rem); transform: rotate(-4deg); }

/* Final CTA */
.pos-final-cards { left: clamp(1rem, 3vw, 3rem); bottom: clamp(3rem, 6vw, 6rem); transform: rotate(-9deg); }
.pos-final-chips { right: clamp(1rem, 3vw, 3rem); top: clamp(3rem, 7vw, 7rem); transform: rotate(7deg); }
.pos-final-die   { right: clamp(3rem, 8vw, 9rem); bottom: clamp(3rem, 6vw, 6rem); transform: rotate(15deg); }
.pos-final-chip  { left: clamp(1.5rem, 5vw, 6rem); top: clamp(3rem, 6vw, 6rem); transform: rotate(-10deg); }
.pos-final-ace   { right: clamp(1rem, 4vw, 5rem); top: clamp(8rem, 19vw, 14rem); transform: rotate(-12deg); }

/* Between-section props: straddle the boundary, bleeding into the next section
   on the continuous felt (alternating sides). */
.pos-edge-tn { right: clamp(3rem, 8vw, 10rem); bottom: clamp(-8rem, -5vw, -5rem); transform: rotate(8deg); }
.pos-edge-tn-alt { left: clamp(3rem, 8vw, 10rem); bottom: clamp(-7rem, -4.5vw, -4.5rem); transform: rotate(-10deg); }
.pos-edge-np { left: clamp(3rem, 8vw, 10rem); bottom: clamp(-8rem, -5vw, -5rem); transform: rotate(-7deg); }
.pos-edge-np-alt { right: clamp(4rem, 10vw, 12rem); bottom: clamp(-7rem, -4.5vw, -4.5rem); transform: rotate(9deg); }
.pos-edge-ps { right: clamp(3rem, 8vw, 10rem); bottom: clamp(-8rem, -5vw, -5rem); transform: rotate(6deg); }
.pos-edge-ps-alt { left: clamp(4rem, 10vw, 12rem); bottom: clamp(-7rem, -4.5vw, -4.5rem); transform: rotate(-8deg); }
.pos-edge-sf { left: clamp(3rem, 8vw, 10rem); bottom: clamp(-8rem, -5vw, -5rem); transform: rotate(-9deg); }
.pos-edge-sf-alt { right: clamp(4rem, 10vw, 12rem); bottom: clamp(-7rem, -4.5vw, -4.5rem); transform: rotate(7deg); }

/* Per-asset scale corrections. Chip piles need a smaller footprint than card
   stacks, while the 100 stack needs enough size to match the other chips. */
/* Normalize chip piles by real-world scale. The 1000 and 100 piles have large
   printed chips in the artwork, so they render smaller than card stacks. The
   25 pile artwork reads too tiny, so it gets a slight lift. */
.pos-pot-chips,
.pos-sponsors-chips {
  width: clamp(6.6rem, 9.8vw, 11.25rem);
}

.pos-final-chips {
  width: clamp(7.5rem, 11.5vw, 13.5rem);
}

.pos-edge-np-alt {
  width: clamp(8.6rem, 12.8vw, 14.75rem);
}

.pos-edge-sf-alt {
  width: clamp(7.5rem, 11vw, 12.75rem);
}

/* Bills are high objects on the table, so they sit above cards and chips.
   They are placed away from dice so neither top-layer object covers the other. */
.pos-bills-tn { left: 41%; bottom: clamp(-7.5rem, -5vw, -5rem); transform: rotate(5deg); }
.pos-bills-ps { left: 42%; bottom: clamp(-7.5rem, -5vw, -5rem); transform: rotate(-6deg); }

/* Mid props: rise into the empty felt gap above the section, toward the center. */
.pos-mid-tn { left: 24%; top: clamp(-9rem, -6vw, -6rem); transform: rotate(-6deg); }
.pos-mid-np { right: 24%; top: clamp(-9rem, -6vw, -6rem); transform: rotate(7deg); }
.pos-mid-ps { left: 26%; top: clamp(-9rem, -6vw, -6rem); transform: rotate(-8deg); }
.pos-mid-sf { right: 24%; top: clamp(-9rem, -6vw, -6rem); transform: rotate(6deg); }

@media (max-width: 767px) {
  /* On small screens props are hidden by default; a chosen few are re-shown
     below, anchored so they only PEEK in from an edge or section division and
     never sit over the centred copy. The dice are separate (scripts/dice.js)
     and unaffected. */
  .section-prop {
    display: none;
  }

  /* Footer logos stack vertically, with the bigger x between the top and bottom. */
  .footer-logo-row {
    flex-direction: column;
  }

  /* Center the list items so the whole box reads centered on phones (desktop
     keeps them left-aligned with the icons in a column). */
  .inclusion-list,
  .tier-list {
    width: auto;
  }

  .inclusion-list li,
  .tier-list li {
    justify-content: center;
  }

  /* The Night: a card fan peeks from the top-right, a transition fan from the
     bottom-left division. */
  .section-night .pos-night-cards {
    display: block;
    left: auto;
    right: -3.5rem;
    top: 1rem;
    width: 8.5rem;
    transform: rotate(16deg);
  }

  .section-night .pos-edge-np {
    display: block;
    left: -4.5rem;
    right: auto;
    top: auto;
    bottom: -1.5rem;
    width: 10rem;
  }

  /* Tickets: a transition fan peeks from the bottom-left division (the GA/VIP
     cards already fill the section, so just one). */
  .section-tickets .pos-edge-tn {
    display: block;
    left: -4.5rem;
    right: auto;
    top: auto;
    bottom: -2rem;
    width: 10rem;
    transform: rotate(10deg);
  }

  /* The Pot: chips peek top-right, a transition fan from the bottom-left. */
  .section-pot .pos-pot-chips {
    display: block;
    left: auto;
    right: -3.5rem;
    top: 1rem;
    bottom: auto;
    width: 8.5rem;
    transform: rotate(14deg);
  }
  .section-pot .pos-edge-ps {
    display: block;
    left: -4.5rem;
    right: auto;
    top: auto;
    bottom: -2rem;
    width: 10rem;
    transform: rotate(-8deg);
  }

  /* Sponsors: a chips fan peeks top-right, a transition fan from the bottom-left. */
  .section-sponsors .pos-sponsors-chips {
    display: block;
    left: auto;
    right: -3.5rem;
    top: 1.5rem;
    bottom: auto;
    width: 8.5rem;
    transform: rotate(12deg);
  }
  .section-sponsors .pos-edge-sf {
    display: block;
    left: -4.5rem;
    right: auto;
    top: auto;
    bottom: -2rem;
    width: 10rem;
    transform: rotate(-10deg);
  }

  /* Final (short section): a fan peeks from each lower corner. */
  .section-final .pos-final-chips {
    display: block;
    left: auto;
    right: -3.5rem;
    top: 1rem;
    bottom: auto;
    width: 8rem;
    transform: rotate(12deg);
  }
  .section-final .pos-final-cards {
    display: block;
    left: -4rem;
    right: auto;
    top: auto;
    bottom: -1.5rem;
    width: 8.5rem;
    transform: rotate(-10deg);
  }
}