/* =========================================================
   ZUKO
   by mae
   ========================================================= */

  :root {
      --ink: #181512;
      --ink-soft: #29231f;
      --paper: #e9dfcf;
      --paper-light: #f4ecdf;
      --paper-dark: #d8c9b2;
      --red: #9d3026;
      --red-dark: #6e211b;
      --gold: #a58a5d;
      --line: rgba(24, 21, 18, .19);
      --white: #faf5eb;
      --serif: Georgia, "Times New Roman", serif;
      --sans: "Karla", Arial, sans-serif;
      --mono: "Roboto Mono", "Courier New", monospace;
      --shadow: 0 18px 48px rgba(15, 10, 7, .16);
      --content: 1240px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 90px; }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--mono);
      line-height: 1.65;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 20;
      pointer-events: none;
      opacity: .13;
      background: repeating-linear-gradient(
        0deg, transparent 0, transparent 3px, rgba(30,20,10,.05) 4px
      );
    }
    a { color: inherit; }
    a:focus-visible, button:focus-visible, textarea:focus-visible {
      outline: 2px solid var(--red);
      outline-offset: 4px;
    }
    .site { min-height: 100vh; }
    .rail {
      position: fixed;
      inset: 0 auto 0 0;
      z-index: 30;
      width: 116px;
      padding: 24px 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: var(--ink);
      color: var(--paper);
    }
    .rail__seal {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(233,223,207,.55);
      outline: 1px solid rgba(165,138,93,.7);
      outline-offset: -6px;
      font-family: var(--mono);
      font-size: 27px;
      transform: rotate(-4deg);
    }
    .rail__brand {
      margin-top: 20px;
      text-align: center;
      font-family: var(--serif);
      font-size: 17px;
      letter-spacing: .12em;
      line-height: 1.1;
    }
    .rail__brand small {
      display: block;
      margin-top: 7px;
      color: var(--gold);
      font: 8px var(--mono);
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    .rail__nav {
      width: 100%;
      display: grid;
      gap: 7px;
      margin-top: 54px;
    }
    .rail__nav a {
      padding: 10px 3px;
      color: rgba(233,223,207,.64);
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: .13em;
      font: 8px var(--mono);
      transition: color .2s ease, background .2s ease;
    }
    .rail__nav a:hover, .rail__nav a.active {
      color: var(--white);
      background: var(--red);
    }
    .rail__status {
      margin-top: auto;
      color: rgba(233,223,207,.55);
      text-align: center;
      text-transform: uppercase;
      letter-spacing: .12em;
      font: 8px/1.8 var(--mono);
    }
    .rail__status strong {
      display: block;
      color: var(--gold);
      font-size: 10px;
    }
    .mobile-toggle { display: none; }
    main { min-width: 0; margin-left: 116px; }
    .wrap { width: min(100% - 64px, var(--content)); margin-inline: auto; }

    .hero {
      min-height: 680px;
      position: relative;
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: 75px clamp(34px, 7vw, 110px);
      background:
        radial-gradient(circle at 83% 45%, rgba(157,48,38,.10), transparent 30%),
        linear-gradient(115deg, #e9dfcf 0%, #eee5d7 62%, #e4d4c1 100%);
    }

    /* Fire Nation hero treatment */
    .hero {
      isolation: isolate;
      background:
        radial-gradient(ellipse at 76% 82%, rgba(190,65,28,.22), transparent 34%),
        radial-gradient(circle at 84% 38%, rgba(157,48,38,.13), transparent 31%),
        linear-gradient(115deg, #e9dfcf 0%, #eee5d7 56%, #dfc9ad 100%);
    }
    .hero::before, .hero::after {
      z-index: 0;
      pointer-events: none;
      border-color: rgba(157,48,38,.17);
      box-shadow: 0 0 55px rgba(157,48,38,.05), inset 0 0 55px rgba(157,48,38,.035);
    }
    .hero::before { right: -205px; top: -105px; }
    .hero::after { right: -125px; top: -8px; border-color: rgba(165,138,93,.32); }
    .hero__content { z-index: 6; }
    .portrait {
      right: clamp(245px, 10vw, 170px);
      filter: drop-shadow(0 18px 22px rgba(73,30,17,.16));
      isolation: isolate;
    }
    .portrait::before {
      content: "";
      position: absolute;
      z-index: -2;
      left: 50%;
      bottom: 7px;
      width: 390px;
      height: 390px;
      transform: translateX(-50%);
      border: 1px solid rgba(157,48,38,.28);
      border-radius: 50%;
      background:
        radial-gradient(circle, rgba(255,183,87,.25) 0%, rgba(190,65,28,.12) 42%, transparent 69%);
      box-shadow: 0 0 0 16px rgba(157,48,38,.035), 0 0 70px rgba(190,65,28,.16);
    }
    .portrait::after {
      content: "火";
      position: absolute;
      z-index: -1;
      left: 50%;
      bottom: 55px;
      transform: translateX(-50%);
      color: rgba(157,48,38,.11);
      font: 210px/1 Georgia, serif;
      text-shadow: 0 0 28px rgba(190,65,28,.12);
    }
    .portrait__hair { background: linear-gradient(135deg, #242020 0%, #111114 58%, #3c201b 100%); }
    .portrait__face {
      background:
        linear-gradient(100deg, rgba(85,44,32,.2), transparent 35%, rgba(255,255,255,.08)),
        linear-gradient(110deg, #c98e70, #dfa98a 54%, #bd8064);
      box-shadow: inset -12px 0 18px rgba(93,42,27,.09);
    }
    .portrait__scar {
      border-left-color: #84251e;
      filter: drop-shadow(0 0 4px rgba(157,48,38,.2));
    }
    .portrait__scar::after { border-top-color: #84251e; }
    .portrait__body {
      background: linear-gradient(100deg, #211b19 0%, #33201d 52%, #171516 100%);
    }
    .portrait__collar {
      border-left-color: #a93427;
      border-right-color: #a93427;
      filter: drop-shadow(0 0 5px rgba(157,48,38,.25));
    }
    .hero__flame-art {
      position: absolute;
      z-index: 1;
      right: clamp(205px, 8vw, 130px);
      bottom: -4px;
      width: min(54vw, 650px);
      height: min(76%, 560px);
      overflow: visible;
      pointer-events: none;
      opacity: .94;
    }
    .hero__flame-art .flame-back { fill: #9d3026; opacity: .12; }
    .hero__flame-art .flame-mid { fill: #c24a27; opacity: .19; }
    .hero__flame-art .flame-hot { fill: #e18a42; opacity: .23; }
    .hero__flame-art .flame-line {
      fill: none; stroke: #9d3026; stroke-width: 1.2; opacity: .27;
      stroke-linecap: round;
    }
    .hero__ember {
      position: absolute;
      z-index: 4;
      width: 5px; height: 5px;
      border-radius: 50%;
      pointer-events: none;
      background: #c65b2c;
      box-shadow: 0 0 9px 3px rgba(198,91,44,.28);
      animation: ember-drift 5s ease-in-out infinite;
    }
    .hero__ember--one { right: 36%; top: 24%; }
    .hero__ember--two { right: 24%; top: 47%; width: 3px; height: 3px; animation-delay: -1.7s; }
    .hero__ember--three { right: 43%; top: 63%; width: 4px; height: 4px; animation-delay: -3.1s; }
    .hero__ember--four { right: 17%; top: 30%; width: 3px; height: 3px; animation-delay: -2.4s; }
    @keyframes ember-drift {
      0%, 100% { transform: translate3d(0, 0, 0); opacity: .45; }
      50% { transform: translate3d(8px, -18px, 0); opacity: .95; }
    }
    .hero__sigil {
      position: absolute;
      z-index: 3;
      right: clamp(410px, 32vw, 520px);
      top: 70px;
      color: rgba(157,48,38,.45);
      font: 12px var(--mono);
      letter-spacing: .28em;
      text-transform: uppercase;
      writing-mode: vertical-rl;
    }

    .hero::before, .hero::after {
      content: "";
      position: absolute;
      right: -230px;
      top: -100px;
      width: 650px;
      height: 650px;
      border: 1px solid rgba(157,48,38,.14);
      border-radius: 50%;
    }
    .hero::after { right: -160px; top: -25px; width: 500px; height: 500px; }
    .hero__content { position: relative; z-index: 5; max-width: 650px; }
    .eyebrow, .kicker {
      color: var(--red);
      font: 9px var(--mono);
      letter-spacing: .2em;
      text-transform: uppercase;
    }
    .hero h1 {
      margin: 23px 0 0;
      font: normal clamp(90px, 14vw, 170px)/.78 var(--serif);
      letter-spacing: -.085em;
    }
    .hero h1 span {
      display: block;
      margin: 0 0 18px 7px;
      font: 10px var(--mono);
      letter-spacing: .38em;
      color: var(--red);
    }
    .hero__description {
      max-width: 470px;
      margin: 42px 0 25px;
      color: rgba(24,21,18,.72);
      font: 18px/1.65 var(--sans);
    }
    .hero__description a {
      text-decoration-color: var(--red);
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
    }
    .actions { display: flex; flex-wrap: wrap; gap: 10px; }
    .button {
      min-height: 45px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 19px;
      border: 1px solid var(--red);
      background: var(--red);
      color: var(--white);
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: .12em;
      font: 9px var(--mono);
      transition: .2s ease;
    }
    .button:hover { background: var(--red-dark); border-color: var(--red-dark); }
    .button--outline { background: transparent; color: var(--ink); border-color: var(--line); }
    .button--outline:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

    /* Decorative CSS portrait */
    .portrait {
      position: absolute;
      right: clamp(345px, 11vw, 170px);
      bottom: 0;
      width: 340px;
      height: 540px;
      z-index: 2;
      pointer-events: none;
    }
    .portrait__hair {
      position: absolute;
      top: 12px;
      left: 50%;
      width: 245px;
      height: 300px;
      transform: translateX(-50%);
      background: #141416;
      clip-path: polygon(8% 12%,25% 4%,45% 11%,67% 0,88% 15%,100% 39%,91% 52%,95% 76%,76% 68%,61% 81%,50% 68%,37% 84%,27% 68%,11% 75%,17% 52%,0 45%);
    }
    .portrait__face {
      position: absolute;
      top: 112px;
      left: 50%;
      width: 190px;
      height: 260px;
      transform: translateX(-50%);
      border: 2px solid rgba(50,25,18,.24);
      border-radius: 45% 45% 43% 43% / 35% 35% 58% 58%;
      background: linear-gradient(100deg, rgba(85,44,32,.16), transparent 35%, rgba(255,255,255,.05)), #d19a7b;
      z-index: 2;
    }
    .portrait__face::before {
      content: "";
      position: absolute;
      top: -13px;
      left: 7px;
      width: 174px;
      height: 83px;
      background: #141416;
      clip-path: polygon(0 35%,12% 11%,31% 28%,47% 0,61% 26%,77% 9%,100% 35%,91% 61%,72% 53%,58% 71%,42% 49%,25% 65%,10% 51%);
    }
    .portrait__scar {
      position: absolute;
      top: 68px;
      left: 24px;
      width: 57px;
      height: 70px;
      border-left: 8px solid var(--red-dark);
      transform: rotate(17deg);
      z-index: 4;
    }
    .portrait__scar::after {
      content: "";
      position: absolute;
      top: 31px;
      left: -10px;
      width: 58px;
      border-top: 7px solid var(--red-dark);
      transform: rotate(-22deg);
      border-radius: 50%;
    }
    .portrait__eye {
      position: absolute;
      top: 125px;
      width: 37px;
      border-top: 3px solid #241a17;
      z-index: 4;
    }
    .portrait__eye::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 14px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #251a16;
    }
    .portrait__eye--left { left: 33px; transform: rotate(5deg); }
    .portrait__eye--right { right: 28px; transform: rotate(-5deg); }
    .portrait__nose {
      position: absolute;
      top: 132px;
      left: 91px;
      height: 58px;
      border-right: 2px solid rgba(65,32,23,.32);
      transform: rotate(-4deg);
      z-index: 4;
    }
    .portrait__mouth {
      position: absolute;
      top: 205px;
      left: 66px;
      width: 57px;
      height: 13px;
      border-bottom: 2px solid rgba(45,24,19,.55);
      border-radius: 0 0 50% 50%;
      z-index: 4;
    }
    .portrait__neck {
      position: absolute;
      top: 345px;
      left: 50%;
      width: 87px;
      height: 105px;
      transform: translateX(-50%);
      background: #b98568;
    }
    .portrait__body {
      position: absolute;
      bottom: -10px;
      left: 50%;
      width: 340px;
      height: 220px;
      transform: translateX(-50%);
      background: var(--ink-soft);
      clip-path: polygon(29% 0,42% 17%,50% 23%,58% 17%,71% 0,84% 8%,100% 100%,0 100%,16% 8%);
    }
    .portrait__collar {
      position: absolute;
      left: 50%;
      bottom: 102px;
      width: 205px;
      height: 100px;
      transform: translateX(-50%);
      border-left: 3px solid var(--red);
      border-right: 3px solid var(--red);
      clip-path: polygon(0 0,50% 72%,100% 0,84% 100%,16% 100%);
      z-index: 3;
    }
    .listing-stamp {
      position: absolute;
      right: clamp(125px, 4vw, 70px);
      bottom: 38px;
      z-index: 6;
      width: 250px;
      min-height: 160px;
      padding: 30px;
      background: var(--ink);
      color: var(--paper);
      box-shadow: var(--shadow);
      transform: rotate(3deg);
    }
    .listing-stamp::before {
      content: "";
      position: absolute;
      inset: 8px;
      border: 1px solid rgba(233,223,207,.24);
    }
    .listing-stamp small, .listing-stamp strong, .listing-stamp a { position: relative; z-index: 1; }
    .listing-stamp small {
      color: var(--gold);
      text-transform: uppercase;
      letter-spacing: .15em;
      font: 8px var(--sans);
    }
    .listing-stamp strong {
      display: block;
      margin: 18px 0 10px;
      font: normal 35px var(--serif);
    }
    .listing-stamp a {
      font: 8px var(--mono);
      letter-spacing: .08em;
      text-transform: uppercase;
      text-decoration: none;
    }

    .fanlisting-hub {
      padding: 75px clamp(28px, 7vw, 105px) 88px;
      background: var(--paper-light);
      border-top: 1px solid rgba(24,21,18,.08);
    }
    .hub-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 30px;
      margin: 0 auto 32px;
      max-width: var(--content);
    }
    .hub-heading h2 {
      margin: 9px 0 0;
      font: normal clamp(38px, 5vw, 62px)/.98 var(--serif);
      letter-spacing: -.045em;
    }
    .hub-heading p {
      max-width: 360px;
      margin: 0 0 3px;
      color: rgba(24,21,18,.62);
      font: 14px/1.7 var(--sans);
    }
    .hub-grid {
      width: min(100%, var(--content));
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }
    .hub-card {
      position: relative;
      min-height: 235px;
      padding: clamp(24px, 3vw, 36px);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      overflow: hidden;
      border: 1px solid var(--line);
      background: #eee5d7;
      box-shadow: 0 7px 20px rgba(24,21,18,.035);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .hub-card:hover {
      transform: translateY(-4px);
      border-color: rgba(157,48,38,.45);
      box-shadow: 0 15px 30px rgba(24,21,18,.09);
    }
    .hub-card::after {
      content: "";
      position: absolute;
      right: -35px;
      bottom: -70px;
      width: 170px;
      height: 170px;
      border: 1px solid rgba(157,48,38,.12);
      border-radius: 50%;
      pointer-events: none;
    }
    .hub-card__top {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 26px;
    }
    .hub-card__icon {
      width: 31px;
      height: 31px;
      color: var(--red);
    }
    .hub-card__number {
      color: rgba(24,21,18,.38);
      font: 9px var(--mono);
      letter-spacing: .14em;
    }
    .hub-card h3 {
      margin: 0 0 8px;
      font: normal 25px/1.1 var(--serif);
    }
    .hub-card p {
      max-width: 420px;
      margin: 0;
      color: rgba(24,21,18,.67);
      font: 14px/1.75 var(--sans);
    }
    .hub-card__link {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-top: auto;
      padding-top: 23px;
      color: var(--red);
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: .13em;
      font: 9px var(--sans);
    }
    .hub-card__link:hover { color: var(--red-dark); text-decoration: underline; text-underline-offset: 4px; }
    .hub-card--stats {
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink);
    }
    .hub-card--stats p { color: rgba(233,223,207,.75); }
    .hub-card--stats .hub-card__number { color: rgba(233,223,207,.48); }
    .hub-card--stats .hub-card__icon { color: var(--gold); }
    .hub-card--stats .hub-card__link { color: #d7b98b; }
    .hub-card--stats::after { border-color: rgba(165,138,93,.22); }
    .hub-card--stats h3 { color: var(--paper-light); }
    .hub-card--join { background: #e6d8c5; }
    .hub-cta {
      width: min(100%, var(--content));
      margin: 16px auto 0;
      padding: clamp(30px, 5vw, 52px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      background: var(--red-dark);
      color: var(--paper-light);
    }
    .hub-cta__copy { max-width: 650px; }
    .hub-cta__kicker {
      color: #d7b98b;
      text-transform: uppercase;
      letter-spacing: .17em;
      font: 9px var(--mono);
    }
    .hub-cta h2 {
      margin: 12px 0 8px;
      font: normal clamp(34px, 4.8vw, 55px)/1 var(--serif);
      letter-spacing: -.04em;
    }
    .hub-cta p {
      margin: 0;
      color: rgba(244,236,223,.78);
      font: 15px/1.7 var(--sans);
    }
    .hub-cta .button {
      flex: 0 0 auto;
      border-color: var(--paper-light);
      background: transparent;
      color: var(--paper-light);
    }
    .hub-cta .button:hover { background: var(--paper-light); color: var(--ink); }

    .codes {
      padding: 88px clamp(28px, 7vw, 105px) 100px;
      background: var(--paper);
    }
    .section-heading { width: min(100%, var(--content)); margin: 0 auto; }
    .section-heading h2 {
      margin: 12px 0 0;
      font: normal clamp(42px, 6vw, 76px)/.95 var(--serif);
      letter-spacing: -.05em;
    }
    .section-heading p {
      max-width: 580px;
      margin: 20px 0 0;
      color: rgba(24,21,18,.66);
      font: 16px/1.7 var(--sans);
    }
    .codes__grid {
      width: min(100%, var(--content));
      margin: 42px auto 0;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }
    .code-card {
      min-width: 0;
      padding: 22px;
      border: 1px solid var(--line);
      background: var(--paper-light);
    }
    .button-preview {
      width: 88px;
      height: 31px;
      display: grid;
      place-items: center;
      margin-bottom: 18px;
      border: 1px solid var(--gold);
      background: var(--ink);
      color: var(--paper);
      font: 9px var(--serif);
      letter-spacing: .1em;
    }
    .button-preview--red { background: var(--red); }
    .button-preview--paper { background: var(--paper); color: var(--ink); border-color: var(--ink); }
    .code-card strong { display: block; font: normal 21px var(--serif); }
    .code-card small {
      display: block;
      margin-top: 3px;
      color: rgba(24,21,18,.52);
      text-transform: uppercase;
      letter-spacing: .1em;
      font: 8px var(--mono);
    }
    .code-card textarea {
      display: block;
      width: 100%;
      min-height: 82px;
      margin-top: 16px;
      padding: 10px;
      resize: vertical;
      border: 1px solid var(--line);
      border-radius: 0;
      background: #e9dfcf;
      color: rgba(24,21,18,.72);
      font: 10px/1.5 var(--mono);
    }
    .copy-button {
      margin-top: 10px;
      padding: 9px 12px;
      border: 1px solid var(--line);
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: .1em;
      font: 8px var(--mono);
    }
    .copy-button:hover { background: var(--ink); color: var(--paper); }

    footer {
      padding: 58px clamp(28px, 7vw, 105px) 26px;
      background: var(--ink);
      color: var(--paper);
    }
    .footer__main, .footer__bottom {
      width: min(100%, var(--content));
      margin-inline: auto;
      display: flex;
      justify-content: space-between;
      gap: 35px;
    }
    .footer__main { align-items: flex-start; padding-bottom: 42px; }
    .footer__title {
      font: normal clamp(38px, 5vw, 55px)/.9 var(--serif);
      letter-spacing: -.05em;
    }
    .footer__text {
      max-width: 350px;
      margin: 0;
      color: rgba(233,223,207,.58);
      font-size: 12px;
    }
    .footer__bottom {
      padding-top: 17px;
      border-top: 1px solid rgba(233,223,207,.16);
      color: rgba(233,223,207,.42);
      text-transform: uppercase;
      letter-spacing: .08em;
      font: 8px/1.7 var(--mono);
    }

    @media (max-width: 1050px) {
      .rail { width: 88px; }
      main { margin-left: 88px; }
      .portrait { right: -5px; opacity: .82; transform: scale(.9); transform-origin: bottom right; }
      .hero__flame-art { right: -30px; width: 66vw; opacity: .75; }
      .hero__sigil { right: 360px; }
      .hero__content { max-width: 570px; }
      .listing-stamp { right: 20px; }
    }
    @media (max-width: 760px) {
      html { scroll-padding-top: 72px; }
      .rail {
        inset: 0 0 auto;
        width: 100%;
        height: 64px;
        padding: 8px 16px;
        flex-direction: row;
        justify-content: flex-start;
      }
      .rail__seal { width: 43px; height: 43px; font-size: 21px; }
      .rail__brand { margin: 0 0 0 13px; text-align: left; font-size: 15px; }
      .rail__brand small { display: inline; margin-left: 5px; }
      .rail__nav {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        width: 100%;
        margin: 0;
        padding: 10px;
        grid-template-columns: repeat(3, 1fr);
        background: var(--ink);
        border-top: 1px solid rgba(233,223,207,.15);
      }
      .rail.is-open .rail__nav { display: grid; }
      .rail__nav a { padding: 13px 4px; }
      .rail__status { display: none; }
      .mobile-toggle {
        display: block;
        width: 48px;
        height: 42px;
        margin-left: auto;
        border: 1px solid rgba(233,223,207,.32);
        background: transparent;
        color: var(--paper);
        cursor: pointer;
        font: 8px var(--mono);
      }
      main { margin: 64px 0 0; }
      .hero { min-height: 740px; padding: 56px 25px 190px; align-items: flex-start; }
      .hero h1 { font-size: clamp(78px, 21vw, 125px); }
      .hero__description { max-width: 400px; font-size: 16px; }
      .portrait { right: -75px; bottom: 0; transform: scale(.78); transform-origin: bottom right; opacity: .78; }
      .hero__flame-art { right: -110px; bottom: 0; width: 100vw; height: 48%; opacity: .62; }
      .hero__sigil { display: none; }
      .hero__ember--one { right: 28%; top: 48%; }
      .listing-stamp { right: 18px; bottom: 22px; width: 148px; min-height: 137px; padding: 17px; }
      .listing-stamp strong { margin: 13px 0 8px; font-size: 28px; }
      .hub-heading { display: block; }
      .hub-heading p { margin-top: 16px; }
      .hub-grid { grid-template-columns: 1fr; }
      .hub-card { min-height: 210px; }
      .hub-cta { display: block; }
      .hub-cta .button { margin-top: 22px; }
      .codes__grid { grid-template-columns: 1fr; }
      .footer__main { display: block; }
      .footer__text { margin-top: 22px; }
      .footer__bottom { display: block; }
      .footer__bottom span { display: block; margin-top: 7px; }
    }
    @media (max-width: 430px) {
      .hero { min-height: 720px; }
      .hero__actions { width: 220px; flex-direction: column; align-items: stretch; }
      .hero__actions .button { width: 100%; }
      .portrait { right: -120px; opacity: .68; }
      .hero__flame-art { right: -155px; width: 125vw; opacity: .5; }
      .listing-stamp { width: 140px; }
      .wrap { width: min(100% - 40px, var(--content)); }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition-duration: .01ms !important; }
    }

/* =========================================================
   JOIN PAGE — scoped additions; shared site layout above is unchanged
   ========================================================= */
.join-page,.members-page { max-width:1120px; margin:0 auto; padding:22px 28px 82px; color:var(--ink); }
.join-banner,.members-banner { position:relative; min-height:310px; padding:clamp(38px,6vw,68px); display:flex; align-items:center; justify-content:space-between; gap:32px; overflow:hidden; background:var(--red-dark); color:var(--paper-light); }
.join-banner__content,.members-banner__copy { position:relative; z-index:1; max-width:650px; }
.join-banner__eyebrow,.join-intro__eyebrow,.join-form-panel__top,.join-banner__note,.join-banner__seal span,
.members-banner__eyebrow,.members-intro__eyebrow,.members-registry__top,.members-banner__note,.members-banner__seal span,
.members-registry__index,.members-bottom-cta__eyebrow { text-transform:uppercase; letter-spacing:.14em; font:9px var(--mono); }
.join-banner__eyebrow,.members-banner__eyebrow { color:#d7b98b; }
.join-banner h1,.members-banner h1 { margin:19px 0 16px; font:normal clamp(48px,7vw,78px)/.94 var(--serif); letter-spacing:-.045em; }
.join-banner h1 em,.members-banner h1 em { color:#d7b98b; font-weight:normal; }
.join-banner__content>p,.members-banner__copy>p { max-width:510px; margin:0; color:rgba(244,236,223,.78); font:14px/1.8 var(--sans); }
.join-banner__rule,.members-banner__rule { display:block; width:58px; height:1px; margin:25px 0 14px; background:#d7b98b; }
.join-banner__note,.members-banner__note { color:rgba(244,236,223,.62); font-size:8px; }
.join-banner__ornament,.members-banner__ornament { position:absolute; right:18%; bottom:-115px; color:rgba(255,255,255,.045); font:390px/1 Georgia,serif; pointer-events:none; }
.join-banner__seal,.members-banner__seal { position:relative; z-index:1; flex:0 0 142px; width:142px; height:142px; border:1px solid rgba(215,185,139,.6); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#d7b98b; text-align:center; }
.join-banner__seal strong,.members-banner__seal strong { font:60px/.9 Georgia,serif; }
.join-banner__seal span,.members-banner__seal span { font-size:6px; }
.join-content,.members-content { padding-top:54px; }
.join-intro,.members-intro { max-width:700px; margin-bottom:28px; }
.join-intro__eyebrow,.members-intro__eyebrow { color:var(--red); }
.join-intro h2,.members-intro h2 { margin:12px 0 10px; font:normal clamp(32px,4vw,45px)/1.05 var(--serif); }
.join-intro p,.members-intro p { margin:0; color:rgba(24,21,18,.67); font:14px/1.75 var(--sans); }
.join-form-panel,.members-registry { border:1px solid rgba(24,21,18,.17); background:rgba(255,255,255,.25); }
.join-form-panel__top,.members-registry__top { min-height:45px; padding:0 22px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid rgba(24,21,18,.13); color:rgba(24,21,18,.68); }
.join-form-panel__index,.members-registry__index { color:var(--red); font-size:8px; }
.join-form-panel__body,.members-registry__body { padding:clamp(20px,4vw,38px); }
.join-form-panel__body table,.members-registry__body table { max-width:100%; border-collapse:collapse; }
.join-form-panel__body td,.join-form-panel__body th,.members-registry__body td,.members-registry__body th { padding:9px 12px 9px 0; vertical-align:top; }
.join-form-panel__body label { display:inline-block; margin-bottom:6px; color:rgba(24,21,18,.72); text-transform:uppercase; letter-spacing:.1em; font:8px var(--mono); }
.join-form-panel__body input:not([type=submit]):not([type=hidden]),.join-form-panel__body select,.join-form-panel__body textarea { max-width:100%; min-height:40px; padding:9px 11px; border:1px solid rgba(24,21,18,.22); border-radius:0; background:#fbf6ed; color:var(--ink); font:13px var(--sans); }
.join-form-panel__body input[type=submit],.join-form-panel__body button { min-height:42px; padding:0 18px; border:1px solid var(--red); border-radius:0; background:var(--red); color:var(--white); cursor:pointer; text-transform:uppercase; letter-spacing:.12em; font:8px var(--mono); }
.join-form-panel__body input[type=submit]:hover,.join-form-panel__body button:hover { background:var(--red-dark); }
.join-form-panel__foot,.members-registry__foot { padding:15px 22px; display:flex; align-items:center; gap:11px; border-top:1px solid rgba(24,21,18,.12); color:rgba(24,21,18,.58); }
.join-form-panel__foot span,.members-registry__foot span { color:var(--red); }
.join-form-panel__foot p,.members-registry__foot p { margin:0; font:12px/1.5 var(--sans); }
.members-intro { max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.members-join-link,.members-bottom-cta a { color:var(--red); text-decoration:none; font:9px var(--mono); text-transform:uppercase; letter-spacing:.1em; }
.members-join-link:hover { text-decoration:underline; text-underline-offset:4px; }
.members-bottom-cta { margin-top:44px; padding:34px; border:1px solid rgba(24,21,18,.17); background:rgba(255,255,255,.2); text-align:center; }
.members-bottom-cta__eyebrow { color:var(--red); }
.members-bottom-cta h2 { margin:12px 0 8px; font:normal clamp(28px,4vw,38px) var(--serif); }
.members-bottom-cta p { margin:0 0 18px; color:rgba(24,21,18,.65); font:13px var(--sans); }
.members-bottom-cta a { display:inline-block; padding:13px 18px; background:var(--red); color:var(--white); }
.members-bottom-cta a:hover { background:var(--red-dark); }
.members-notice { padding:30px 20px; text-align:center; }
.members-notice__mark { color:var(--red); font:38px Georgia,serif; }
.members-notice h3 { margin:12px 0 8px; font:normal 27px var(--serif); }
.members-notice p { max-width:620px; margin:0 auto; color:rgba(24,21,18,.65); font:13px/1.75 var(--sans); }
.members-notice code { padding:2px 4px; background:rgba(24,21,18,.07); overflow-wrap:anywhere; }
@media(max-width:760px) { .join-page,.members-page{padding:12px 16px 64px}.join-banner,.members-banner{min-height:0;padding:38px 27px}.join-banner__seal,.members-banner__seal{flex-basis:92px;width:92px;height:92px}.join-banner__seal strong,.members-banner__seal strong{font-size:42px}.join-banner__seal span,.members-banner__seal span{font-size:5px}.join-banner__ornament,.members-banner__ornament{right:4%;bottom:-65px;font-size:230px}.join-content,.members-content{padding-top:48px} }
@media(max-width:560px) { .join-banner,.members-banner{display:block;padding:34px 23px 42px}.join-banner__seal,.members-banner__seal{display:none}.join-banner h1,.members-banner h1{font-size:clamp(47px,13vw,65px)}.join-form-panel__top,.members-registry__top{padding-inline:14px}.join-form-panel__index,.members-registry__index{font-size:7px}.join-form-panel__body,.members-registry__body{padding:18px 13px;overflow-x:auto}.join-form-panel__body table,.members-registry__body table{min-width:0}.join-form-panel__foot,.members-registry__foot{align-items:flex-start}.members-intro{display:block}.members-join-link{display:inline-block;margin-top:16px}.members-bottom-cta{padding:25px 16px} }

/* Update Your Info page */
.update-page { max-width:1120px; margin:0 auto; padding:22px 28px 82px; color:var(--ink); }
.update-banner { position:relative; min-height:310px; padding:clamp(38px,6vw,68px); display:flex; align-items:center; justify-content:space-between; gap:32px; overflow:hidden; background:var(--red-dark); color:var(--paper-light); }
.update-banner__content { position:relative; z-index:1; max-width:650px; }
.update-banner__eyebrow,.update-intro__eyebrow,.update-bottom-links,.update-form-panel__top,.update-banner__note,.update-banner__seal span { text-transform:uppercase; letter-spacing:.14em; font:9px var(--mono); }
.update-banner__eyebrow { color:#d7b98b; }
.update-banner h1 { margin:19px 0 16px; font:normal clamp(48px,7vw,78px)/.94 var(--serif); letter-spacing:-.045em; }
.update-banner h1 em { color:#d7b98b; font-weight:normal; }
.update-banner__content>p { max-width:510px; margin:0; color:rgba(244,236,223,.78); font:14px/1.8 var(--sans); }
.update-banner__rule { display:block; width:58px; height:1px; margin:25px 0 14px; background:#d7b98b; }
.update-banner__note { color:rgba(244,236,223,.62); font-size:8px; }
.update-banner__ornament { position:absolute; right:18%; bottom:-115px; color:rgba(255,255,255,.045); font:390px/1 Georgia,serif; pointer-events:none; }
.update-banner__seal { position:relative; z-index:1; flex:0 0 142px; width:142px; height:142px; border:1px solid rgba(215,185,139,.6); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#d7b98b; text-align:center; }
.update-banner__seal strong { font:60px/.9 Georgia,serif; }
.update-banner__seal span { font-size:6px; }
.update-content { padding-top:54px; }
.update-intro { max-width:700px; margin-bottom:28px; }
.update-intro__eyebrow { color:var(--red); }
.update-intro h2 { margin:12px 0 10px; font:normal clamp(32px,4vw,45px)/1.05 var(--serif); }
.update-intro p { margin:0; color:rgba(24,21,18,.67); font:14px/1.75 var(--sans); }
.update-form-panel { border:1px solid rgba(24,21,18,.17); background:rgba(255,255,255,.25); }
.update-form-panel__top { min-height:45px; padding:0 22px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid rgba(24,21,18,.13); color:rgba(24,21,18,.68); }
.update-form-panel__index { color:var(--red); font-size:8px; }
.update-form-panel__body { padding:clamp(20px,4vw,38px); }
.update-form-panel__body table { max-width:100%; border-collapse:collapse; }
.update-form-panel__body td,.update-form-panel__body th { padding:9px 12px 9px 0; vertical-align:top; }
.update-form-panel__body label { display:inline-block; margin-bottom:6px; color:rgba(24,21,18,.72); text-transform:uppercase; letter-spacing:.1em; font:8px var(--mono); }
.update-form-panel__body input:not([type=submit]):not([type=hidden]),.update-form-panel__body select,.update-form-panel__body textarea { max-width:100%; min-height:40px; padding:9px 11px; border:1px solid rgba(24,21,18,.22); border-radius:0; background:#fbf6ed; color:var(--ink); font:13px var(--sans); }
.update-form-panel__body textarea { min-height:100px; }
.update-form-panel__body input[type=submit],.update-form-panel__body button { min-height:42px; padding:0 18px; border:1px solid var(--red); border-radius:0; background:var(--red); color:var(--white); cursor:pointer; text-transform:uppercase; letter-spacing:.12em; font:8px var(--mono); }
.update-form-panel__body input[type=submit]:hover,.update-form-panel__body button:hover { background:var(--red-dark); }
.update-form-panel__body a { color:var(--red); text-underline-offset:3px; }
.update-form-panel__foot { padding:15px 22px; display:flex; align-items:center; gap:11px; border-top:1px solid rgba(24,21,18,.12); color:rgba(24,21,18,.58); }
.update-form-panel__foot span { color:var(--red); }
.update-form-panel__foot p { margin:0; font:12px/1.5 var(--sans); }
.update-notice { padding:30px 20px; text-align:center; }
.update-notice__mark { color:var(--red); font:38px Georgia,serif; }
.update-notice h3 { margin:12px 0 8px; font:normal 27px var(--serif); }
.update-notice p { max-width:620px; margin:0 auto 10px; color:rgba(24,21,18,.65); font:13px/1.75 var(--sans); }
.update-notice code { padding:2px 4px; background:rgba(24,21,18,.07); overflow-wrap:anywhere; }
.update-notice .update-notice__help { font-style:italic; }
.update-bottom-links { margin-top:23px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; font-size:8px; }
.update-bottom-links a { color:var(--red); text-decoration:none; }
.update-bottom-links a:hover { color:var(--red-dark); text-decoration:underline; text-underline-offset:3px; }
@media(max-width:760px) { .update-page{padding:12px 16px 64px}.update-banner{min-height:0;padding:38px 27px}.update-banner__seal{flex-basis:92px;width:92px;height:92px}.update-banner__seal strong{font-size:42px}.update-banner__seal span{font-size:5px}.update-banner__ornament{right:4%;bottom:-65px;font-size:230px}.update-content{padding-top:48px} }
@media(max-width:560px) { .update-banner{display:block;padding:34px 23px 42px}.update-banner__seal{display:none}.update-banner h1{font-size:clamp(47px,13vw,65px)}.update-form-panel__top{padding-inline:14px}.update-form-panel__index{font-size:7px}.update-form-panel__body{padding:18px 13px;overflow-x:auto}.update-form-panel__body table{min-width:0}.update-form-panel__foot{align-items:flex-start}.update-bottom-links{display:grid} }

.affiliates-page { max-width:1180px; margin:0 auto; padding:24px 28px 82px; color:var(--ink); }
.affiliates-banner { position:relative; min-height:330px; padding:clamp(38px,6vw,68px); display:flex; align-items:center; justify-content:space-between; gap:30px; overflow:hidden; background:var(--ink); color:#f4ecdf; }
.affiliates-banner__copy { position:relative; z-index:1; max-width:620px; }
.affiliates-kicker,.affiliates-intro__eyebrow { color:#d7b98b; text-transform:uppercase; letter-spacing:.2em; font:8px var(--mono); }
.affiliates-banner h1 { margin:19px 0 16px; font:normal clamp(48px,7vw,78px)/.94 var(--serif); letter-spacing:-.045em; }
.affiliates-banner h1 em { color:#d7b98b; font-weight:normal; }
.affiliates-banner__copy>p { max-width:510px; margin:0; color:rgba(244,236,223,.78); font:14px/1.8 var(--sans); }
.affiliates-banner__rule { display:block; width:58px; height:1px; margin:25px 0 14px; background:#d7b98b; }
.affiliates-banner__note { color:rgba(244,236,223,.62); font:8px var(--mono); letter-spacing:.12em; }
.affiliates-banner__ornament { position:absolute; right:18%; bottom:-115px; color:rgba(255,255,255,.045); font:390px/1 Georgia,serif; pointer-events:none; }
.affiliates-seal { position:relative; z-index:1; flex:0 0 142px; width:142px; height:142px; border:1px solid rgba(215,185,139,.6); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#d7b98b; text-align:center; }
.affiliates-seal strong { font:60px/.9 Georgia,serif; }
.affiliates-seal span { font:6px var(--mono); letter-spacing:.12em; }
.affiliates-content { padding-top:54px; }
.affiliates-intro { max-width:700px; margin-bottom:30px; }
.affiliates-intro__eyebrow { color:var(--red); }
.affiliates-intro h2 { margin:12px 0 10px; font:normal clamp(32px,4vw,45px)/1.05 var(--serif); }
.affiliates-intro p { margin:0; color:rgba(24,21,18,.67); font:14px/1.75 var(--sans); }
.affiliates-empty { position:relative; padding:40px 24px; border:1px solid rgba(24,21,18,.17); background:rgba(255,255,255,.23); text-align:center; }
.affiliates-empty__mark { display:block; margin-bottom:12px; color:var(--red); font:25px Georgia,serif; }
.affiliates-empty__label,.affiliate-card__type { color:var(--red); font:8px var(--mono); letter-spacing:.16em; text-transform:uppercase; }
.affiliates-empty h3 { margin:12px 0 8px; font:normal 28px var(--serif); }
.affiliates-empty p { max-width:590px; margin:0 auto; color:rgba(24,21,18,.65); font:13px/1.75 var(--sans); }
.affiliates-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:20px; }
.affiliate-card { display:flex; align-items:center; gap:18px; padding:20px; border:1px solid rgba(24,21,18,.17); background:rgba(255,255,255,.23); }
.affiliate-card__seal { flex:0 0 62px; width:62px; height:62px; display:grid; place-items:center; border:1px solid rgba(145,39,37,.55); border-radius:50%; color:var(--red); font:normal 20px var(--serif); text-decoration:none; }
.affiliate-card__details h3 { margin:6px 0; font:normal 22px var(--serif); }
.affiliate-card__details h3 a { color:var(--ink); text-decoration:none; }
.affiliate-card__details h3 a:hover { color:var(--red); }
.affiliate-card__details p { margin:0; color:rgba(24,21,18,.65); font:12px/1.6 var(--sans); }
.affiliates-footer-note { display:flex; align-items:center; gap:12px; margin-top:25px; padding:16px 18px; border-top:1px solid rgba(24,21,18,.15); border-bottom:1px solid rgba(24,21,18,.15); color:rgba(24,21,18,.65); }
.affiliates-footer-note span { color:var(--red); }
.affiliates-footer-note p { margin:0; font:12px/1.6 var(--sans); }
.affiliates-bottom-links { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; margin-top:22px; font:8px var(--mono); }
.affiliates-bottom-links a { color:var(--red); text-decoration:none; }
.affiliates-bottom-links a:hover { color:var(--red-dark); text-decoration:underline; text-underline-offset:3px; }
@media(max-width:760px) { .affiliates-page{padding:12px 16px 64px}.affiliates-banner{min-height:0;padding:38px 27px}.affiliates-seal{flex-basis:92px;width:92px;height:92px}.affiliates-seal strong{font-size:42px}.affiliates-banner__ornament{right:4%;bottom:-65px;font-size:230px}.affiliates-content{padding-top:48px} }
@media(max-width:560px) { .affiliates-banner{display:block;padding:34px 23px 42px}.affiliates-seal{display:none}.affiliates-banner h1{font-size:clamp(47px,13vw,65px)}.affiliates-grid{grid-template-columns:1fr}.affiliates-empty{padding:32px 18px}.affiliates-bottom-links{display:grid} }

/* =========================================================
   CODES / BUTTONS PAGE — scoped additions only
   ========================================================= */
.codes-page { padding-top: 54px; }
.codes-page__hero { position:relative; max-width:var(--content); margin:0 auto 58px; padding:clamp(38px,6vw,72px); overflow:hidden; background:var(--red-dark); color:var(--paper-light); }
.codes-page__hero .kicker { position:relative; z-index:1; color:var(--gold); }
.codes-page__hero h1 { position:relative; z-index:1; margin:18px 0 16px; color:var(--paper-light); font:normal clamp(48px,7vw,82px)/.92 var(--serif); letter-spacing:-.05em; }
.codes-page__hero h1 em { color:var(--gold); font-weight:normal; }
.codes-page__hero p { position:relative; z-index:1; max-width:550px; margin:0; color:rgba(244,236,223,.78); font:15px/1.8 var(--sans); }
.codes-page__ornament { position:absolute; right:7%; bottom:-105px; color:rgba(255,255,255,.055); font:300px/1 Georgia,serif; }
.codes-page__intro { width:min(100%,var(--content)); margin:0 auto; }
.codes-page__eyebrow { color:var(--red); text-transform:uppercase; letter-spacing:.16em; font:9px var(--mono); }
.codes-page__intro h2 { margin:12px 0 8px; font:normal clamp(32px,4.5vw,48px)/1 var(--serif); }
.codes-page__intro p { max-width:650px; margin:0; color:rgba(24,21,18,.66); font:14px/1.8 var(--sans); }
.codes-page__listing { width:min(100%,var(--content)); margin:32px auto 0; border:1px solid var(--line); background:var(--paper-light); }
.codes-page__listing-head { display:flex; justify-content:space-between; gap:16px; padding:14px 20px; border-bottom:1px solid var(--line); color:var(--red); text-transform:uppercase; letter-spacing:.12em; font:8px var(--mono); }
.codes-page__listing-body { padding:clamp(18px,4vw,34px); overflow-x:auto; }
.codes-page__listing-body img { max-width:100%; height:auto; }
.codes-page__listing-body table { max-width:100%; border-collapse:collapse; }
.codes-page__listing-body td,.codes-page__listing-body th { padding:10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.codes-page__listing-body input:not([type=submit]),.codes-page__listing-body textarea { max-width:100%; padding:9px; border:1px solid var(--line); border-radius:0; background:var(--paper); color:var(--ink); font:11px/1.5 var(--mono); }
.codes-page__listing-body input[type=submit],.codes-page__listing-body button { padding:10px 14px; border:1px solid var(--red); background:var(--red); color:white; cursor:pointer; text-transform:uppercase; letter-spacing:.1em; font:8px var(--mono); }
.codes-page__listing-body a { color:var(--red); }
.codes-page__note { width:min(100%,var(--content)); margin:28px auto 0; padding:24px 28px; display:flex; align-items:center; gap:18px; border:1px solid var(--line); background:rgba(255,255,255,.24); }
.codes-page__note-mark { color:var(--red); font:32px Georgia,serif; }
.codes-page__note strong { font:normal 21px var(--serif); }
.codes-page__note p { margin:5px 0 0; color:rgba(24,21,18,.65); font:13px/1.65 var(--sans); }
@media(max-width:700px) { .codes-page { padding:42px 18px 65px; } .codes-page__hero { padding:36px 25px; margin-bottom:42px; } .codes-page__listing-head { display:block; } .codes-page__listing-head span { display:block; } .codes-page__listing-head span+span { margin-top:6px; } .codes-page__note { padding:20px; align-items:flex-start; } }