/* ==========================================================================
   Sellentrake — canyon strata design system
   Palette: layered rust / ochre / mauve over a deep terracotta base
   ========================================================================== */

:root{
  /* strata bands, light to deep */
  --band-01:#F6EDE1;   /* bleached caprock   */
  --band-02:#EBD9C2;   /* pale sandstone     */
  --band-03:#DCA84F;   /* ochre seam         */
  --band-04:#C2622F;   /* rust seam          */
  --band-05:#9C4B3A;   /* oxidised clay      */
  --band-06:#7B5468;   /* mauve shale        */
  --band-07:#4A2C2A;   /* deep terracotta    */
  --band-08:#2B1917;   /* canyon floor       */

  --ink:#2B1917;
  --ink-soft:#6B4C42;
  --ink-faint:#9A8073;
  --paper:#FBF6EE;
  --paper-2:#F3E8DA;
  --line:#D9C6B0;
  --line-strong:#C2622F;

  --ok:#4F7A4A;
  --warn:#B23B2E;

  --display:"Alfa Slab One","Bitter",Georgia,serif;
  --body:"Karla","Helvetica Neue",Arial,sans-serif;

  --w:1160px;
  --gut:clamp(18px,4vw,40px);
  --step:6px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
}

img{max-width:100%;display:block}

a{color:var(--band-05);text-decoration:none;border-bottom:1px solid rgba(194,98,47,.45)}
a:hover{color:var(--band-04);border-bottom-color:var(--band-04)}

h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.05;letter-spacing:.005em;margin:0}
h1{font-size:clamp(2.4rem,6.2vw,4.4rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.15rem,2.1vw,1.5rem)}
h4{font-size:1.02rem;font-family:var(--body);font-weight:700;letter-spacing:.07em;text-transform:uppercase}

p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.15em;padding-left:1.25em}
li{margin-bottom:.4em}

.wrap{width:100%;max-width:var(--w);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.narrow{max-width:760px}

/* --- signature device: layered strata banding ---------------------------- */
.strata{
  height:var(--step);
  background:linear-gradient(
    to bottom,
    var(--band-03) 0 1px,
    var(--band-04) 1px 3px,
    var(--band-05) 3px 4px,
    var(--band-06) 4px 6px
  );
  border:0;
  margin:0;
}
.strata--tall{
  height:22px;
  background:linear-gradient(
    to bottom,
    var(--band-02) 0 3px,
    var(--band-03) 3px 8px,
    var(--band-04) 8px 13px,
    var(--band-05) 13px 17px,
    var(--band-06) 17px 20px,
    var(--band-07) 20px 22px
  );
}
.horizon{
  border:0;
  height:2px;
  background:var(--line-strong);
  margin:2.6rem 0;
  opacity:.5;
}

/* stepped / terraced edge — recurring card treatment */
.terrace{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-left:0;
  padding:1.5rem 1.6rem 1.5rem 1.9rem;
}
.terrace::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:10px;
  background:linear-gradient(
    to bottom,
    var(--band-03) 0 25%,
    var(--band-04) 25% 55%,
    var(--band-05) 55% 80%,
    var(--band-06) 80% 100%
  );
}
.terrace + .terrace{margin-top:1rem}

/* --- header -------------------------------------------------------------- */
.site-head{background:var(--band-08);color:var(--band-01);position:relative}
.head-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding-top:1.05rem;padding-bottom:1.05rem;
}
.brand{display:flex;align-items:center;gap:.7rem;border:0;color:var(--band-01)}
.brand:hover{color:var(--band-03);border:0}
.mark{
  width:38px;height:38px;flex:0 0 38px;
  background:linear-gradient(
    to bottom,
    var(--band-02) 0 6px,
    var(--band-03) 6px 15px,
    var(--band-04) 15px 24px,
    var(--band-05) 24px 32px,
    var(--band-06) 32px 38px
  );
}
.brand-name{font-family:var(--display);font-size:1.32rem;letter-spacing:.02em;line-height:1}
.brand-sub{display:block;font-family:var(--body);font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--band-03);margin-top:.3rem}

.nav{display:flex;align-items:center;gap:1.45rem}
.nav a{
  color:var(--band-02);border:0;font-size:.82rem;letter-spacing:.11em;
  text-transform:uppercase;font-weight:700;padding-bottom:3px;
  border-bottom:2px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--band-03);border-bottom-color:var(--band-04)}

.nav-toggle{
  display:none;background:none;border:1px solid rgba(219,201,178,.4);
  color:var(--band-01);font-family:var(--body);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;
  padding:.6rem .85rem;cursor:pointer;
}
.nav-toggle:hover{border-color:var(--band-03);color:var(--band-03)}

@media (max-width:860px){
  .nav-toggle{display:block}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:40;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--band-07);
    border-top:var(--step) solid var(--band-04);
    box-shadow:0 18px 30px rgba(43,25,23,.3);
  }
  .nav.is-open{display:flex}
  .nav a{
    padding:.95rem var(--gut);border-bottom:1px solid rgba(219,201,178,.14);
    border-left:6px solid transparent;
  }
  .nav a:hover,.nav a[aria-current="page"]{border-bottom-color:rgba(219,201,178,.14);border-left-color:var(--band-03)}
}

/* --- age strip ----------------------------------------------------------- */
.agestrip{
  background:var(--band-07);color:var(--band-02);
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
}
.agestrip .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;padding-top:.6rem;padding-bottom:.6rem}
.agestrip b{color:var(--band-03)}

/* --- hero ---------------------------------------------------------------- */
.hero{
  background:var(--band-08);
  color:var(--band-01);
  background-image:linear-gradient(
    to bottom,
    rgba(220,168,79,.10) 0 14%,
    rgba(194,98,47,.13) 14% 34%,
    rgba(156,75,58,.12) 34% 58%,
    rgba(123,84,104,.14) 58% 80%,
    rgba(43,25,23,0) 80% 100%
  );
  padding:clamp(2.6rem,7vw,4.6rem) 0 clamp(2.2rem,5vw,3.4rem);
}
.hero h1{color:var(--band-01)}
.hero .eyebrow{
  font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--band-03);font-weight:700;margin-bottom:1.1rem;
}
.hero-lede{font-size:clamp(1.02rem,2vw,1.2rem);color:#E3D2C0;max-width:56ch;margin-top:1.2rem}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.8rem,4vw,3rem);align-items:center}
@media (min-width:1000px){.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,560px)}}
.hero-media{
  margin:0;
  overflow:hidden;
  border:1px solid rgba(219,201,178,.18);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  background:var(--band-07);
}
.hero-media img{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
}
.hero--page{padding:clamp(2rem,5vw,3.2rem) 0 clamp(1.6rem,4vw,2.4rem)}
@media (max-width:999px){.hero-media{max-width:520px}}
.table-stage{max-width:760px;margin:0 auto}

.btn{
  display:inline-block;border:0;cursor:pointer;
  font-family:var(--body);font-weight:700;font-size:.85rem;
  letter-spacing:.13em;text-transform:uppercase;
  padding:.92rem 1.6rem;
  background:var(--band-04);color:#FFF7EC;
  box-shadow:inset 0 -5px 0 var(--band-05);
}
.btn:hover{background:var(--band-05);box-shadow:inset 0 -5px 0 var(--band-07);color:#FFF7EC}
.btn--ghost{background:transparent;color:var(--band-02);box-shadow:inset 0 0 0 2px var(--band-06)}
.btn--ghost:hover{background:var(--band-06);color:#FFF7EC;box-shadow:inset 0 0 0 2px var(--band-06)}
.btn--sm{padding:.62rem 1.05rem;font-size:.74rem}
.btn[disabled]{opacity:.42;cursor:not-allowed;box-shadow:inset 0 -5px 0 rgba(0,0,0,.2)}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}

/* --- sections ------------------------------------------------------------ */
.section{padding:clamp(2.6rem,6vw,4.4rem) 0}
.section--sand{background:var(--paper-2)}
.section--deep{background:var(--band-07);color:var(--band-02)}
.section--deep h2,.section--deep h3{color:var(--band-01)}
.section--deep a{color:var(--band-03);border-bottom-color:rgba(220,168,79,.5)}
.sec-label{
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  font-weight:700;color:var(--band-04);margin-bottom:.85rem;
}
.section--deep .sec-label{color:var(--band-03)}
.sec-head{max-width:70ch;margin-bottom:2.2rem}

.cols{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media (min-width:720px){.cols-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.cols-3{grid-template-columns:repeat(3,1fr)}}

.terrace h3{margin-bottom:.5rem}
.terrace p:last-child{margin-bottom:0}
.section--deep .terrace{background:var(--band-08);border-color:rgba(219,201,178,.18);color:var(--band-02)}

/* --- game ---------------------------------------------------------------- */
.table{
  background:var(--band-08);
  border-top:var(--step) solid var(--band-04);
  border-bottom:var(--step) solid var(--band-06);
  color:var(--band-01);
  padding:1.4rem clamp(1rem,3vw,1.7rem) 1.7rem;
}
.table-top{
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:baseline;
  justify-content:space-between;border-bottom:1px solid rgba(219,201,178,.2);
  padding-bottom:.85rem;margin-bottom:1.2rem;
}
.game-title{font-family:var(--display);font-size:1.28rem;color:var(--band-03)}
.meters{display:flex;gap:1.6rem;flex-wrap:wrap}
.meter span{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--band-06);filter:brightness(1.5)}
.meter strong{font-family:var(--display);font-size:1.5rem;color:var(--band-02);line-height:1.1}

.seat{margin-bottom:1.1rem}
.seat-label{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--band-03);margin-bottom:.5rem;display:flex;gap:.7rem;align-items:baseline;
}
.seat-score{
  font-family:var(--display);font-size:.95rem;color:var(--band-02);letter-spacing:0;
  background:rgba(219,201,178,.1);padding:.05rem .5rem;
}
.hand{display:flex;gap:.55rem;flex-wrap:wrap;min-height:108px;align-items:flex-start}

.card{
  width:74px;height:104px;flex:0 0 74px;
  background:var(--band-01);color:var(--band-08);
  border:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:.4rem .45rem;
  font-weight:700;font-size:1rem;line-height:1;
  box-shadow:0 4px 0 rgba(0,0,0,.28);
  animation:deal .32s ease-out both;
}
.card .rank{font-family:var(--display);font-size:1.15rem}
.card .pip{align-self:flex-end;font-size:1.35rem;line-height:1}
.card.red{color:var(--band-04)}
.card.back{
  background:linear-gradient(
    to bottom,
    var(--band-03) 0 18%,
    var(--band-04) 18% 42%,
    var(--band-05) 42% 68%,
    var(--band-06) 68% 88%,
    var(--band-07) 88% 100%
  );
  border-color:var(--band-07);
}
@keyframes deal{
  from{opacity:0;transform:translateY(-14px) rotateY(82deg) scale(.9)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.card{animation:none}}

.controls{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1.2rem;
  padding-top:1.2rem;border-top:1px solid rgba(219,201,178,.2)}
.stake{display:flex;align-items:center;gap:.5rem;margin-right:.6rem}
.stake span{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--band-03)}
.chip{
  background:transparent;color:var(--band-02);cursor:pointer;
  border:2px solid var(--band-06);font-family:var(--body);font-weight:700;
  font-size:.8rem;padding:.45rem .8rem;
}
.chip:hover{border-color:var(--band-03);color:var(--band-03)}
.chip[aria-pressed="true"]{background:var(--band-03);border-color:var(--band-03);color:var(--band-08)}
.chip[disabled]{opacity:.35;cursor:not-allowed}

.callout{
  margin-top:1.1rem;padding:.9rem 1.1rem;
  background:rgba(219,201,178,.08);
  border-left:var(--step) solid var(--band-06);
  font-size:.95rem;color:var(--band-02);min-height:3.2rem;
}
.callout b{font-family:var(--display);font-weight:400;font-size:1.1rem;display:block;margin-bottom:.15rem}
.callout.win{border-left-color:var(--band-03);background:rgba(220,168,79,.14)}
.callout.win b{color:var(--band-03)}
.callout.lose{border-left-color:var(--band-04);background:rgba(194,98,47,.14)}
.callout.lose b{color:#E8A88C}
.callout.push{border-left-color:var(--band-02)}
.callout.jack{border-left-color:var(--band-03);background:rgba(220,168,79,.22)}
.callout.jack b{color:var(--band-03);font-size:1.35rem}

.freeline{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--band-06);filter:brightness(1.5);margin-top:1rem}

/* --- rules panel --------------------------------------------------------- */
.rules{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:760px){.rules{grid-template-columns:repeat(3,1fr)}}
.rules dl{margin:0}
.rules dt{font-weight:700;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--band-05);margin-top:.7rem}
.rules dd{margin:.15rem 0 0}

/* --- faq ----------------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq > div{border-bottom:1px solid var(--line);padding:1.3rem 0}
.faq h3{font-family:var(--body);font-size:1.05rem;font-weight:700;margin-bottom:.45rem}
.faq p:last-child{margin-bottom:0}

/* --- legal --------------------------------------------------------------- */
.legal h2{font-size:1.35rem;margin:2.2rem 0 .7rem}
.legal h2:first-of-type{margin-top:1rem}
.legal p,.legal li{color:var(--ink-soft)}

/* --- footer -------------------------------------------------------------- */
.site-foot{background:var(--band-08);color:#C9B4A2;padding:2.8rem 0 2rem;font-size:.92rem}
.foot-grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media (min-width:820px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr}}
.site-foot h4{color:var(--band-03);font-size:.72rem;letter-spacing:.2em;margin-bottom:.9rem}
.site-foot a{color:#E0CDBA;border:0}
.site-foot a:hover{color:var(--band-03)}
.foot-links{list-style:none;padding:0;margin:0}
.foot-links li{margin-bottom:.5rem}
.foot-note{
  margin-top:2.2rem;padding-top:1.3rem;border-top:1px solid rgba(219,201,178,.16);
  font-size:.8rem;color:#9E8878;
}
.foot-note p{margin-bottom:.5rem}
.foot-age{
  display:inline-block;border:2px solid var(--band-04);color:var(--band-03);
  font-weight:700;letter-spacing:.12em;font-size:.74rem;padding:.3rem .7rem;margin-bottom:.9rem;
}