/* =================================================================
   Mid City Chess Club — shared styles
   Style: "Mid-Century Blocks" — warm, colorful, geometric.
   Palette from the R.1 brand deck.
   Type: Archivo (display + body) · Space Mono (data) · Fraunces (serif accent)
   ================================================================= */

:root {
  /* --- light / warm base (mid-century) --- */
  --bg:        #E7DFCB;   /* warm tan ground */
  --bg-2:      #EFE8D6;   /* raised band */
  --panel:     #F1EAD8;   /* card / panel */
  --tile:      #DDD4BB;   /* product tile / inset */
  --ink:       #201C13;   /* primary text (warm near-black) */
  --ink-soft:  rgba(32,28,19,.74);
  --ink-faint: rgba(32,28,19,.5);
  --line:      rgba(32,28,19,.2);
  --line-2:    rgba(32,28,19,.34);

  /* --- palette accents --- */
  --blue:     #7CA0C3;
  --sage:     #5F8970;
  --oxblood:  #6A2B27;
  --oxblood-hi:#7D3630;
  --mustard:  #D0982F;
  --mustard-hi:#E0A93B;
  --accent:   #6A2B27;   /* primary accent = oxblood */

  /* --- dark tokens, used only inside the Vault "case" --- */
  --vault-bg: #17150F;
  --cream:    #EDE6D4;
  --cream-70: rgba(237,230,212,.72);
  --cream-50: rgba(237,230,212,.5);
  --cream-38: rgba(237,230,212,.38);
  --ink-2:    #1F1B12;
  --ink-3:    #26210F;
  --line-gold:rgba(208,152,47,.34);

  --font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --font-body:    'Archivo', system-ui, sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;
  --font-serif:   'Fraunces', Georgia, serif;

  --wrap: 1140px;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--oxblood); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--oxblood-hi); }
img, svg { max-width: 100%; }
::selection { background: var(--mustard); color: var(--ink); }
::placeholder { color: var(--ink-faint); }
:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }
input, button, select { font-family: inherit; }

/* --- chess-knight cursor (a fun touch) --- */
html, body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 44 44'%3E%3Cpath d='M12.5 36.5c.3-6.8 2.8-11.4 6.2-14.9 1.7-1.7 2.6-3 2.4-4.5l-2.2 1.4c-1.6 1-3.6 1.4-5.5 1l-1.6-.3c-.6-2.7.5-5.7 3-7.3 2.8-1.8 5.8-3.2 9.2-3.4l.9-2 1.7.5.6 1.9c4.7 1.7 7.2 6.1 7.4 11.4.2 5.2-.7 10.9-1.7 16.2z' fill='%23F3ECDA' stroke='%23201C13' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E") 14 5, auto; }
a, button, [role="button"], summary, .chip, .tease, .card, .prod, .link-btn, .nav__brand { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 44 44'%3E%3Cpath d='M12.5 36.5c.3-6.8 2.8-11.4 6.2-14.9 1.7-1.7 2.6-3 2.4-4.5l-2.2 1.4c-1.6 1-3.6 1.4-5.5 1l-1.6-.3c-.6-2.7.5-5.7 3-7.3 2.8-1.8 5.8-3.2 9.2-3.4l.9-2 1.7.5.6 1.9c4.7 1.7 7.2 6.1 7.4 11.4.2 5.2-.7 10.9-1.7 16.2z' fill='%23D0982F' stroke='%23201C13' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E") 14 5, pointer; }
input, textarea { cursor: text; }
.btn[disabled], .btn.is-disabled { cursor: not-allowed; }
@media (hover: none) { html, body, a, button { cursor: auto; } }

/* --- type helpers --- */
.display {
  font-family: var(--font-display); font-weight: 900; line-height: .9;
  letter-spacing: -.02em; text-transform: uppercase; margin: 0;
}
.eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: .3em; text-transform: uppercase; color: var(--oxblood); margin: 0;
}
.serif { font-family: var(--font-serif); font-weight: 400; }
.mono  { font-family: var(--font-mono); }
.lede {
  font-family: var(--font-body); font-size: clamp(16px,2.3vw,20px);
  line-height: 1.5; color: var(--ink-soft); margin: 0;
}

/* --- placeholder chip --- */
.ph {
  font-family: var(--font-mono); font-size: 10px; color: var(--oxblood);
  border: 1px dashed var(--line-2); padding: 0 5px; border-radius: 2px;
  white-space: nowrap; vertical-align: middle;
}

/* --- 4-color block motif --- */
.blocks { display: flex; box-shadow: 0 8px 26px rgba(32,28,19,.16); }
.blocks i { display: block; width: clamp(26px,4vw,46px); height: clamp(80px,14vw,140px); }
.blocks i:nth-child(1){ background: var(--blue); }
.blocks i:nth-child(2){ background: var(--sage); }
.blocks i:nth-child(3){ background: var(--oxblood); }
.blocks i:nth-child(4){ background: var(--mustard); }
.blockbar { display: flex; height: 8px; }
.blockbar i { flex: 1; }
.blockbar i:nth-child(1){ background: var(--blue); }
.blockbar i:nth-child(2){ background: var(--sage); }
.blockbar i:nth-child(3){ background: var(--oxblood); }
.blockbar i:nth-child(4){ background: var(--mustard); }

/* --- nav --- */
.nav {
  position: sticky; top: 0; z-index: 40; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 6px 16px;
  padding: 12px clamp(16px,4vw,30px); background: rgba(231,223,203,.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-2);
}
.nav__brand { display: flex; align-items: center; gap: 11px; color: var(--ink); }
.nav__brand img { width: 26px; height: 26px; display: block; }
.nav__brand span { font-family: var(--font-display); font-weight: 800; font-size: clamp(11px,2.6vw,12.5px); letter-spacing: .06em; text-transform: uppercase; }
.nav__links { display: flex; align-items: center; gap: clamp(14px,3vw,26px); margin-left: auto; }
.nav__links a { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.nav__links a:hover { color: var(--oxblood); }
.nav__links a[aria-current="page"] { color: var(--oxblood); border-bottom: 2px solid var(--oxblood); padding-bottom: 2px; }
.nav__links a.vault { display: flex; align-items: center; gap: 6px; }

/* --- buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; padding: 14px 24px;
  cursor: pointer; border: 1.5px solid var(--ink); border-radius: 2px;
  background: var(--oxblood); color: #F3EEDF; box-shadow: 3px 3px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, background-color .25s ease;
}
.btn:hover { background: var(--oxblood-hi); color: #F3EEDF; transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.btn--gold { background: var(--mustard); color: var(--ink); }
.btn--gold:hover { background: var(--mustard-hi); color: var(--ink); }
.btn--ghost { background: var(--panel); color: var(--ink); }
.btn--ghost:hover { background: #fff8ea; color: var(--ink); }
.btn[disabled], .btn.is-disabled { background: var(--tile); color: var(--ink-faint); box-shadow: none; cursor: not-allowed; border-color: var(--line-2); }

/* --- forms --- */
.field { background: #FBF6E8; border: 1.5px solid var(--line-2); border-radius: 2px; color: var(--ink); font-size: 16px; padding: 13px 14px; min-width: 0; width: 100%; }
.field:focus { border-color: var(--oxblood); outline: none; }

/* --- panels / cards --- */
.panel { border: 1.5px solid var(--ink); border-radius: 4px; background: var(--panel); box-shadow: 6px 6px 0 rgba(32,28,19,.12); }
.panel__inner { padding: clamp(20px,4vw,34px); }

/* --- section rule --- */
.rule { display: flex; align-items: center; gap: 18px; }
.rule h2 { margin: 0; white-space: nowrap; }
.rule__line { flex: 1; height: 0; border-top: 1px solid var(--line-2); }

/* --- footer --- */
.footer { border-top: 1px solid var(--line-2); margin-top: 12px; padding: 44px 20px 54px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; background: var(--bg-2); }
.footer img { width: 30px; }
.footer p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.footer nav { display: flex; gap: 20px; }
.footer nav a { font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.footer nav a:hover { color: var(--oxblood); }
.footer .dom { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }

/* --- checkerboard motif (pure CSS) --- */
.checker { --sq: 22px; background-image: repeating-conic-gradient(rgba(32,28,19,.14) 0 25%, transparent 0 50%); background-size: calc(var(--sq)*2) calc(var(--sq)*2); }
.checker-strip { height: 26px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); opacity: .7; }

/* --- grain overlay --- */
.grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .04; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* --- layout --- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: clamp(16px,4vw,28px); padding-right: clamp(16px,4vw,28px); }
.wrap--narrow { max-width: 880px; }
.wrap--vault  { max-width: 720px; }

/* --- animations --- */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes flicker { 0%,100%{opacity:1} 42%{opacity:.86} 46%{opacity:.97} 58%{opacity:.9} 62%{opacity:1} 82%{opacity:.94} }
@keyframes shake { 0%,100%{transform:translateX(0)} 15%{transform:translateX(-9px)} 30%{transform:translateX(8px)} 45%{transform:translateX(-6px)} 60%{transform:translateX(5px)} 75%{transform:translateX(-3px)} 90%{transform:translateX(2px)} }
@keyframes pieceIn { from{transform:scale(.72)} to{transform:scale(1)} }
@keyframes glowIn { from{opacity:0} to{opacity:1} }
@keyframes doorL { to { transform: translateX(-103%); } }
@keyframes doorR { to { transform: translateX(103%); } }
@keyframes seam { from{opacity:0;transform:scaleY(.15)} to{opacity:1;transform:scaleY(1)} }
.rise  { animation: rise .8s ease both; }
.rise-1{ animation: rise .8s ease .12s both; }
.rise-2{ animation: rise .8s ease .26s both; }
.rise-3{ animation: rise .8s ease .4s both; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01s !important; animation-delay: 0s !important; transition-duration: .01s !important; }
}