:root {
      --bg: #1f140f;
      --bg-soft: #2a1b14;
      --panel: #f0d9b5;
      --panel-deep: #d6b07b;
      --text-dark: #2a1a12;
      --text-light: #f6ead7;
      --accent: #8f2f1f;
      --accent-soft: #b75a3a;
      --wood: #5a3726;
      --shadow: rgba(0, 0, 0, 0.28);
      --max-width: 1180px;
      --radius: 22px;
      --section-gap: 5rem;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      color: var(--text-light);
      background:
        radial-gradient(circle at top, rgba(183, 90, 58, 0.16), transparent 28%),
        linear-gradient(180deg, #251711 0%, #1c120d 100%);
      line-height: 1.6;
    }

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    a {
      color: inherit;
    }

    .hero {
      --hero-shift: 20px;
      position: relative;
      min-height: 100svh;
      display: grid;
      place-items: end center;
      overflow: hidden;
      background: linear-gradient(rgba(19, 11, 8, 0.22), rgba(19, 11, 8, 0.78));
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: 0px 0;
      background: url('images/home-image.jpg') center calc(50% + var(--hero-shift)) / cover no-repeat;
      transform: scale(1.06);
      will-change: background-position;
      z-index: 0;
    }
    .hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0 0;
      height: 180px;
      background: linear-gradient(to bottom, transparent, rgba(28, 18, 13, 0.96));
      pointer-events: none;
    }

    .hero__content {
      position: relative;
      z-index: 1;
      width: min(92%, 920px);
      margin: 0 auto 5rem;
      padding: 2.25rem 2rem;
      text-align: center;
      border: 1px solid rgba(240, 217, 181, 0.28);
      border-radius: 24px;
      background: rgba(42, 27, 20, 0.68);
      backdrop-filter: blur(6px);
      box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
    }

    .hero__eyebrow {
      margin: 0 0 0.75rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-size: 0.82rem;
      color: #e6c896;
    }

    .hero h1 {
      margin: 0;
      font-size: clamp(2.8rem, 6vw, 5.3rem);
      line-height: 0.95;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--panel);
      text-shadow: 0 4px 18px rgba(0, 0, 0, 0.38);
    }

    .hero p {
      max-width: 44rem;
      margin: 1rem auto 0;
      font-size: clamp(1rem, 1.8vw, 1.2rem);
      color: #f4e5d1;
    }

    .main {
      position: relative;
      width: min(94%, var(--max-width));
      margin: -2rem auto 0;
      padding: 0 0 5rem;
      z-index: 2;
    }

    .intro-card {
      margin: 0 auto 4rem;
      padding: 1.3rem 1.5rem;
      max-width: 880px;
      text-align: center;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(240, 217, 181, 0.16), rgba(214, 176, 123, 0.08));
      border: 1px solid rgba(240, 217, 181, 0.16);
      color: #edd8b8;
      box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
    }

    .rule-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      align-items: stretch;
      margin-bottom: var(--section-gap);
    }

    .rule-row--reverse .rule-row__image {
      order: 2;
    }

    .rule-row--reverse .rule-row__text {
      order: 1;
    }

    .card-panel {
      height: 100%;
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: 0 24px 46px var(--shadow);
    }

    .rule-row__image .card-panel {
      background: #2d1c15;
      border: 1px solid rgba(240, 217, 181, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 420px;
    }

    .rule-row__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .rule-row__text .card-panel {
      padding: 2rem;
      background:
        linear-gradient(180deg, rgba(240, 217, 181, 0.98), rgba(226, 196, 151, 0.96));
      color: var(--text-dark);
      border: 1px solid rgba(90, 55, 38, 0.16);
    }

    .kicker {
      margin: 0 0 0.4rem;
      font-size: 0.84rem;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: var(--accent);
      font-weight: 700;
    }

    h2 {
      margin: 0;
      font-size: clamp(1.9rem, 2.6vw, 2.6rem);
      line-height: 1.05;
      color: #3b2419;
    }

    .subtitle {
      margin: 0.5rem 0 1.25rem;
      font-style: italic;
      color: #7b4b34;
      font-size: 1.1rem;
    }

    .rule-row__text p,
    .rule-row__text li {
      font-size: 1.03rem;
    }

    .rule-row__text ul {
      margin: 1rem 0 0;
      padding-left: 1.2rem;
    }

    .rule-row__text li + li {
      margin-top: 0.45rem;
    }

    .footer {
      padding: 1rem 0 4rem;
      text-align: center;
      color: rgba(246, 234, 215, 0.78);
      font-size: 0.95rem;
    }

    @media (max-width: 900px) {
      .rule-row,
      .rule-row--reverse {
        grid-template-columns: 1fr;
      }

      .rule-row__image,
      .rule-row__text,
      .rule-row--reverse .rule-row__image,
      .rule-row--reverse .rule-row__text {
        order: initial;
      }

      .rule-row__image .card-panel {
        min-height: 280px;
      }

      .rule-row__text .card-panel {
        padding: 1.5rem;
      }

      .intro-card {
        border-radius: 24px;
      }
    }

    .gt-selected {
      background: transparent !important;
    }
    .gt_float_switcher {
      background: rgba(255,255,255,0.8) !important;
    }