:root { --navy:#152345; --gold:#bd8f3e; --burgundy:#86172d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff; color:var(--navy); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; }
img { max-width:100%; }
.header { height:92px; max-width:1300px; margin:auto; padding:18px clamp(24px,5vw,72px); display:flex; align-items:center; justify-content:space-between; position:relative; z-index:10; }
.brand img { display:block; width:184px; height:auto; }
.header button { width:43px; padding:7px 4px; display:grid; gap:7px; border:0; background:transparent; cursor:pointer; }
.header button span { height:2px; width:100%; background:var(--navy); }
.header button span:nth-child(2) { width:75%; justify-self:end; }
nav { position:absolute; top:76px; right:clamp(24px,5vw,72px); min-width:250px; padding:19px 25px; background:white; box-shadow:0 18px 50px #15234526; border:1px solid #e9e3d8; }
nav[hidden] { display:none; }
nav a { display:block; padding:13px 0; text-decoration:none; font-size:13px; text-transform:uppercase; letter-spacing:.11em; }
nav a:hover,.button:hover { color:var(--gold); }
#menu .menu-social { margin-top:12px; padding-top:16px; border-top:1px solid #e9e3d8; }
#menu .menu-social > span { display:block; margin-bottom:5px; color:var(--gold); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
#menu .menu-social a { display:flex; align-items:center; gap:11px; min-height:48px; padding:6px 0; letter-spacing:.055em; transition:transform .18s ease; }
#menu .menu-social a:hover,#menu .menu-social a:focus-visible { transform:translateX(3px); }
#menu .social-mark { flex:none; display:grid; place-items:center; width:32px; height:32px; }
#menu .social-mark svg { display:block; width:26px; height:26px; }
#menu .social-instagram .social-mark { color:#c32b86; }
#menu .social-tiktok .social-mark { color:#101723; }
#menu .social-tiktok .social-mark svg { filter:drop-shadow(-1px -1px 0 #25f4ee) drop-shadow(1px 1px 0 #fe2c55); }
#menu .social-instagram .social-name { color:#a52d78; }
#menu .social-tiktok .social-name { color:#101723; }
#menu .social-indicator { width:7px; height:7px; margin-left:auto; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg); opacity:.65; }
#menu .social-instagram .social-indicator { color:#a52d78; }
#menu .social-tiktok .social-indicator { color:#101723; }
@media(prefers-reduced-motion:reduce){#menu .menu-social a{transition:none}}
.hero { min-height:640px; padding:80px 24px 92px; display:grid; place-items:center; text-align:center; position:relative; overflow:hidden; }
.hero:before,.hero:after { content:""; position:absolute; border:1px solid rgba(189,143,62,.45); border-radius:50%; pointer-events:none; }
.hero:before { width:250px; height:250px; left:-175px; top:105px; }
.hero:after { width:355px; height:355px; right:-280px; bottom:40px; }
.hero-content { max-width:780px; margin:auto; position:relative; z-index:1; }
h1,h2,.quote { font-family:Georgia,'Times New Roman',serif; font-weight:400; }
h1 { font-size:clamp(36px,5.5vw,70px); line-height:1.17; letter-spacing:-.035em; margin:0 auto 32px; }
h1 span,.quote span { color:var(--gold); }
h1 em,.quote em { color:var(--burgundy); font-weight:400; }
.rule { width:145px; height:1px; margin:auto; background:var(--gold); }
.hero p { max-width:540px; margin:32px auto 31px; line-height:1.75; font-size:16px; }
.buttons { display:flex; justify-content:center; gap:13px; }
.button { min-height:54px; min-width:207px; padding:17px 20px; display:flex; align-items:center; justify-content:space-between; gap:30px; text-decoration:none; font-size:12px; font-weight:700; letter-spacing:.12em; transition:color .2s,background .2s; }
.button span { font-size:23px; font-weight:400; line-height:13px; }
.primary { color:white; background:var(--navy); }
.primary span { color:var(--gold); }
.secondary { border:1px solid var(--navy); }
.secondary span { color:var(--burgundy); }
.movement { background:var(--navy); color:#fff; padding:105px 28px 110px; }
.movement-inner { max-width:1040px; margin:auto; position:relative; }
.movement-line { position:absolute; right:0; top:2px; width:100px; height:100px; border-top:1px solid var(--gold); border-right:1px solid var(--gold); opacity:.7; }
.movement h2 { font-size:clamp(43px,6vw,72px); line-height:1.12; letter-spacing:-.035em; margin:0 0 35px; }
.movement h2 em { color:#d7aa5c; font-style:normal; }
.movement p { max-width:610px; font-size:18px; line-height:1.67; margin:0 0 22px; }
.movement .cadence { font-size:17px; letter-spacing:.04em; margin:34px 0 0; }
.cadence b:first-child { color:#d7aa5c; }.cadence b:nth-child(2) { color:#e2a1ac; }
.qualities { max-width:1190px; margin:auto; padding:82px clamp(24px,5vw,70px) 100px; }
.section-intro { display:flex; justify-content:center; align-items:center; gap:18px; margin-bottom:57px; color:var(--gold); font-size:11px; font-weight:700; letter-spacing:.22em; }
.small-rule { display:block; width:54px; height:1px; background:var(--gold); }
.quality { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,70px); align-items:center; margin-bottom:55px; }
.quality.reverse { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
.quality-copy,.quality-small { display:grid; grid-template-columns:54px minmax(0,1fr); column-gap:16px; align-items:center; }
.quality-copy { max-width:410px; }
.reverse .quality-copy { margin-left:auto; }
.icon { display:block; width:45px; height:45px; margin:0; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.icon.gold { color:var(--gold); }.icon.burgundy { color:var(--burgundy); }.icon.navy { color:var(--navy); }
.qualities h3 { grid-column:2; font-size:15px; letter-spacing:.12em; margin:0; }
.qualities p { grid-column:2; font-size:18px; line-height:1.55; margin:14px 0 0; }
.scene-wrap { position:relative; }
.scene-wrap img { width:100%; display:block; height:auto; }
.quality-pair { border-top:1px solid #dac9a9; border-bottom:1px solid #dac9a9; display:grid; grid-template-columns:1fr 1fr; }
.quality-small { padding:48px 8% 51px 0; }
.quality-small+.quality-small { border-left:1px solid #dac9a9; padding-left:11%; padding-right:0; }
.quality-small p { max-width:360px; }
.closing { text-align:center; padding:80px 24px 105px; }
.closing-copy { max-width:670px; margin:auto; }
.closing-copy .small-rule { margin:0 auto 33px; }
.closing h2 { font-size:clamp(30px,4.5vw,48px); line-height:1.25; letter-spacing:-.025em; margin:0 0 32px; }
.card { font-family:Georgia,'Times New Roman',serif; font-size:clamp(21px,2.7vw,29px); line-height:1.48; color:var(--burgundy); margin:0 auto 35px; }
.puzzle { display:block; width:min(540px,76vw); height:auto; margin:0 auto 27px; }
.quote { font-size:clamp(32px,4.2vw,48px); line-height:1.25; margin:0; letter-spacing:-.025em; }
.invitation { max-width:1190px; margin:0 auto 98px; padding:0 clamp(24px,5vw,70px); display:grid; grid-template-columns:.8fr 1.2fr; gap:45px; align-items:center; }
.invitation-copy { padding:38px 0; }
.invitation-copy .small-rule { margin-bottom:29px; }
.invitation-copy p { font-size:clamp(26px,3.3vw,39px); font-family:Georgia,'Times New Roman',serif; line-height:1.28; margin:0 0 34px; }
.invitation-buttons { display:grid; gap:10px; max-width:360px; }
.invitation img { width:100%; height:auto; display:block; }
footer { min-height:200px; background:var(--navy); color:#fff; position:relative; display:flex; justify-content:center; align-items:center; padding:75px 24px 33px; }
footer>a { text-decoration:none; font-size:16px; letter-spacing:.07em; }
.footer-mark { width:100px; height:100px; position:absolute; left:50%; top:-50px; transform:translateX(-50%); border-radius:50%; background:#fff; padding:13px; display:grid; place-items:center; }
.footer-mark img { width:100%; height:100%; object-fit:contain; }
@media(max-width:700px) {
  .header { height:73px; padding:14px 24px; }.brand img { width:145px; } nav { top:68px; right:20px; }
  .hero { min-height:550px; padding:66px 26px 83px; }
  .hero:before { left:-225px; }.hero:after { right:-310px; }
  h1 { font-size:clamp(34px,8.6vw,52px); line-height:1.22; margin-bottom:30px; }
  .hero p { font-size:15px; line-height:1.65; margin:28px auto 31px; }
  .buttons { flex-direction:column; max-width:330px; margin:auto; gap:10px; }.button { min-height:51px; }
  .movement { padding:74px 28px 82px; }.movement-line { width:48px; height:48px; right:4px; }.movement h2 { font-size:clamp(37px,9vw,51px); margin-bottom:29px; }
  .movement p { font-size:16px; }.movement .cadence { font-size:15px; }
  .qualities { padding:65px 26px 78px; }.section-intro { margin-bottom:45px; }
  .quality,.quality.reverse { display:flex; flex-direction:column; align-items:stretch; gap:24px; margin-bottom:61px; }
  .quality.reverse .quality-copy { order:0; }.quality.reverse .scene-wrap { order:1; }
  .quality-copy { max-width:none; width:100%; }.reverse .quality-copy { margin-left:0; }
  .icon { width:39px; height:39px; }.quality-copy,.quality-small { grid-template-columns:45px minmax(0,1fr); column-gap:13px; }
  .qualities h3 { font-size:14px; line-height:1.35; letter-spacing:.1em; }.qualities p { font-size:16px; line-height:1.5; margin-top:9px; }
  .scene-wrap { margin:0 -8px; }.scene-wrap img { width:100%; height:auto; }
  .quality-pair { display:block; }.quality-small { padding:31px 0 34px; }.quality-small+.quality-small { border-left:0; border-top:1px solid #dac9a9; padding:31px 0 34px; }
  .closing { padding:72px 27px 100px; }.closing h2 { margin-bottom:29px; }.card { margin-bottom:27px; }
  .puzzle { width:min(420px,88vw); margin-bottom:28px; }
  .invitation { display:flex; flex-direction:column; text-align:center; gap:4px; margin-bottom:85px; padding:0 27px; }
  .invitation-copy { padding:0; }.invitation-copy .small-rule { margin:0 auto 24px; }.invitation-copy p { margin-bottom:27px; }
  .invitation-buttons { width:min(330px,84vw); margin:auto; }.invitation .button { width:100%; }.invitation img { max-width:510px; }
  footer { min-height:170px; padding-top:72px; }.footer-mark { width:88px; height:88px; top:-44px; }footer>a { font-size:14px; }
}
@media(max-width:400px) { .qualities { padding-inline:23px; }.qualities p { font-size:15px; }.qualities h3 { font-size:13px; } }

/* TRESOR editorial presentation: original deck artwork, generous rhythm. */
.hero { min-height:760px; padding:125px 24px 155px; }
.hero:before { width:350px; height:350px; left:-310px; top:120px; }
.hero:after { width:440px; height:440px; right:-385px; bottom:70px; }
.hero-content { max-width:850px; }
h1 { font-size:clamp(42px,5.35vw,72px); line-height:1.2; margin-bottom:47px; }
.hero .rule { width:190px; }
.hero p { margin:45px auto 44px; }
.movement { padding:152px 28px 165px; }
.movement-inner { max-width:1100px; }
.movement h2 { margin-bottom:49px; }
.movement p { max-width:670px; }
.qualities { max-width:1260px; padding:155px clamp(28px,6vw,78px) 150px; }
.section-intro { margin-bottom:105px; }
.quality,.quality.reverse { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(65px,9vw,135px); min-height:580px; margin-bottom:145px; }
.quality.reverse { grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); }
.quality-copy { display:block; max-width:370px; }
.reverse .quality-copy { margin-left:0; }
.quality-copy .icon { width:54px; height:54px; margin-bottom:35px; }
.qualities h3 { font-size:14px; line-height:1.45; letter-spacing:.17em; }
.qualities p { font-family:Georgia,'Times New Roman',serif; font-size:clamp(21px,2.15vw,28px); line-height:1.5; max-width:420px; margin-top:22px; }
.scene-wrap { min-height:580px; display:grid; place-items:center; overflow:hidden; isolation:isolate; }
.gold-scene { background:#bd9248; }
.navy-scene { background:var(--navy); }
.scene-wrap:before { content:""; position:absolute; inset:32px; border:1px solid rgba(255,255,255,.48); pointer-events:none; }
.scene-wrap:after { content:"JWÈT PA W  /  TRESOR"; position:absolute; bottom:18px; left:32px; color:rgba(255,255,255,.77); font-size:10px; font-weight:700; letter-spacing:.24em; }
.card-stage { width:min(58%,285px); position:relative; padding:0; transform:rotate(-5deg); filter:drop-shadow(14px 22px 17px rgba(13,20,39,.23)); }
.navy-scene .card-stage { transform:rotate(5deg); }
.card-stage img { display:block; width:100%; height:auto; border-radius:9px; border:1px solid rgba(255,255,255,.8); box-shadow:0 0 0 1px rgba(44,37,29,.12); }
.quality-pair { margin-top:15px; }
.quality-small { display:block; padding:78px 10% 88px 0; }
.quality-small+.quality-small { padding:78px 0 88px 13%; }
.quality-small .icon { margin-bottom:32px; width:53px; height:53px; }
.quality-small p { max-width:400px; }
.closing { padding:145px 24px 170px; }
.closing h2 { margin-bottom:47px; }
.card { max-width:680px; margin-bottom:82px; }
.puzzle { margin-bottom:80px; }
.invitation { margin-bottom:150px; gap:90px; }
@media(max-width:700px) {
  .hero { min-height:760px; padding:130px 27px 135px; }
  h1 { font-size:clamp(37px,8.3vw,53px); line-height:1.24; margin-bottom:40px; }
  .hero .rule { width:145px; }
  .hero p { margin:42px auto 40px; }
  .movement { padding:115px 29px 125px; }
  .movement h2 { margin-bottom:42px; }
  .qualities { padding:115px 25px 118px; }
  .section-intro { margin-bottom:90px; }
  .quality,.quality.reverse { min-height:0; gap:48px; margin-bottom:150px; }
  .quality-copy { width:100%; max-width:430px; }
  .quality-copy .icon { width:49px; height:49px; margin-bottom:28px; }
  .qualities h3 { font-size:13px; letter-spacing:.15em; }
  .qualities p { font-size:clamp(20px,5.4vw,26px); line-height:1.46; margin-top:17px; }
  .scene-wrap { min-height:520px; margin:0; }
  .scene-wrap:before { inset:20px; }
  .scene-wrap:after { left:23px; bottom:13px; font-size:8px; }
  .card-stage { width:min(60%,246px); }
  .quality-pair { margin-top:0; }
  .quality-small,.quality-small+.quality-small { padding:53px 0 62px; }
  .quality-small .icon { width:48px; height:48px; margin-bottom:26px; }
  .closing { padding:115px 26px 155px; }
  .closing h2 { margin-bottom:38px; }
  .card { margin-bottom:75px; }
  .puzzle { margin-bottom:72px; }
  .invitation { margin-bottom:145px; gap:37px; }
}
@media(max-width:400px) { .hero { padding-inline:24px; }.scene-wrap { min-height:470px; }.card-stage { width:61%; } }

.deck { background:#f8f6f2; padding:145px clamp(24px,6vw,82px) 155px; }
.deck-heading { max-width:700px; margin:0 auto 78px; text-align:center; }
.deck-heading .small-rule { margin:0 auto 28px; }
.deck .eyebrow { font:700 11px Arial,Helvetica,sans-serif; letter-spacing:.24em; color:var(--gold); margin:0 0 29px; }
.deck h2 { font-size:clamp(39px,5.4vw,66px); line-height:1.15; letter-spacing:-.035em; margin:0 0 28px; }
.deck h2 em { color:var(--burgundy); font-weight:400; }
.deck-heading>p:last-child { font-size:16px; line-height:1.65; max-width:470px; margin:0 auto; }
.deck-grid { max-width:1190px; margin:auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:clamp(16px,2.6vw,35px); row-gap:55px; }
.deck-card { cursor:zoom-in; display:block; width:100%; border:0; background:transparent; padding:0; color:var(--navy); text-align:left; }
.deck-card img { display:block; width:100%; height:auto; aspect-ratio:1098/1536; object-fit:cover; border:1px solid #e4dfd8; box-shadow:0 11px 30px rgba(22,30,49,.11); transition:transform .2s,box-shadow .2s; }
.deck-card:hover img,.deck-card:focus-visible img { transform:translateY(-6px); box-shadow:0 18px 35px rgba(22,30,49,.16); }
.deck-card span { display:block; margin-top:16px; font:700 11px Arial,Helvetica,sans-serif; letter-spacing:.15em; }
.card-dialog { position:fixed; max-width:min(90vw,630px); max-height:92vh; padding:18px; border:0; background:#fff; box-shadow:0 26px 80px #0e1930a8; overflow:visible; }
.card-dialog::backdrop { background:rgba(14,25,48,.75); }
.card-dialog img { display:block; max-width:100%; max-height:calc(92vh - 36px); width:auto; height:auto; }
.close-dialog { position:absolute; right:-15px; top:-15px; width:39px; height:39px; border:0; border-radius:50%; color:#fff; background:var(--navy); font-size:26px; line-height:1; cursor:pointer; }
@media(max-width:800px) { .deck-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:700px) {
  .deck { padding:115px 24px 128px; }
  .deck-heading { margin-bottom:67px; }
  .deck h2 { font-size:clamp(38px,9vw,54px); }
  .deck-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:38px 16px; }
  .deck-card span { font-size:9px; line-height:1.4; margin-top:12px; }
  .card-dialog { padding:10px; }
  .card-dialog img { max-height:calc(92vh - 20px); }
}

/* Remove the unwanted hero side circles. */
.hero::before,.hero::after { content:none; display:none; }
.header { position:sticky; top:0; max-width:none; background:#fff; z-index:20; }

/* Genuine deck artwork in photographed hands, as two quiet editorial scenes. */
.scene-wrap,.gold-scene,.navy-scene { min-height:0; background:transparent; overflow:visible; display:block; }
.scene-wrap::before,.scene-wrap::after { content:none; display:none; }
.scene-wrap .scene-image { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
@media(max-width:700px) { .scene-wrap { margin:0 -4px; } }
/* Editorial tabletop scenes retain their organic edges against the white page. */
.scene-wrap .scene-image { aspect-ratio:auto; object-fit:contain; }
.header { box-shadow:0 1px 0 rgba(19,34,60,.08); }
@media(max-width:700px) {
  .quality,.quality.reverse { gap:30px; margin-bottom:170px; }
  .scene-wrap { margin-inline:-22px; }
  .scene-wrap .scene-image { width:100%; }
}

/* A tactile game detail gives the opening a focal point without filling its white space. */
.hero { min-height:790px; padding:88px 24px 125px; }
.hero-content { width:100%; }
.hero-prelude { width:126px; height:102px; margin:0 auto 24px; position:relative; }
.domino { position:absolute; width:44px; height:79px; border:1px solid #dbc9aa; border-radius:6px; background:#fbf7ef; box-shadow:7px 13px 22px rgba(21,35,69,.13); }
.domino::after { content:""; position:absolute; left:7px; right:7px; top:50%; border-top:1px solid #c8ae86; }
.domino i { position:absolute; width:7px; height:7px; border-radius:50%; background:#8a1d32; box-shadow:inset 0 1px 1px #5e1220; }
.domino-one { top:10px; left:29px; transform:rotate(-24deg); }
.domino-one i:first-child { top:17px; left:18px; }
.domino-one i:nth-child(2) { bottom:17px; left:18px; }
.domino-two { top:8px; left:63px; transform:rotate(17deg); }
.domino-two i:first-child { top:14px; left:9px; }
.domino-two i:nth-child(2) { top:25px; right:9px; }
.domino-two i:nth-child(3) { bottom:15px; left:18px; }
.hero .hero-eyebrow { font:700 10px Arial,Helvetica,sans-serif; letter-spacing:.28em; color:#9b763e; margin:0 auto 25px; }
.hero h1 { margin-bottom:39px; }
.hero .rule { width:110px; }
.hero p:not(.hero-eyebrow) { max-width:570px; }
.hero .buttons { margin-top:45px; }
.button { transition:transform .2s ease, color .2s ease, background-color .2s ease; }
.button:hover { transform:translateY(-2px); }
.quality,.quality.reverse { min-height:0; }
.qualities { padding-top:130px; }
.section-intro { margin-bottom:95px; }
@media(max-width:700px) {
  .hero { min-height:790px; padding:82px 27px 112px; }
  .hero-prelude { margin-bottom:15px; }
  .hero .hero-eyebrow { margin-bottom:28px; font-size:9px; }
  .hero h1 { margin-bottom:39px; }
  .hero p:not(.hero-eyebrow) { margin-top:38px; margin-bottom:38px; }
  .hero .buttons { margin-top:0; }
  .qualities { padding-top:115px; }
}
@media(prefers-reduced-motion:reduce) { .button { transition:none; } }

/* More moments at the table. */
.more-play { padding:140px clamp(26px,6vw,80px) 170px; background:#fff; }
.more-play-intro { max-width:670px; margin:0 auto 85px; text-align:center; }
.more-play-intro .small-rule { margin:0 auto 31px; }
.more-play .eyebrow { color:#ab813e; letter-spacing:.24em; font-size:11px; font-weight:700; margin:0 0 25px; }
.more-play h2 { font-size:clamp(40px,5.5vw,70px); line-height:1.14; letter-spacing:-.035em; margin:0 0 27px; }
.more-play h2 em { color:var(--burgundy); font-weight:400; }
.more-play-intro>p:last-child { max-width:490px; margin:0 auto; font-size:17px; line-height:1.7; }
.play-grid { max-width:1350px; margin:0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(45px,6vw,90px); }
.play-figure { min-width:0; margin:0; }
.play-figure:nth-child(2) { margin-top:115px; }
.play-figure img { display:block; width:100%; aspect-ratio:3/2; object-fit:contain; }
.play-figure figcaption { display:flex; justify-content:space-between; align-items:baseline; gap:20px; border-top:1px solid #d8c39c; padding-top:22px; }
.play-figure figcaption span { font-size:11px; color:#9c7136; font-weight:700; letter-spacing:.18em; white-space:nowrap; }
.play-figure figcaption strong { font:400 clamp(17px,1.65vw,23px) Georgia,'Times New Roman',serif; color:var(--navy); text-align:right; }

/* A complete close instead of the oversized overlapping symbol. */
.site-footer { display:block; min-height:0; padding:0; background:#faf7f1; color:var(--navy); }
.footer-inner { max-width:1300px; margin:auto; padding:91px clamp(26px,6vw,80px) 80px; display:grid; grid-template-columns:1.25fr .8fr 1fr; gap:clamp(30px,5vw,80px); align-items:start; }
.footer-lead img { display:block; width:190px; max-width:100%; }
.footer-lead p { font:400 23px/1.3 Georgia,'Times New Roman',serif; margin:26px 0 0; }
.footer-nav { display:grid; gap:21px; padding-top:4px; }
.footer-nav a,.footer-contact a { text-decoration:none; }
.footer-nav a { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.footer-nav a:hover,.footer-contact a:hover { color:var(--burgundy); }
.footer-contact { display:grid; gap:25px; padding-top:3px; }
.footer-contact span { font-size:10px; font-weight:700; letter-spacing:.19em; color:#9b763e; }
.footer-contact a { font:400 clamp(18px,2vw,24px) Georgia,'Times New Roman',serif; overflow-wrap:anywhere; }
.footer-bottom { background:var(--navy); color:#f8f5ef; padding:20px clamp(26px,6vw,80px); display:flex; justify-content:space-between; gap:30px; font-size:10px; letter-spacing:.15em; }
@media(max-width:700px) {
  .more-play { padding:110px 25px 130px; }
  .more-play-intro { margin-bottom:62px; }
  .more-play-intro>p:last-child { font-size:16px; }
  .play-grid { display:block; }
  .play-figure { margin-bottom:86px; }
  .play-figure:nth-child(2) { margin:0; }
  .play-figure img { margin:0 -20px; width:calc(100% + 40px); }
  .play-figure figcaption { display:block; padding-top:18px; }
  .play-figure figcaption strong { display:block; text-align:left; margin-top:13px; font-size:21px; }
  .footer-inner { display:block; padding:76px 27px 69px; }
  .footer-lead img { width:170px; }
  .footer-lead p { font-size:22px; margin-top:22px; }
  .footer-nav { grid-template-columns:1fr 1fr; gap:25px 14px; margin-top:58px; }
  .footer-contact { margin-top:58px; }
  .footer-bottom { padding:23px 27px; flex-direction:column; gap:12px; font-size:9px; }
}

/* Five distinct game scenes, placed within the opening and four stories. */
.hero { display:block; min-height:0; padding:105px 24px 116px; }
.hero-flourish { display:flex; justify-content:center; align-items:center; gap:16px; height:20px; margin:0 auto 33px; }
.hero-flourish span { width:42px; height:1px; background:#caa868; }
.hero-flourish img { display:block; width:25px; height:25px; object-fit:contain; }
.hero-scene { width:min(1040px,100%); margin:112px auto 0; }
.hero-scene img { display:block; width:100%; height:auto; }
.qualities { padding-bottom:65px; }
.quality:last-child { margin-bottom:20px; }
@media(max-width:700px) {
  .hero { padding:91px 26px 105px; }
  .hero-flourish { margin-bottom:30px; }
  .hero-scene { width:calc(100% + 52px); margin:91px -26px 0; }
  .qualities { padding-bottom:45px; }
  .quality:last-child { margin-bottom:0; }
}

/* Signature footer: original symbol seated across the white/navy divide. */
.site-footer { position:relative; display:flex; align-items:flex-end; justify-content:center; min-height:185px; margin-top:110px; padding:108px 24px 30px; background:var(--navy); color:white; text-align:center; }
.site-footer .footer-mark { position:absolute; z-index:1; top:-92px; left:50%; transform:translateX(-50%); width:184px; height:184px; border-radius:50%; background:#fff; display:grid; place-items:center; padding:24px; }
.site-footer .footer-mark img { display:block; width:100%; height:auto; object-fit:contain; }
.site-footer .footer-email { font:400 22px/1.3 Georgia,'Times New Roman',serif; letter-spacing:.035em; text-decoration:none; }
.site-footer .footer-email:hover { color:#d7aa5c; }
@media(max-width:700px) {
  .site-footer { min-height:165px; margin-top:93px; padding:90px 22px 30px; }
  .site-footer .footer-mark { top:-73px; width:146px; height:146px; padding:19px; }
  .site-footer .footer-email { font-size:19px; }
}
.site-footer { min-height:155px; padding:0; margin-top:0; }
@media(max-width:700px) { .site-footer { min-height:125px; margin-top:0; padding:0; } }
.hero-scene { width:min(1220px,100%); }
@media(max-width:700px) { .hero-scene { width:calc(100% + 52px); } }
.site-footer .footer-mark { width:250px; height:250px; top:-160px; padding:10px; }
@media(max-width:700px) { .site-footer .footer-mark { width:170px; height:170px; top:-110px; padding:8px; } }
/* Let the tabletop scenes meet the viewport edge, so sleeves continue offscreen. */
body{overflow-x:hidden}
.hero-scene{width:100vw;max-width:none;position:relative;left:50%;transform:translateX(-50%);margin-top:94px}
.hero-scene img{width:100vw;max-width:none}
.qualities{max-width:none;padding:108px 0 65px}
.quality,.quality.reverse{display:flex;flex-direction:column;align-items:stretch;min-height:0;gap:46px;margin:0 0 125px}
.quality-copy,.reverse .quality-copy{width:min(1100px,calc(100% - 70px));max-width:none;margin:0 auto}
.quality-copy p{max-width:590px}
.quality.reverse .quality-copy{text-align:right}
.quality.reverse .quality-copy .icon{margin-left:auto}
.quality.reverse .quality-copy p{margin-left:auto}
.quality .scene-wrap,.quality.reverse .scene-wrap{width:100vw;min-height:0;margin:0;overflow:visible}
.scene-wrap .scene-image{width:100vw;max-width:none;height:auto;aspect-ratio:auto;object-fit:contain;display:block}
.quality:last-child{margin-bottom:0}
@media(max-width:700px){
  .hero-scene{width:100vw;margin:78px 0 0;left:50%;transform:translateX(-50%)}
  .qualities{padding:90px 0 20px}
  .quality,.quality.reverse{gap:27px;margin-bottom:110px}
  .quality-copy,.reverse .quality-copy{width:calc(100% - 50px);max-width:none}
  .quality.reverse .quality-copy{text-align:left}
  .quality.reverse .quality-copy .icon,.quality.reverse .quality-copy p{margin-left:0}
  .scene-wrap .scene-image{width:100vw}
}
/* A considered close using the original brand mark. */
.site-footer{min-height:0;margin:0;padding:0;background:var(--navy);color:#fff;text-align:center;display:block}
.footer-content{max-width:1160px;margin:auto;padding:72px clamp(26px,6vw,80px) 30px}
.site-footer .footer-mark{position:static;transform:none;width:92px;height:92px;padding:0;margin:0 auto 26px;background:transparent;border-radius:0;display:block}
.site-footer .footer-mark img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}
.footer-heading{font:400 clamp(36px,5vw,58px)/1.12 Georgia,'Times New Roman',serif;letter-spacing:-.035em;margin:0 auto 38px}
.footer-heading em{color:#d6a557;font-weight:400}
.footer-links{display:flex;justify-content:center;gap:16px;margin:0 auto 72px}
.footer-links a{display:flex;align-items:center;justify-content:space-between;min-width:215px;gap:32px;padding:17px 20px;border:1px solid #8d9ab2;color:#fff;text-decoration:none;text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:.13em}
.footer-links a:first-child{background:#fff;color:var(--navy);border-color:#fff}
.footer-links a span{font-size:18px;color:#d6a557;line-height:1}
.footer-links a:hover{border-color:#d6a557;color:#d6a557}
.footer-signoff{border-top:1px solid #ffffff3b;padding-top:26px;display:flex;justify-content:space-between;gap:24px;font-size:10px;letter-spacing:.16em;color:#d3d9e3}
@media(max-width:700px){
  .footer-content{padding:62px 27px 28px}
  .site-footer .footer-mark{width:76px;height:76px;margin-bottom:25px}
  .footer-heading{font-size:clamp(37px,9vw,48px);margin-bottom:36px}
  .footer-links{display:grid;gap:10px;margin-bottom:60px}
  .footer-links a{min-width:0;width:100%}
  .footer-signoff{flex-direction:column;gap:12px;line-height:1.5}
}
.site-footer .footer-mark{background:#fff;border-radius:50%;padding:12px}
.site-footer .footer-mark img{filter:none}
/* Footer: the supplied mark lives directly on the navy, with no enclosing badge. */
.site-footer{background:#192746;color:#fff;text-align:center}
.site-footer .footer-content{max-width:1180px;padding:62px clamp(25px,5vw,64px) 25px;margin:auto}
.site-footer .footer-topline{display:flex;align-items:center;justify-content:center;gap:24px;margin:0 auto 22px;max-width:410px}
.site-footer .footer-topline>span{flex:1;height:1px;background:#c69a52;opacity:.7}
.site-footer .footer-mark{position:static;left:auto;top:auto;transform:none;flex:none;display:block;width:82px;height:82px;margin:0;padding:0;background:none;border:0;border-radius:0}
.site-footer .footer-mark img{width:100%;height:100%;object-fit:contain;filter:none}
.site-footer .footer-kicker{margin:0 0 17px;color:#dfb66a;font:700 12px/1.4 Arial,Helvetica,sans-serif;letter-spacing:.24em}
.site-footer .footer-heading{font:400 clamp(40px,5.5vw,68px)/1.08 Georgia,'Times New Roman',serif;letter-spacing:-.045em;margin:0 auto 39px}
.site-footer .footer-heading em{color:#e3b76b;font-weight:400}
.site-footer .footer-links{display:flex;justify-content:center;gap:0;max-width:600px;margin:0 auto 76px;border:1px solid #aab3c4}
.site-footer .footer-links a{flex:1;min-width:0;min-height:64px;border:0;padding:20px 23px;display:flex;justify-content:space-between;align-items:center;text-align:left;color:#fff;background:transparent;text-decoration:none;text-transform:uppercase;font:700 12px/1.25 Arial,Helvetica,sans-serif;letter-spacing:.14em}
.site-footer .footer-links a:first-child{background:#f8f4eb;color:#192746}
.site-footer .footer-links a span{color:#d4a450;font:400 22px/1 Arial,Helvetica,sans-serif}
.site-footer .footer-links a:hover{background:#9b2438;color:#fff}
.site-footer .footer-signoff{border-top:1px solid #ffffff45;padding-top:22px;display:flex;justify-content:space-between;gap:18px;color:#e2e5ed;font:400 12px/1.4 Arial,Helvetica,sans-serif;letter-spacing:.15em}
@media(max-width:700px){
 .site-footer .footer-content{padding:52px 26px 28px}
 .site-footer .footer-topline{max-width:285px;gap:18px;margin-bottom:20px}
 .site-footer .footer-mark{width:66px;height:66px;margin:0}
 .site-footer .footer-heading{font-size:clamp(40px,9vw,53px);margin-bottom:34px}
 .site-footer .footer-links{display:grid;margin-bottom:62px}
 .site-footer .footer-links a{min-height:62px;padding:18px 19px}
 .site-footer .footer-links a+a{border-top:1px solid #aab3c4}
 .site-footer .footer-signoff{display:flex;flex-direction:column;gap:13px}
}
/* Packaging crosses the section boundary to lead naturally into the close. */
.invitation{position:relative;z-index:2;margin-bottom:-64px;align-items:center}
.invitation>img{position:relative;width:100%;max-width:660px;justify-self:center;align-self:end}
.site-footer .footer-content{padding-top:132px}
@media(max-width:700px){
 .invitation{margin-bottom:-52px;gap:20px}
 .invitation>img{width:min(100vw,580px);max-width:none;align-self:center}
 .site-footer .footer-content{padding-top:103px}
}
/* The footer becomes the final game-table surface beneath the packaging. */
.site-footer{position:relative;isolation:isolate;margin-top:0}
.site-footer::before{content:"";position:absolute;z-index:-1;left:-7%;right:-7%;top:-69px;height:133px;background:#192746;border-radius:48% 52% 0 0 / 71% 96% 0 0;transform:rotate(-1deg);pointer-events:none}
.invitation{margin-bottom:-111px}
.invitation>img{filter:drop-shadow(0 12px 12px #1223441c)}
.site-footer .footer-content{position:relative;z-index:1;padding-top:176px}
@media(max-width:700px){
 .site-footer::before{left:-13%;right:-10%;top:-49px;height:89px;border-radius:50% 50% 0 0 / 74% 94% 0 0;transform:rotate(-2deg)}
 .invitation{margin-bottom:-79px}
 .site-footer .footer-content{padding-top:130px}
}
@media(min-width:701px){
 .invitation{margin-bottom:-14px}
 .invitation-copy{transform:translateY(-38px)}
}
/* Flush, uninterrupted curved edge. */
body{overflow-x:clip}
.site-footer{width:100%;overflow:visible}

/* Let the four generations' arms run off the page edges without an image frame. */
.closing .puzzle{
  width:100vw;
  max-width:none;
  height:auto;
  position:relative;
  left:50%;
  transform:translateX(-50%);
  margin:0 0 72px;
}
@media(max-width:700px){
  .closing .puzzle{margin-bottom:64px}
}
.site-footer::before{left:0;right:0;top:-57px;height:112px;border-radius:47% 53% 0 0 / 78% 96% 0 0;transform:none}
.site-footer .footer-topline>span:last-child{background:#a93c50}
.site-footer .footer-signoff{letter-spacing:.08em}
.site-footer .footer-signoff b{font-weight:700}
.site-footer .footer-signoff .play{color:#e2b361}
.site-footer .footer-signoff .connect{color:#e4a2ac}
.site-footer .footer-links a:last-child{border-left:3px solid #a93c50}
.site-footer .footer-signoff{display:block;text-align:center;letter-spacing:0}
.site-footer .footer-signoff span:first-child{display:block;font-size:11px;letter-spacing:.19em;margin-bottom:13px}
.site-footer .footer-signoff span:last-child{display:block;font-size:20px;letter-spacing:.015em}
@media(max-width:700px){
 .site-footer::before{left:0;right:0;top:-47px;height:88px;border-radius:42% 58% 0 0 / 82% 96% 0 0;transform:none}
 .site-footer .footer-links a:last-child{border-left:0;border-top:2px solid #a93c50}
 .site-footer .footer-signoff span:last-child{font-size:17px}
}

/* Let each scene finish on white before the next section begins. */
.hero{padding-bottom:38px}
.movement{padding-top:70px}
.invitation{margin-bottom:0;padding-bottom:72px}
.invitation>img{align-self:center;filter:drop-shadow(0 10px 10px #12234416)}
.site-footer::before{display:none}
.site-footer .footer-content{padding-top:72px}
@media(max-width:700px){
 .hero{padding-bottom:22px}
 .hero-scene{margin-top:66px}
 .movement{padding-top:45px}
 .invitation{margin-bottom:0;gap:30px;padding-bottom:68px}
 .invitation>img{width:min(95vw,520px)}
 .site-footer .footer-content{padding-top:68px}
}

/* A restrained invitation above the existing footer links. */
.site-footer .newsletter{max-width:850px;margin:0 auto 51px;padding:28px 0 31px;border-top:1px solid #ffffff46;border-bottom:1px solid #ffffff46;display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(30px,5vw,64px);text-align:left;align-items:center}
.site-footer .newsletter-kicker{margin:0 0 9px;color:#dfb66a;font:700 11px/1.4 Arial,Helvetica,sans-serif;letter-spacing:.2em}
.site-footer .newsletter h3{margin:0 0 9px;color:#fff;font:400 clamp(29px,3vw,39px)/1.15 Georgia,'Times New Roman',serif}
.site-footer .newsletter-copy>p:last-child{margin:0;color:#e0e5ef;font:400 15px/1.55 Arial,Helvetica,sans-serif}
.site-footer .newsletter-form label{display:block;margin-bottom:9px;color:#f4f1eb;font:700 12px/1.3 Arial,Helvetica,sans-serif;letter-spacing:.04em}
.site-footer .newsletter-fields{display:flex;min-height:50px}
.site-footer .newsletter-fields input{flex:1;min-width:0;border:1px solid #d7d4ce;border-right:0;border-radius:0;background:#fff;color:#192746;padding:12px 14px;font:400 16px/1.3 Arial,Helvetica,sans-serif}
.site-footer .newsletter-fields input:focus-visible,.site-footer .newsletter-fields button:focus-visible{outline:2px solid #e3b76b;outline-offset:3px}
.site-footer .newsletter-fields button{flex:none;border:1px solid #9b2438;border-radius:0;background:#9b2438;color:#fff;padding:11px 15px;font:700 11px/1.3 Arial,Helvetica,sans-serif;letter-spacing:.11em;cursor:pointer}
.site-footer .newsletter-fields button:hover{background:#b3344c;border-color:#b3344c}
.site-footer .newsletter-fields button span{margin-left:8px;color:#f0c279;font-size:18px;vertical-align:-1px}
.site-footer .newsletter-help{margin:9px 0 0;color:#c6cfde;font:400 12px/1.4 Arial,Helvetica,sans-serif}
.site-footer .newsletter-trap{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;border:0!important;opacity:0!important;pointer-events:none!important}
.site-footer .newsletter-fields button:disabled{opacity:.7;cursor:wait}
@media(max-width:700px){
 .site-footer .newsletter{display:block;margin:0 auto 43px;padding:27px 0 29px}
 .site-footer .newsletter-copy>p:last-child{font-size:14px}
 .site-footer .newsletter-form{margin-top:22px}
 .site-footer .newsletter-fields button{padding-inline:12px;letter-spacing:.07em}
}
@media(max-width:380px){
 .site-footer .newsletter-fields{display:block}
 .site-footer .newsletter-fields input,.site-footer .newsletter-fields button{display:block;width:100%;min-height:49px;border:1px solid #d7d4ce}
 .site-footer .newsletter-fields button{margin-top:9px;border-color:#9b2438}
}

/* The bags rest on a navy tabletop that flows directly into the footer. */
.hero-flourish img{width:64px;height:64px}
.invitation{isolation:isolate;padding-bottom:0}
.invitation::before{content:"";position:absolute;z-index:0;left:50%;bottom:-2px;width:100vw;height:clamp(130px,12vw,175px);transform:translateX(-50%);background:#192746;border-radius:48% 52% 0 0 / 42% 30% 0 0;pointer-events:none}
.invitation-copy,.invitation>img{position:relative;z-index:1}
.invitation>img{align-self:end}
.site-footer{width:100vw;max-width:none;margin-left:0}
/* Render the four-piece assembly at equal outer width and height. */
.closing .puzzle{height:99vw;object-fit:fill}
@media(min-width:701px){.invitation-copy{transform:translateY(-145px)}}
@media(max-width:700px){
 .closing .card{margin-bottom:12px}
 .closing .puzzle{margin-top:-18px}
 .invitation{padding-bottom:0;gap:30px}
 .invitation::before{height:clamp(128px,38vw,205px);border-radius:44% 56% 0 0 / 43% 32% 0 0}
 .invitation>img{align-self:center}
}

/* Keep the stories and imagery connected throughout the homepage. */
.hero{padding-top:76px;padding-bottom:0}
.hero-scene{margin-top:56px}
.movement{padding-top:76px;padding-bottom:88px}
.qualities{padding-top:76px;padding-bottom:12px}
.section-intro{margin-bottom:62px}
.quality,.quality.reverse{gap:28px;margin-bottom:72px}
.closing{padding-top:74px;padding-bottom:88px}
.closing .card{margin-bottom:28px}
.closing .puzzle{margin-bottom:32px}
@media(max-width:700px){
 .hero{padding-top:58px;padding-bottom:0}
 .hero-scene{margin-top:38px}
 .movement{padding-top:54px;padding-bottom:64px}
 .qualities{padding-top:56px;padding-bottom:0}
 .section-intro{margin-bottom:44px}
 .quality,.quality.reverse{gap:17px;margin-bottom:52px}
 .closing{padding-top:42px;padding-bottom:68px}
 .closing .card{margin-bottom:12px}
 .closing .puzzle{margin-top:-18px;margin-bottom:24px}
}

/* A small pause after the opening photo, followed by a square navy panel. */
@media(max-width:700px){
 .movement{margin-top:28px;min-height:100vw;display:flex;align-items:center}
 .movement-inner{width:100%}
}
@media(max-width:380px){
 .movement{padding:28px 25px}
 .movement h2{font-size:clamp(32px,9vw,37px);margin-bottom:24px}
 .movement p{font-size:15px;line-height:1.5}
 .movement .cadence{margin-top:22px;font-size:14px}
}

/* Smaller desktop tabletop scenes; original phone imagery remains untouched. */
@media screen and (min-width:1024px){
 .hero-scene,.quality .scene-wrap,.quality.reverse .scene-wrap{position:relative;aspect-ratio:3/1;min-height:0;isolation:isolate;overflow:hidden;background:#fff;}
 .hero-scene::before,.quality .scene-wrap::before{content:"";display:block;position:absolute;inset:0;border:0;background-image:var(--desktop-sleeves);background-size:100% 100%;background-repeat:no-repeat;-webkit-mask-image:linear-gradient(to right,#000 0 25%,transparent 25% 75%,#000 75%);mask-image:linear-gradient(to right,#000 0 25%,transparent 25% 75%,#000 75%);pointer-events:none;}
 .hero-scene img,.scene-wrap .scene-image{position:absolute;z-index:1;left:25%;top:0;width:50%;height:100%;object-fit:contain;}
 .hero-scene{--desktop-sleeves:url('assets/desktop-transparent/chess-hires.webp');}
 .scene-wrap:has(img[src*="mancala-generations"]){--desktop-sleeves:url('assets/desktop-transparent/mancala-hires.webp');}
 .scene-wrap:has(img[src*="damier-generations"]){--desktop-sleeves:url('assets/desktop-transparent/damier-hires.webp');}
 .scene-wrap:has(img[src*="stacking-child"]){--desktop-sleeves:url('assets/desktop-transparent/stacking-hires.webp');}
 .scene-wrap:has(img[src*="grid-fullbleed"]){--desktop-sleeves:url('assets/desktop-transparent/grid-hires.webp');}
}

@media screen and (min-width:1024px){
 .hero-scene::before,.quality .scene-wrap::before{-webkit-mask-image:none;mask-image:none;}
 .hero-scene img,.scene-wrap .scene-image{opacity:0;}
}

/* Match the phone's note/photo rhythm without changing its layout. */
@media screen and (min-width:1024px){
 .quality .quality-copy,.quality.reverse .quality-copy{order:0;}
 .quality .scene-wrap,.quality.reverse .scene-wrap{order:1;}
 .quality,.quality.reverse{gap:36px;margin-bottom:64px;}
}
/* Full figures, including sneakers, stay inside each desktop scene. */
@media screen and (min-width:1024px){
 .hero-scene,.quality .scene-wrap,.quality.reverse .scene-wrap{aspect-ratio:auto;height:min(66.6667vw,calc(100svh - 130px));min-height:0;overflow:visible;}
 .hero-scene::before,.quality .scene-wrap::before{background-size:contain;background-position:center;}
}

/* Transparent desktop subjects sit directly on the pure-white page. */
@media screen and (min-width:1024px){
 .hero-scene::before,.quality .scene-wrap::before{
  inset:0 auto 0 50%;width:min(100%,calc((100svh - 130px) * 1.5));transform:translateX(-50%);mix-blend-mode:normal;
  -webkit-mask-image:none;mask-image:none;
 }
}