/* ============================================================
   X Chess Club — shared stylesheet
   Used by:  index.html · our-story/index.html · reservations/index.php
   Palette and type are unchanged from the original single-page site.
   ============================================================ */

:root{
  --bg:#100f0e;
  --bg-2:#161513;
  --line:rgba(232,229,223,.13);
  --cream:#E8E5DF;
  --muted:#9c968c;
  --brass:#D8B77A;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --pad:clamp(20px,5vw,72px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--cream);
  font-family:var(--sans);font-weight:300;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--brass);color:#100f0e}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}

/* ---------- header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--pad);
  transition:background .4s ease,backdrop-filter .4s ease,border-color .4s ease;
  border-bottom:1px solid transparent;
}
header.solid,header.always-solid{background:rgba(16,15,14,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand img{width:26px;height:26px;object-fit:contain}
.brand span{font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;white-space:nowrap}
.head-right{display:flex;align-items:center;gap:6px}

/* ---------- main nav ---------- */
.nav{display:flex;align-items:center;gap:26px;margin-right:14px}
.nav a{
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:400;
  color:rgba(232,229,223,.72);white-space:nowrap;position:relative;padding:6px 0;
  transition:color .25s;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--brass);transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.nav a:hover{color:var(--cream)}
.nav a:hover::after,.nav a.current::after{transform:scaleX(1)}
.nav a.current{color:var(--cream)}

.menu-btn{
  display:none;background:none;border:0;padding:9px;cursor:pointer;color:var(--cream);
  width:40px;height:40px;align-items:center;justify-content:center;
}
.menu-btn span{display:block;width:20px;height:1.5px;background:currentColor;position:relative;transition:background .2s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:currentColor;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.menu-btn span::before{top:-6px}
.menu-btn span::after{top:6px}
body.menu-open .menu-btn span{background:transparent}
body.menu-open .menu-btn span::before{transform:translateY(6px) rotate(45deg)}
body.menu-open .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}

.social-mini{display:flex;align-items:center;gap:2px}
.social-mini a{
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  color:var(--cream);opacity:.72;transition:opacity .25s,background .25s,transform .25s;
}
.social-mini a:hover{opacity:1;background:rgba(232,229,223,.09);transform:translateY(-1px)}
.social-mini svg{width:17px;height:17px;fill:currentColor}

@media(max-width:980px){
  .menu-btn{display:flex}
  .social-mini{display:none}
  .nav{
    position:fixed;inset:0 0 auto;top:0;padding:96px var(--pad) 40px;
    flex-direction:column;align-items:flex-start;gap:4px;margin:0;
    background:rgba(16,15,14,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    transform:translateY(-102%);transition:transform .5s cubic-bezier(.16,1,.3,1);
    z-index:-1;
  }
  body.menu-open .nav{transform:none}
  .nav a{font-size:15px;letter-spacing:.14em;padding:14px 0;width:100%;border-bottom:1px solid var(--line)}
  .nav a:last-child{border-bottom:0}
  .nav a::after{display:none}
}

/* ---------- CTA button ---------- */
.cta{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--cream);color:#100f0e;
  padding:14px 24px;border-radius:999px;
  font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.01em;
  border:1px solid var(--cream);
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,background .25s;
  white-space:nowrap;cursor:pointer;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,0,0,.5);background:#fff}
.cta svg{width:17px;height:17px;fill:#100f0e;flex:none}
.cta.sm{padding:10px 18px;font-size:13px}
.cta.lg{padding:18px 34px;font-size:16px}
.cta.ghost{background:transparent;color:var(--cream);border-color:rgba(232,229,223,.4)}
.cta.ghost svg{fill:var(--cream)}
.cta.ghost:hover{background:rgba(232,229,223,.08)}
.cta.brass{background:var(--brass);border-color:var(--brass);color:#100f0e}
.cta.brass svg{fill:#100f0e}
.cta.brass:hover{background:#e3c48c}
@media(max-width:640px){.head-cta-text{display:none}.cta.sm{padding:10px 12px}}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;display:flex;align-items:flex-end}
.hero-grid{position:absolute;inset:0;display:grid;grid-template-columns:1.15fr .95fr .9fr;gap:2px}
.hero-grid figure{margin:0;overflow:hidden;position:relative}
.hero-grid img{width:100%;height:100%;object-fit:cover;animation:drift 26s ease-in-out infinite alternate;filter:saturate(1.02)}
.hero-grid figure:nth-child(2) img{animation-delay:-9s}
.hero-grid figure:nth-child(3) img{animation-delay:-17s}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.14)}}
@media(prefers-reduced-motion:reduce){.hero-grid img{animation:none}}
.hero-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(16,15,14,.9) 0%,rgba(16,15,14,.62) 26%,rgba(16,15,14,.12) 58%,transparent 78%),
    linear-gradient(180deg,rgba(16,15,14,.72) 0%,rgba(16,15,14,.14) 30%,rgba(16,15,14,.5) 66%,rgba(16,15,14,.96) 100%),
    radial-gradient(120% 80% at 50% 100%,rgba(16,15,14,.6),transparent 62%);
}
@media(max-width:860px){
  .hero-veil{background:linear-gradient(180deg,rgba(16,15,14,.7) 0%,rgba(16,15,14,.22) 28%,rgba(16,15,14,.66) 62%,rgba(16,15,14,.97) 100%)}
}
.hero-inner{position:relative;z-index:2;width:100%;padding:0 var(--pad) clamp(46px,7vh,84px)}
.hero-mark{width:clamp(46px,6vw,74px);margin-bottom:22px;opacity:.96}
.hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(44px,8.4vw,124px);line-height:.94;letter-spacing:-.015em;margin:0 0 18px;
}
.hero h1 em{font-style:italic;color:var(--brass)}
.hero p{
  margin:0 0 30px;max-width:34ch;font-size:clamp(15px,1.5vw,19px);
  color:rgba(232,229,223,.86);font-weight:300;
}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(232,229,223,.6)}
.hero-meta span{display:flex;align-items:center;gap:9px}
.dot{width:5px;height:5px;border-radius:50%;background:var(--brass);flex:none}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-grid figure:nth-child(1),.hero-grid figure:nth-child(3){display:none}
}

/* ---------- page hero (inner pages) ---------- */
.phero{position:relative;min-height:clamp(440px,68vh,680px);display:flex;align-items:flex-end;overflow:hidden}
.phero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.02)}
.phero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,15,14,.78) 0%,rgba(16,15,14,.2) 32%,rgba(16,15,14,.6) 70%,rgba(16,15,14,.97) 100%);
}
.phero .phero-in{position:relative;z-index:2;width:100%;padding:0 var(--pad) clamp(44px,7vh,80px);max-width:1100px}
.phero h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,7vw,96px);line-height:.98;letter-spacing:-.015em;margin:0 0 16px}
.phero h1 em{font-style:italic;color:var(--brass)}
.phero p{margin:0;max-width:44ch;font-size:clamp(15px,1.5vw,19px);color:rgba(232,229,223,.86)}

/* ---------- strip (auto scroll) ---------- */
.strip{overflow:hidden;background:var(--bg);padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip-track{display:flex;gap:2px;width:max-content;animation:slide 70s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
.strip-track img{height:clamp(180px,26vw,300px);width:auto;object-fit:cover;cursor:zoom-in;opacity:.94;transition:opacity .3s}
.strip-track img:hover{opacity:1}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.strip-track{animation:none}}

/* ---------- sections ---------- */
section{position:relative}
.wrap{padding:clamp(70px,11vw,150px) var(--pad)}
.wrap.tight{padding-top:clamp(46px,7vw,86px);padding-bottom:clamp(46px,7vw,86px)}
.eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--brass);margin:0 0 20px;font-weight:500}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,5.2vw,66px);line-height:1.02;letter-spacing:-.01em;margin:0 0 22px}
h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.4vw,42px);line-height:1.05;margin:0 0 14px}
.lead{font-size:clamp(15px,1.6vw,19px);color:rgba(232,229,223,.8);max-width:42ch;margin:0 0 16px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,72px);align-items:center}
.split-media{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.split-media img{width:100%;aspect-ratio:3/4;object-fit:cover;cursor:zoom-in}
.split-media img:first-child{margin-top:34px}
@media(max-width:860px){.split{grid-template-columns:1fr}.split-media img:first-child{margin-top:0}}
.split.flip .split-text{order:2}
@media(max-width:860px){.split.flip .split-text{order:0}}

.facts{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 34px}
.fact{border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:12.5px;letter-spacing:.06em;color:rgba(232,229,223,.82)}

/* ---------- full bleed band ---------- */
.band{position:relative;min-height:clamp(400px,62vh,660px);display:grid;place-items:center;overflow:hidden;text-align:center}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,15,14,.55),rgba(16,15,14,.72))}
.band .band-in{position:relative;z-index:2;padding:60px var(--pad);max-width:820px}
.band h2{margin-bottom:14px}
.band p{color:rgba(232,229,223,.85);margin:0 auto 30px;max-width:36ch;font-size:clamp(15px,1.5vw,18px)}

/* ---------- gallery ---------- */
.gallery{columns:4;column-gap:10px}
.gallery.g3{columns:3}
.gallery img{width:100%;margin-bottom:10px;break-inside:avoid;cursor:zoom-in;background:#1b1a18;transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1);opacity:.93}
.gallery img:hover{opacity:1;transform:translateY(-3px)}
@media(max-width:1200px){.gallery{columns:3}}
@media(max-width:820px){.gallery,.gallery.g3{columns:2}}
@media(max-width:460px){.gallery,.gallery.g3{columns:2;column-gap:6px}.gallery img{margin-bottom:6px}}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:40px}
.trio img{width:100%;aspect-ratio:4/5;object-fit:cover;cursor:zoom-in}
@media(max-width:700px){.trio{grid-template-columns:1fr 1fr}.trio img:last-child{grid-column:span 2;aspect-ratio:16/10}}

/* ---------- tournament blocks ---------- */
.tblock+.tblock{margin-top:clamp(64px,9vw,120px)}
.thead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 40px;margin-bottom:30px}
.thead h3{margin:0}
.tmeta{display:flex;flex-wrap:wrap;gap:8px 10px}
.tmeta span{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:12px;letter-spacing:.06em;color:rgba(232,229,223,.8);white-space:nowrap}
.tmeta span b{color:var(--brass);font-weight:500}
.twide{margin-bottom:10px}
.twide img{width:100%;aspect-ratio:16/8;object-fit:cover;cursor:zoom-in}
@media(max-width:700px){.twide img{aspect-ratio:4/3}}
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tgrid img{width:100%;aspect-ratio:3/4;object-fit:cover;cursor:zoom-in;opacity:.94;transition:opacity .3s,transform .5s cubic-bezier(.16,1,.3,1)}
.tgrid img:hover{opacity:1;transform:translateY(-3px)}
@media(max-width:1000px){.tgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.tgrid{grid-template-columns:repeat(2,1fr);gap:6px}}

/* ---------- story chapters ---------- */
.chapter{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5.5vw,80px);align-items:center}
.chapter+.chapter{margin-top:clamp(70px,10vw,140px)}
.chapter .ch-media img{width:100%;aspect-ratio:4/5;object-fit:cover;cursor:zoom-in}
.chapter.flip .ch-text{order:2}
.chapter .num{
  font-family:var(--serif);font-size:13px;letter-spacing:.3em;color:var(--brass);
  display:block;margin-bottom:18px;text-transform:uppercase;font-weight:400;
}
.chapter p{font-size:clamp(15px,1.55vw,18px);color:rgba(232,229,223,.82);max-width:46ch}
.chapter p+p{margin-top:16px}
@media(max-width:860px){
  .chapter{grid-template-columns:1fr}
  .chapter.flip .ch-text{order:0}
}
.pull{
  font-family:var(--serif);font-size:clamp(24px,3.6vw,44px);line-height:1.18;
  color:var(--cream);max-width:22ch;margin:0;letter-spacing:-.005em;
}
.pull em{font-style:italic;color:var(--brass)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.duo img{width:100%;aspect-ratio:3/4;object-fit:cover;cursor:zoom-in}
@media(max-width:560px){.duo{grid-template-columns:1fr}}

/* ---------- reservation page ---------- */
.res{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,56px);align-items:start}
@media(max-width:900px){.res{grid-template-columns:1fr}}
.card{
  border:1px solid var(--line);border-radius:18px;background:rgba(232,229,223,.025);
  padding:clamp(24px,3.4vw,40px);
}
.card+.card{margin-top:16px}
.card h3{margin-bottom:6px}
.status{
  display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:8px 16px;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;margin-bottom:22px;
}
.status.open{background:rgba(216,183,122,.14);color:var(--brass);border:1px solid rgba(216,183,122,.35)}
.status.full{background:rgba(232,229,223,.07);color:var(--muted);border:1px solid var(--line)}
.status .dot{background:currentColor}

.dl{display:grid;grid-template-columns:auto 1fr;gap:16px 24px;margin:0;padding:0}
.dl dt{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);padding-top:5px}
.dl dd{margin:0;font-size:clamp(16px,2vw,21px);color:var(--cream);font-weight:400}
.dl dd small{display:block;font-size:13px;color:var(--muted);margin-top:4px;font-weight:300;letter-spacing:0}
@media(max-width:520px){.dl{grid-template-columns:1fr;gap:4px 0}.dl dt{padding-top:14px}}

.pay-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}
.copy-field{
  display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;
  padding:11px 12px 11px 20px;background:rgba(232,229,223,.03);
}
.copy-field code{font-family:var(--sans);font-size:14px;letter-spacing:.02em;color:var(--cream)}
.copy-field button{
  border:0;background:rgba(232,229,223,.1);color:var(--cream);border-radius:999px;
  padding:7px 14px;font-family:var(--sans);font-size:12px;cursor:pointer;letter-spacing:.04em;
  transition:background .25s;
}
.copy-field button:hover{background:rgba(232,229,223,.2)}

/* ---------- form ---------- */
.field{margin-bottom:18px}
.field label{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.field label .req{color:var(--brass)}
.field input[type=text],.field input[type=tel],.field input[type=number],.field input[type=password],.field input[type=date],.field select,.field textarea{
  width:100%;background:rgba(232,229,223,.04);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;color:var(--cream);font-family:var(--sans);font-size:15px;font-weight:300;
  transition:border-color .25s,background .25s;
}
.field textarea{min-height:90px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:rgba(216,183,122,.6);background:rgba(232,229,223,.06)}
.field input::placeholder,.field textarea::placeholder{color:rgba(156,150,140,.65)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%239c968c' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;background-size:10px;padding-right:44px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}
.check{display:flex;align-items:flex-start;gap:11px;font-size:14px;color:rgba(232,229,223,.8);cursor:pointer;margin-bottom:20px}
.check input{width:17px;height:17px;margin:3px 0 0;accent-color:var(--brass);flex:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.note{
  border-left:2px solid var(--brass);padding:2px 0 2px 16px;margin:22px 0 0;
  font-size:14px;color:rgba(232,229,223,.75);
}
.msg{border-radius:12px;padding:16px 18px;font-size:14.5px;margin-bottom:22px}
.msg.ok{background:rgba(216,183,122,.12);border:1px solid rgba(216,183,122,.4);color:var(--cream)}
.msg.err{background:rgba(214,120,100,.12);border:1px solid rgba(214,120,100,.45);color:#f0d8d2}
.msg b{display:block;margin-bottom:4px;font-weight:500}

/* ---------- socials ---------- */
.socials{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.social-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-top:44px;max-width:1020px}
.social-card{
  display:flex;align-items:center;gap:16px;padding:22px 24px;
  border:1px solid var(--line);border-radius:16px;background:rgba(232,229,223,.02);
  transition:background .3s,border-color .3s,transform .3s cubic-bezier(.16,1,.3,1);
}
.social-card:hover{background:rgba(232,229,223,.07);border-color:rgba(232,229,223,.3);transform:translateY(-3px)}
.social-card .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(232,229,223,.08);flex:none}
.social-card .ic svg{width:20px;height:20px;fill:var(--cream)}
.social-card b{display:block;font-weight:500;font-size:15px;letter-spacing:.01em}
.social-card small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.social-card .arw{margin-left:auto;opacity:.4;font-size:18px}

/* ---------- footer ---------- */
footer{padding:clamp(50px,7vw,80px) var(--pad) 40px;text-align:center}
.f-mark{width:38px;margin:0 auto 22px;opacity:.9}
.f-name{font-family:var(--serif);font-size:clamp(26px,4vw,40px);margin:0 0 10px}
.f-sub{color:var(--muted);font-size:14px;margin:0 0 28px}
.f-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 26px;margin-bottom:28px}
.f-nav a{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(232,229,223,.7);transition:color .25s}
.f-nav a:hover{color:var(--cream)}
.f-social{display:flex;justify-content:center;gap:8px;margin-bottom:34px;flex-wrap:wrap}
.f-social a{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:background .3s,border-color .3s}
.f-social a:hover{background:rgba(232,229,223,.08);border-color:rgba(232,229,223,.3)}
.f-social svg{width:18px;height:18px;fill:var(--cream)}
.f-legal{font-size:12px;color:rgba(156,150,140,.7);border-top:1px solid var(--line);padding-top:26px;margin-top:10px}

/* ---------- floating whatsapp ---------- */
.float{
  position:fixed;right:18px;bottom:18px;z-index:70;
  display:flex;align-items:center;gap:10px;
  background:var(--cream);color:#100f0e;padding:13px 20px;border-radius:999px;
  font-size:14px;font-weight:500;box-shadow:0 14px 40px rgba(0,0,0,.55);
  opacity:0;pointer-events:none;transform:translateY(14px);
  transition:opacity .4s,transform .4s cubic-bezier(.16,1,.3,1);
}
.float.show{opacity:1;pointer-events:auto;transform:none}
.float svg{width:18px;height:18px;fill:#100f0e}
@media(max-width:640px){.float span{display:none}.float{padding:15px}}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:100;background:rgba(10,9,8,.96);display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:88vh;object-fit:contain;box-shadow:0 30px 90px rgba(0,0,0,.7)}
.lb button{position:absolute;background:none;border:0;color:var(--cream);cursor:pointer;font-size:34px;line-height:1;padding:16px;opacity:.7;transition:opacity .25s;font-family:var(--sans);font-weight:300}
.lb button:hover{opacity:1}
.lb .lb-close{top:8px;right:10px;font-size:30px}
.lb .lb-prev{left:4px;top:50%;transform:translateY(-50%)}
.lb .lb-next{right:4px;top:50%;transform:translateY(-50%)}
.lb .lb-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.2em;color:rgba(232,229,223,.6)}

/* ---------- admin ---------- */
.admin{max-width:980px;margin:0 auto;padding:clamp(90px,12vh,140px) var(--pad) 80px}
.admin h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,5vw,52px);margin:0 0 8px}
.admin .sub{color:var(--muted);font-size:14.5px;margin:0 0 38px}
.admin-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:26px}
.tbl{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
.tbl th{text-align:left;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:0 14px 12px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:13px 14px 13px 0;border-bottom:1px solid rgba(232,229,223,.07);color:rgba(232,229,223,.88);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{color:var(--muted);width:34px}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.empty{color:var(--muted);font-size:14.5px;padding:26px 0}
.tgrid.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.tgrid.g3{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.tgrid.g3{grid-template-columns:repeat(2,1fr)}}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* a stronger veil for bands sitting over busy, face-filled photos */
.band.deep::after{background:linear-gradient(180deg,rgba(16,15,14,.74) 0%,rgba(16,15,14,.8) 45%,rgba(16,15,14,.9) 100%)}

/* ============================================================
   BRAND DISPLAY FONT — DRAGOTHEN
   ------------------------------------------------------------
   Used for the X Chess Club wordmark and the big display
   headlines only. Body text stays Inter; the elegant section
   headings stay Instrument Serif. DRAGOTHEN has no true
   lowercase and no italic, so it is deliberately kept off
   running text.

   TO TURN IT OFF, change the --display line below to:
       --display: var(--serif);
   and everything falls back to the original typography.

   LICENCE: the file supplied with this site is licensed
   "Free for Personal Use" (see fonts/DRAGOTHEN-License.txt).
   A commercial licence from https://exfont.com/dragothen.font
   is required before using it on xchessclub.com.
   ============================================================ */
@font-face{
  font-family:'Dragothen';
  src:url('../fonts/dragothen.woff') format('woff'),
      url('../fonts/dragothen.otf')  format('opentype');
  font-weight:400;font-style:normal;font-display:swap;
}
:root{
  --display:'Dragothen', var(--serif);
}

/* wordmark */
.brand span{font-family:var(--display);font-size:15px;letter-spacing:.16em;font-weight:400}
.f-name{font-family:var(--display);letter-spacing:.05em}

/* the two page-opening headlines */
.hero h1,.phero h1{font-family:var(--display);letter-spacing:.012em;line-height:1.0}
.hero h1{font-size:clamp(46px,8.8vw,132px)}
.phero h1{font-size:clamp(42px,7.4vw,104px)}
.hero h1 em,.phero h1 em{font-style:normal}

/* the full-bleed statements */
.band h2{font-family:var(--display);letter-spacing:.015em;line-height:1.06}
.band h2 em{font-style:normal;color:var(--brass)}

/* ============================================================
   LANGUAGE SWITCH
   ------------------------------------------------------------
   One pill, in the header and again in the footer, on every page
   in both languages. It always shows the language you are NOT
   reading, and links to the same page in that language.

   These are the same three rules the Future Moves pages already
   use (css/future-moves.css re-declares them identically) — they
   live here so every page gets them, not just that section.
   ============================================================ */
.lang-sw{
  font-size:12.5px;letter-spacing:.06em;color:rgba(232,229,223,.78);
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;margin:0 6px;
  transition:background .25s,color .25s;white-space:nowrap;flex:none;
}
.lang-sw:hover{background:rgba(232,229,223,.08);color:var(--cream)}
.lang-sw[lang=ar]{font-family:'IBM Plex Sans Arabic',var(--sans);letter-spacing:0;font-size:14px}
.f-lang{margin:0 0 26px}