/* THREESET landing page — threesetgame.com. Built from Figma 392:3165 (1440 px design width). */
:root {
  --ink: #121212; --cream: #f4eedc; --paper: #f9f4e8; --paper2: #f1e9d8; --muted: #d6cfbd; --dim: #a9a290;
  --dark: #1a1816; --black: #0e0d0c; --gold: #e2b85a; --gold-rule: #c9a24e; --bronze: #b8862b; --red: #e0231c;
  --gold-grad: linear-gradient(180deg, #fbe7a6 0%, #e2b85a 40%, #b8862b 100%);
  --cond: 'Oswald', 'Arial Narrow', sans-serif; --sans: 'Montserrat', system-ui, sans-serif; --heavy: 'Archivo Black', 'Arial Black', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--dark); color: var(--ink); font-family: var(--sans); font-weight: 500; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; }
a { color: inherit; }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 72px; }
.gold { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gold-flat { color: var(--gold); }
.bronze { color: var(--bronze); }
.red { color: var(--red); }
.eyebrow { margin: 0; font: 800 13px var(--sans); letter-spacing: .22em; color: var(--gold); }
.eyebrow.red { color: var(--red); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cta { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; height: 62px; padding: 0 30px; border: 0; border-radius: 8px; background: var(--red); color: #fff; font: 800 14px var(--sans); letter-spacing: .1em; text-decoration: none; cursor: pointer; transition: transform .15s, filter .15s; }
.cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cta.small { height: 50px; }

/* the THREESET mark: three stacked layers from the Figma logo component */
.logo { position: relative; display: inline-block; aspect-ratio: 1323 / 1189; }
/* each part: gold fill cut to the shape, with the metal render blended over it (Figma: Colour + Shading/overlay) */
.logo .part { position: absolute; inset: 0; isolation: isolate; -webkit-mask: var(--m) 0 0 / 100% 100% no-repeat; mask: var(--m) 0 0 / 100% 100% no-repeat; }
.logo .part::before { content: ''; position: absolute; inset: 0; background: #e3a81c; }
.logo .part::after { content: ''; position: absolute; inset: 0; background: var(--m) 0 0 / 100% 100% no-repeat; mix-blend-mode: overlay; }
.logo .part.l { --m: url(/assets/logo-left.webp); }
.logo .part.c { --m: url(/assets/logo-centre.webp); }
.logo .part.r { --m: url(/assets/logo-right.webp); }

/* a card render includes the print margin: the frame clips it to the card face */
.card { position: absolute; margin: 0; overflow: hidden; aspect-ratio: 236 / 330.4; border-radius: 5.3% / 3.79%; }
.card img { position: absolute; width: 115%; max-width: none; left: -7.5%; top: -7.5%; }
.card.cream { background: var(--cream); }

/* ---------------- hero ---------------- */
.hero { position: relative; overflow: hidden; background: var(--dark); color: var(--cream); }
.hero .deco, .signup .deco { position: absolute; inset: 0; pointer-events: none; }
.hero .deco > * { position: absolute; max-width: none; }
.hero .spot { left: calc(50% - 720px + 300px); top: -140px; width: 1620px; }
.hero .ring.r1 { left: calc(50% - 720px + 540px); top: -140px; width: 1160px; }
.hero .ring.r2 { left: calc(50% - 720px + 705px); top: 25px; width: 830px; }
.hero .ring.r3 { left: -340px; top: -340px; width: 680px; }
.hero .ring.r4 { left: -340px; top: 760px; width: 680px; }
.nav { position: relative; display: flex; align-items: center; justify-content: space-between; padding-top: 22px; padding-bottom: 22px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand .logo { width: 46px; }
.brand .word { font: 30px var(--heavy); letter-spacing: -.03em; color: var(--cream); }
.links { display: flex; align-items: center; gap: 32px; }
.links a:not(.cta) { font: 800 13px var(--sans); letter-spacing: .12em; text-decoration: none; color: var(--cream); }
.links a:not(.cta):hover { color: var(--gold); }
.hero-body { position: relative; display: flex; align-items: center; gap: 56px; padding-top: 48px; padding-bottom: 96px; }
.hero .copy { width: 600px; flex: none; }
.hero h1 { margin: 18px 0 0; font: 700 60px/1.1 var(--cond); letter-spacing: .02em; }
.hero .tag { margin: 22px 0 0; font: 700 30px var(--cond); letter-spacing: .05em; }
.hero .lead { margin: 14px 0 0; max-width: 560px; font: 800 19px/1.45 var(--sans); }
.hero .body { margin: 16px 0 34px; max-width: 560px; font: 500 18px/1.5 var(--sans); color: var(--muted); }
.hero .fine { margin: 14px 0 0; font-size: 13px; color: var(--dim); }
.facts { display: flex; align-items: center; gap: 22px; margin-top: 34px; flex-wrap: wrap; }
.suits { display: flex; align-items: center; gap: 16px; }
.suits img { width: 31px; }
.suits img.eye { width: 40px; }
.factline { font: 800 12px var(--sans); letter-spacing: .16em; color: var(--muted); }
.fan { position: relative; flex: none; }
.hero-fan { width: 640px; aspect-ratio: 640 / 560; }
.hero-fan .ghost { position: absolute; left: 14.06%; top: 5.36%; width: 71.875%; opacity: .22; }
.hero-fan .card { box-shadow: 0 26px 60px rgba(0, 0, 0, .6); }
.hero-fan .l { left: 7.96%; top: 29.66%; width: 36.875%; transform: rotate(-16deg); }
.hero-fan .r { left: 54.67%; top: 29.66%; width: 36.875%; transform: rotate(16deg); }
.hero-fan .c { left: 29.53%; top: 5.71%; width: 40.94%; }
.rules i { display: block; }
.rules .g { height: 5px; background: var(--gold-rule); }
.rules .gap { height: 7px; background: #121110; }
.rules .t { height: 1.5px; background: rgba(201, 162, 78, .6); }

/* ---------------- how it plays ---------------- */
.how { background: var(--paper); padding: 104px 24px; text-align: center; }
h2 { margin: 0; font: 700 52px/1.15 var(--cond); letter-spacing: .03em; }
.how .sub { max-width: 720px; margin: 22px auto 56px; font: 500 19px/1.5 var(--sans); }
.how .sub strong { font-weight: 800; }
.shrink { display: flex; justify-content: center; align-items: flex-start; gap: 0; max-width: 1240px; margin: 0 auto; }
.step { position: relative; width: 300px; flex: none; }
.step b { display: block; margin-top: 6px; font: 104px/1 var(--heavy); color: var(--red); }
.arrow { flex: none; width: 40px; margin: 60px -20px 0; font: 56px var(--heavy); color: var(--red); position: relative; z-index: 2; }
.hand { position: relative; height: 230px; }
.card.mini { width: 124px; left: calc(50% - 62px + var(--x) * 40px); top: calc(17px + var(--k2) * 3px); transform: rotate(calc(var(--x) * 5deg)); border-radius: 6.2px; filter: drop-shadow(0 10px 11px rgba(46, 31, 10, .35)); }
.n6 .card:nth-child(1) { --x: -2.5; --k2: 6.25; } .n6 .card:nth-child(2) { --x: -1.5; --k2: 2.25; } .n6 .card:nth-child(3) { --x: -.5; --k2: .25; }
.n6 .card:nth-child(4) { --x: .5; --k2: .25; } .n6 .card:nth-child(5) { --x: 1.5; --k2: 2.25; } .n6 .card:nth-child(6) { --x: 2.5; --k2: 6.25; }
.n5 .card:nth-child(1) { --x: -2; --k2: 4; } .n5 .card:nth-child(2) { --x: -1; --k2: 1; } .n5 .card:nth-child(3) { --x: 0; --k2: 0; }
.n5 .card:nth-child(4) { --x: 1; --k2: 1; } .n5 .card:nth-child(5) { --x: 2; --k2: 4; }
.n4 .card:nth-child(1) { --x: -1.5; --k2: 2.25; } .n4 .card:nth-child(2) { --x: -.5; --k2: .25; } .n4 .card:nth-child(3) { --x: .5; --k2: .25; } .n4 .card:nth-child(4) { --x: 1.5; --k2: 2.25; }
.n3 .card:nth-child(1) { --x: -1; --k2: 1; } .n3 .card:nth-child(2) { --x: 0; --k2: 0; } .n3 .card:nth-child(3) { --x: 1; --k2: 1; }
.how .meta { margin: 26px 0 0; font: 800 19px var(--sans); letter-spacing: .14em; }

/* ---------------- specials ---------------- */
.goldrule { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--gold-rule); }
.specials { position: relative; overflow: hidden; background: var(--black); color: #fff; text-align: center; padding: 104px 24px 90px; }
.specials .side .card { width: 230px; opacity: .9; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .6)); }
.specials .side .s1 { left: calc(50% - 720px - 76px); top: 199px; transform: rotate(-16deg); }
.specials .side .s2 { left: calc(50% - 720px + 1295px); top: 89px; transform: rotate(14deg); }
.specials .side .s3 { width: 190px; opacity: .55; left: calc(50% - 720px - 35px); top: 647px; transform: rotate(12deg); }
.specials .side .s4 { width: 190px; opacity: .55; left: calc(50% - 720px + 1275px); top: 687px; transform: rotate(-11deg); }
.specials h2 { margin-top: 18px; font-size: 76px; line-height: 1.1; color: #fff; position: relative; }
.specials .sub { margin: 16px 0 64px; font: 500 20px var(--sans); color: #d0d0d0; position: relative; }
.specials-row { position: relative; display: flex; justify-content: center; list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; }
.sp { width: 212px; flex: none; display: flex; flex-direction: column; align-items: center; }
.sp .card { position: relative; width: 206px; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .7)); }
.sp.a .card { transform: translateY(36px) rotate(-8deg); } .sp.e .card { transform: translateY(36px) rotate(8deg); }
.sp.b .card { transform: translateY(9px) rotate(-4deg); } .sp.d .card { transform: translateY(9px) rotate(4deg); }
/* every name sits on one line, as in the design (row top 352 px; the middle card's top is 15.8 px) */
.sp h3 { margin: 48px 0 0; font: 800 24px var(--sans); }
.sp .k { margin: 6px 0 0; font: 800 11px var(--sans); letter-spacing: .04em; color: var(--gold); }
.sp p:last-child { margin: 8px 0 0; width: 190px; font: 500 14px/1.45 var(--sans); color: #d0d0d0; }

/* ---------------- the THREESET ---------------- */
.threeset { position: relative; overflow: hidden; background: var(--paper2); display: flex; align-items: center; justify-content: center; gap: 60px; padding: 96px 24px; }
.threeset .ring { position: absolute; max-width: none; }
.threeset .ra { left: calc(50% - 720px + 640px); top: -140px; width: 900px; }
.threeset .rb { left: calc(50% - 720px + 780px); top: 0; width: 620px; }
.threeset .copy { position: relative; width: 540px; flex: none; }
.threeset h2 { margin-top: 18px; font-size: 76px; line-height: 1.08; }
.threeset .copy p:last-child { margin: 22px 0 0; max-width: 480px; font: 500 19px/1.5 var(--sans); }
.t-fan { width: 640px; aspect-ratio: 640 / 470; }
.t-fan .card { filter: drop-shadow(0 14px 15px rgba(26, 18, 5, .4)); }
.t-fan .l { left: 5%; top: 19.1%; width: 36.875%; transform: rotate(-13deg); }
.t-fan .r { left: 58.1%; top: 19.1%; width: 36.875%; transform: rotate(13deg); }
.t-fan .c { left: 29.53%; top: 8.21%; width: 40.94%; }

/* ---------------- one table, no teams ---------------- */
.table { background: var(--paper); padding: 104px 24px; }
.box-row { display: flex; align-items: center; justify-content: center; gap: 64px; }
.box { position: relative; flex: none; width: 600px; aspect-ratio: 600 / 415; overflow: hidden; border-radius: 10px; background: var(--paper2); box-shadow: 0 30px 60px rgba(46, 31, 10, .35); container-type: inline-size; }
.box .band { position: absolute; left: 0; right: 0; top: 51.08%; bottom: 0; background: var(--dark); }
.box .bandrule { position: absolute; left: 0; right: 0; top: 51.08%; height: 2.5px; background: var(--gold-rule); z-index: 1; }
.box .boxword { position: absolute; left: 0; right: 0; top: 4.3%; margin: 0; text-align: center; font: 11cqw var(--heavy); letter-spacing: -.03em; color: #111; }
.box .boxtag { position: absolute; left: 0; right: 0; top: 23.6%; margin: 0; text-align: center; font: 700 3.67cqw var(--cond); letter-spacing: .04em; color: #141414; }
.box .suits { position: absolute; left: 34%; top: 32.8%; gap: 1.67cqw; }
.box .suits img { width: 4.83cqw; } .box .suits img.eye { width: 6cqw; }
.box .card { box-shadow: 0 12px 28px rgba(0, 0, 0, .6); z-index: 2; }
.box .l { left: 10.5%; top: 55.6%; width: 31.67%; transform: rotate(-16deg); }
.box .r { left: 57.9%; top: 55.7%; width: 31.67%; transform: rotate(16deg); }
.box .c { left: 33.33%; top: 40.96%; width: 33.33%; }
.box .b1, .box .b2 { position: absolute; border: 1px solid rgba(201, 162, 78, .8); z-index: 3; pointer-events: none; }
.box .b1 { inset: 9px; } .box .b2 { inset: 12px; }
.table .copy { width: 576px; flex: none; }
.table h2 { font-size: 60px; line-height: 1.1; }
.table .copy > p:not(.ctitle) { margin: 20px 0 28px; font: 500 19px/1.5 var(--sans); }
.nums { display: flex; gap: 40px; }
.nums b { display: block; font: 700 40px/1 var(--cond); }
.nums span { display: block; margin-top: 4px; font: 800 13px var(--sans); letter-spacing: .14em; }
.ctitle { margin: 30px 0 5px; font: 900 15px var(--sans); letter-spacing: .08em; }
.crule { display: block; width: 96px; height: 3px; background: var(--bronze); }
.bul { margin: 12px 0 0; padding: 0; list-style: none; font: 500 16px/1.6 var(--sans); }
.bul li::before { content: '•  '; white-space: pre; }
.ways { display: flex; justify-content: center; gap: 24px; margin-top: 80px; flex-wrap: wrap; }
.way { position: relative; overflow: hidden; width: 608px; height: 320px; border-radius: 14px; }
.way.home { background: #fbf8f0; border: 1.5px solid #d9c08a; }
.way.tour { background: var(--black); border: 1.5px solid var(--gold-rule); color: var(--cream); }
.way h3 { position: absolute; left: 34.5px; top: 38.5px; margin: 0; font: 700 36px var(--cond); letter-spacing: .04em; color: var(--red); }
.way.tour h3 { color: var(--gold); }
.way p { position: absolute; left: 34.5px; top: 100.5px; width: 250px; margin: 0; font: 500 16px/1.5 var(--sans); }
.card.mid { width: 168px; border-radius: 8.4px; filter: drop-shadow(0 14px 15px rgba(26, 18, 5, .3)); }
.tour .card.mid { filter: drop-shadow(0 14px 15px rgba(26, 18, 5, .7)); }
.card.wl { left: 314.5px; top: 96px; transform: rotate(-12deg); }
.card.wr { left: 504.5px; top: 96px; transform: rotate(12deg); }
.card.wc { left: 409.5px; top: 70.9px; }

/* ---------------- sign-up + footer ---------------- */
.signup { position: relative; overflow: hidden; background: var(--dark); color: var(--cream); text-align: center; padding: 120px 0 0; }
.signup .deco > * { position: absolute; max-width: none; }
.signup .spot { left: calc(50% - 720px - 40px); top: -200px; width: 1520px; }
.signup .ring.r1 { left: calc(50% - 720px + 140px); top: -220px; width: 1160px; }
.signup .ring.r2 { left: calc(50% - 720px + 305px); top: -55px; width: 830px; }
.signup .ghost { left: calc(50% - 310px); top: 40px; width: 620px; opacity: .1; }
.signup > *:not(.deco):not(.goldrule) { position: relative; }
.signup .hook { margin: 12px 0 26px; font: 600 19px var(--sans); }
.signup h2 { font-size: 84px; line-height: 1.06; color: var(--cream); }
.signup .sub { max-width: 640px; margin: 22px auto 36px; padding: 0 24px; font: 500 19px/1.5 var(--sans); color: var(--muted); }
.signup .sub a { color: var(--cream); text-decoration: none; border-bottom: 1px solid rgba(226, 184, 90, .6); }
.form { display: flex; justify-content: center; gap: 12px; padding: 0 24px; }
.form input[type=email] { width: 390px; height: 66px; padding: 0 22px; border: 2px solid var(--gold-rule); border-radius: 8px; background: var(--paper); font: 600 16px var(--sans); color: var(--ink); outline: none; }
.form input[type=email]::placeholder { color: #6f6a5e; }
.form input[type=email]:focus { box-shadow: 0 0 0 3px rgba(226, 184, 90, .35); }
.form .cta { height: 66px; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signup .fine { margin: 16px 0 0; padding: 0 24px; font-size: 13px; color: var(--dim); }
.signup .fine a { color: var(--dim); }
.signup .fine.ok { color: #7fd99a; font-weight: 600; }
.signup .fine.err { color: #ff8a80; font-weight: 600; }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 110px; padding-top: 30px; padding-bottom: 44px; border-top: 1px solid rgba(201, 162, 78, .45); }
.foot .brand { gap: 12px; }
.foot .brand .logo { width: 36px; }
.foot .brand .word { font-size: 22px; }
.foot .legal { margin: 0; font-size: 13px; color: var(--dim); }
.foot .legal a { color: var(--dim); text-decoration: none; }
.foot .legal a:hover { color: var(--cream); }

/* ---------------- smaller screens ---------------- */
@media (max-width: 1340px) {
  .hero-body { flex-direction: column; align-items: flex-start; }
  .hero-fan { width: min(640px, 100%); align-self: center; }
  .threeset { flex-direction: column; }
  .t-fan { width: min(640px, 100%); }
  .box-row { flex-direction: column; }
  .table .copy { width: min(576px, 100%); }
  .shrink { flex-wrap: wrap; row-gap: 24px; }
  .specials .side { display: none; }
}
@media (max-width: 1100px) {
  .specials-row { flex-wrap: wrap; row-gap: 32px; }
  .sp .card { transform: none !important; width: 170px; }
  .sp h3 { margin-top: 18px; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 20px; }
  .links a:not(.cta) { display: none; }
  .nav { padding-top: 14px; padding-bottom: 14px; }
  .brand .logo { width: 34px; } .brand .word { font-size: 22px; }
  .cta.small { height: 42px; padding: 0 16px; font-size: 12px; white-space: nowrap; }
  .hero .copy { width: 100%; }
  .hero h1 { font-size: 40px; }
  .hero .tag { font-size: 22px; }
  .hero .lead { font-size: 17px; }
  .hero .body { font-size: 16px; }
  h2, .table h2 { font-size: 38px; }
  .specials h2, .threeset h2 { font-size: 44px; }
  .signup h2 { font-size: 46px; }
  .how, .specials, .table { padding-top: 72px; padding-bottom: 72px; }
  .threeset .copy { width: 100%; }
  .step { transform: scale(.52); margin: -78px -72px; }
  .how { padding-left: 12px; padding-right: 12px; }
  .arrow { display: none; }
  .sp { width: 50%; }
  .sp .card { width: 128px; }
  .sp h3 { font-size: 20px; }
  .sp p:last-child { width: auto; padding: 0 8px; font-size: 13px; }
  .box { width: 100%; }
  .way { width: 100%; height: 300px; }
  .way p { width: 52%; }
  .card.wl { left: 52%; } .card.wc { left: 64%; } .card.wr { left: 82%; }
  .form { flex-direction: column; align-items: stretch; max-width: 420px; margin: 0 auto; }
  .form input[type=email] { width: 100%; }
  .foot { flex-direction: column; text-align: center; }
  .signup .ghost { width: 90vw; left: 5vw; }
}