/* Yodoku — product page for Yordan Creatives
   Same tokens and editorial rules as the company site: paper, ink, one accent,
   thin rules, tabular numbers. No webfonts, no external requests. */

:root{
  --paper:#ffffff;
  --ink:#0b0b0c;
  --muted:#5a5a62;
  --rule:#e2e2e6;
  --accent:#1f3ae0;
  --display:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:1180px;
  --gut:clamp(1rem,4vw,3rem);
}

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

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.95rem + .2vw,1.075rem);
  line-height:1.6;
  text-rendering:optimizeLegibility;
}
img,canvas{max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

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

.skip{
  position:absolute;left:-9999px;
  background:var(--ink);color:var(--paper);
  padding:.75rem 1rem;z-index:99;
}
.skip:focus{left:1rem;top:1rem}

/* ---------- top bar ---------- */
.top{border-bottom:1px solid var(--rule)}
.top-inner{
  display:flex;align-items:center;gap:1.25rem 2rem;
  padding-block:1.1rem;
  flex-wrap:wrap;
}
.wordmark{
  font-family:var(--display);
  font-size:1.3rem;
  letter-spacing:-.01em;
  text-decoration:none;
  line-height:1;
}
.wordmark span{
  display:block;
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:.35rem;
}
.top nav{
  display:flex;gap:1.25rem;
  margin-left:auto;flex-wrap:wrap;
}
.top nav a{
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;color:var(--muted);
  padding-block:.4rem;
  border-bottom:1px solid transparent;
  white-space:nowrap;
}
.top nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(2rem,4vw,3.25rem) clamp(1.75rem,3vw,2.5rem)}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2.25rem,5vw,3.5rem);
  align-items:start;
}
.kicker{
  margin:0 0 clamp(1.25rem,3vw,2rem);
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);
}
.hero h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.3rem,6.2vw,4.9rem);
  line-height:.98;
  letter-spacing:-.025em;
  margin:0;
  max-width:19ch;
  text-wrap:balance;
}
.hero h1 em{color:var(--accent);font-style:italic}
.hero-lede{
  margin:clamp(1.25rem,3vw,1.75rem) 0 0;
  font-size:clamp(1.08rem,1rem + .5vw,1.3rem);
  line-height:1.45;
  max-width:44ch;
}
.hero-body{
  display:grid;
  gap:1rem;
  margin-top:clamp(1.25rem,3vw,1.75rem);
  max-width:60ch;
}
.hero-body p{margin:0;color:var(--muted)}
.hero-body p + p{max-width:46ch}

.hero-cta{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.75rem 1.25rem;
  margin:clamp(1.75rem,3vw,2.25rem) 0 0;
}
.go{
  display:inline-block;
  font-size:.92rem;letter-spacing:.04em;
  text-decoration:none;
  padding-bottom:.2rem;
  border-bottom:2px solid var(--accent);
}
.go span{color:var(--accent);margin-left:.15rem}
.go:hover{color:var(--accent)}
.hero-cta-note{font-size:.76rem;color:var(--muted)}

/* ---------- the board ---------- */
.board{margin:0;width:100%;max-width:440px}
#board-canvas{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  background:var(--paper);
}
.board-cap{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:.75rem;
  margin-top:.1rem;
  padding-top:.6rem;
  border-top:1px solid var(--ink);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.board-state{color:var(--accent)}
.board-count{color:var(--ink)}
.board-count b{font-weight:500;font-variant-numeric:tabular-nums}

/* ---------- section head ---------- */
section{padding-block:clamp(2.25rem,4.5vw,4rem)}
.section-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.5rem 1.25rem;
  align-items:baseline;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--ink);
  margin-bottom:clamp(1.25rem,2.5vw,2rem);
}
.marker{
  font-size:.7rem;letter-spacing:.16em;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  grid-row:1;
}
.section-head h2{
  grid-row:1;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.65rem,1.25rem + 2vw,2.6rem);
  letter-spacing:-.02em;
  line-height:1.05;
  margin:0;
}
.section-head p{
  grid-column:2;
  margin:.5rem 0 0;
  max-width:56ch;
  color:var(--muted);
}

/* ---------- how it plays ---------- */
.steps{
  list-style:none;margin:0;padding:0;
  border-top:1px solid var(--rule);
}
.steps li{
  display:grid;
  grid-template-columns:2.25rem minmax(0,1fr);
  gap:.15rem 1rem;
  padding-block:1.35rem;
  border-bottom:1px solid var(--rule);
}
.step-num{
  font-size:.7rem;letter-spacing:.12em;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  padding-top:.4rem;
}
.steps h3{
  margin:0 0 .3rem;
  font-size:1.02rem;font-weight:600;
  letter-spacing:-.005em;line-height:1.35;
}
.steps p{margin:0;color:var(--muted);max-width:56ch}

/* ---------- seven games ---------- */
.modes{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.mode{
  display:grid;
  grid-template-columns:1.75rem minmax(0,1fr) 56px;
  gap:.35rem .95rem;
  align-items:start;
  padding-block:1.2rem;
  border-bottom:1px solid var(--rule);
}
.mode-num{
  grid-column:1;grid-row:1;
  font-size:.7rem;letter-spacing:.1em;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  padding-top:.35rem;
}
.mode h3{
  grid-column:2;grid-row:1;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .6rem;
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:1.14rem;
  letter-spacing:-.01em;
  line-height:1.15;
}
.mode-tag{
  font-family:var(--sans);
  font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--rule);
  padding:.18rem .35rem;
  white-space:nowrap;
}
.mode p{
  grid-column:2 / -1;grid-row:2;
  margin:.45rem 0 0;
  color:var(--muted);
  font-size:.92rem;
  max-width:56ch;
}
.mode-board{
  grid-column:3;grid-row:1;
  justify-self:end;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  grid-template-rows:repeat(7,1fr);
  width:56px;height:56px;
  border:1px solid var(--rule);
  /* grid present even before the script draws the cells */
  background-image:
    repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px 14.2857%),
    repeating-linear-gradient(180deg,var(--rule) 0 1px,transparent 1px 14.2857%);
}
.mode-board .cell{
  background:var(--paper);
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.mode-board .cell:nth-child(7n){border-right:0}
.mode-board .cell:nth-child(n+43){border-bottom:0}
.mode-board .cell.on{background:var(--accent)}
.mode-board .cell.on.mid{background:var(--ink)}

/* ---------- why ---------- */
.prose p{margin:0 0 1.1rem;max-width:64ch}
.prose p:last-child{margin-bottom:0}
.prose a{text-decoration:underline;text-underline-offset:.15em}

/* ---------- play ---------- */
.play{
  border-top:2px solid var(--accent);
  border-bottom:1px solid var(--rule);
  padding-block:clamp(2.5rem,5vw,4rem);
}
.play h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.8rem,1.3rem + 2.6vw,3.1rem);
  letter-spacing:-.02em;
  line-height:1.04;
  margin:.55rem 0 1rem;
  max-width:20ch;
}
.play > .wrap > p{margin:0 0 1.75rem;color:var(--muted);max-width:52ch}
.play-link{
  display:inline-flex;align-items:baseline;gap:.5rem;
  font-family:var(--display);
  font-size:clamp(1.65rem,1.2rem + 2.6vw,2.7rem);
  letter-spacing:-.02em;
  line-height:1.1;
  text-decoration:none;
  border-bottom:3px solid var(--accent);
  padding-bottom:.15rem;
  overflow-wrap:anywhere;
}
.play-link:hover{color:var(--accent)}
.play-arrow{font-size:.62em;color:var(--accent);line-height:1}

.play-facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
  margin:2rem 0 0;
  max-width:620px;
}
.play-facts > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  background:var(--paper);
  padding:.8rem 1rem;
}
.play-facts dt{
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
.play-facts dd{
  margin:0;
  font-size:.95rem;
  font-variant-numeric:tabular-nums;
}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--ink);
  padding-block:2rem 3rem;
}
.footer-grid{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:1.25rem;flex-wrap:wrap;
  padding-bottom:1.4rem;
}
.footer-name{
  font-family:var(--display);font-size:1.1rem;margin:0;letter-spacing:-.01em;
}
.site-footer nav{display:flex;gap:1.1rem;flex-wrap:wrap}
.site-footer nav a{
  font-size:.8rem;color:var(--muted);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:.1rem;
}
.site-footer nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.footer-legal{
  margin:0 0 .75rem;
  font-size:.76rem;
  line-height:1.65;
  color:var(--muted);
  max-width:88ch;
  overflow-wrap:anywhere;
}
.footer-legal a{color:var(--ink);text-decoration:underline;text-underline-offset:.15em}

/* ---------- wider screens ---------- */
@media (min-width:560px){
  .mode{grid-template-columns:1.9rem minmax(0,1fr) 76px;gap:.35rem 1.25rem}
  .mode-board{width:76px;height:76px}
  .play-facts{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:860px){
  .hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(260px,380px);
    gap:clamp(2.5rem,5vw,4.5rem);
  }
  .board{max-width:380px;justify-self:end}
  .steps li{grid-template-columns:3rem minmax(0,1fr);gap:.15rem 1.5rem}
  .mode{grid-template-columns:2.5rem minmax(0,1fr) 96px;gap:.4rem 1.75rem;padding-block:1.4rem}
  .mode-num,.step-num{font-size:.72rem}
  .mode h3{font-size:1.28rem}
  .mode-board{width:96px;height:96px}
}
@media (max-width:859px){
  /* On a phone the board follows the lede: the argument before the detail. */
  .hero-copy{display:contents}
  .kicker{order:1}
  .hero h1{order:2}
  .hero-lede{order:3}
  .board{order:4;max-width:100%;margin-top:clamp(1.5rem,5vw,2rem)}
  .hero-body{order:5}
  .hero-cta{order:6}
}
@media (max-width:639px){
  .top-inner{gap:.9rem 1rem}
  .top nav{margin-left:0;width:100%;gap:1rem}
  .top nav a{font-size:.74rem}
  .board{max-width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}