/* כולם חשודים — storefront.
   Direction: a case file, kept premium rather than kitsch. Bone paper, ink,
   oxblood. Timestamps in monospace run through the page as section markers,
   because the product's whole mechanic is a timeline. RTL, logical properties
   only, so an English edition needs no override sheet. */

@font-face { font-family: "Secular One";      src: url("assets/SecularOne.ttf")     format("truetype"); font-weight: 400;     font-display: swap; }
@font-face { font-family: "Heebo";            src: url("assets/Heebo.ttf")          format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Frank Ruhl Libre"; src: url("assets/FrankRuhlLibre.ttf") format("truetype"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Miriam Libre";     src: url("assets/MiriamLibre.ttf")    format("truetype"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Cousine";          src: url("assets/Cousine.ttf")        format("truetype"); font-weight: 400;     font-display: swap; }

:root {
  --ink:        #101215;
  --ink-2:      #1b1f24;
  --paper:      #f4f2ed;
  --paper-2:    #eae7df;
  --card:       #ffffff;
  --muted:      #6b7078;
  --line:       #d6d2c8;
  --hair:       #e6e2d9;
  --accent:     #8f1d1a;
  --accent-lo:  #f3e5e2;
  --brass:      #a8834a;

  --display: "Secular One", "Frank Ruhl Libre", serif;
  --serif:   "Frank Ruhl Libre", Georgia, serif;
  --sans:    "Heebo", "Arial Hebrew", Arial, sans-serif;
  --official:"Miriam Libre", "Heebo", sans-serif;
  --mono:    "Cousine", "Courier New", monospace;

  --wrap: 72rem;
  --r: 3px;
  --shadow: 0 1px 2px rgba(16,18,21,.05), 0 12px 32px rgba(16,18,21,.07);
}

* { box-sizing: border-box; }
html { direction: rtl; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(18px, 5vw, 40px); }

h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1.02; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.15; }
h3 { font-family: var(--sans); font-weight: 700; font-size: 1.06rem; letter-spacing: 0; }
p  { margin: 0; }

/* the timestamp motif ------------------------------------------------- */

.stamp {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.stamp::before { content: ""; inline-size: 26px; block-size: 1px; background: var(--accent); opacity: .7; }

/* top bar -------------------------------------------------------------- */

.topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-block-end: 1px solid var(--hair);
}
.topbar .wrap { display: flex; align-items: center; gap: 20px; padding-block: 13px; }
.topbar a { text-decoration: none; }
.brandmark { font-family: var(--display); font-size: 1.22rem; color: var(--ink); letter-spacing: -0.02em; }
.brandmark span { color: var(--accent); }
.topbar nav { display: flex; gap: 20px; margin-inline-start: auto; font-size: 0.94rem; }
.topbar nav a { color: var(--muted); }
.topbar nav a:hover { color: var(--ink); }

/* hero ----------------------------------------------------------------- */

.hero { position: relative; background: var(--ink); color: #f2efe9; overflow: hidden; }
/* The art is portrait; cap it so short copy does not leave a field of black. */
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  padding-block: clamp(48px, 8vw, 96px);
}
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }

.hero-copy { display: flex; flex-direction: column; gap: 20px; }
.hero .stamp { color: #b9b2a8; }
.hero .stamp::before { background: var(--brass); }
.hero h1 { color: #fbf9f6; }
.hero .lede { font-family: var(--serif); font-size: 1.16rem; line-height: 1.6; color: #ddd7cf; max-width: 34rem; }

.facts { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.facts span {
  font-family: var(--official);
  font-size: 0.8rem;
  color: #cbc4ba;
  border: 1px solid #2f343b;
  border-radius: 100px;
  padding: 5px 12px;
}

.hero-art {
  position: relative; margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
  aspect-ratio: 3 / 4;
  max-block-size: 560px;
  margin-inline-start: auto;
}
.hero-art img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero-art figcaption {
  position: absolute;
  inset-block-end: 0; inset-inline: 0;
  padding: 26px 20px 14px;
  background: linear-gradient(to top, rgba(8,9,10,.92), transparent);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: #cfc8bf;
}

/* buttons -------------------------------------------------------------- */

.cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-family: var(--sans); font-weight: 700; font-size: 1rem;
  padding: 14px 24px; border-radius: var(--r); border: 1px solid var(--accent);
  align-self: flex-start;
  transition: transform .15s ease, background .15s ease;
}
.cta:hover { background: #7a1715; transform: translateY(-1px); }
.cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.cta .price { font-family: var(--display); font-size: 1.16rem; }
.cta.ghost { background: transparent; color: inherit; border-color: currentColor; opacity: .92; }
.cta.ghost:hover { background: rgba(255,255,255,.08); }
.cta.dark { background: var(--ink); border-color: var(--ink); }
.cta.dark:hover { background: #000; }

/* sections ------------------------------------------------------------- */

section { padding-block: clamp(52px, 8vw, 96px); }
section.tint { background: var(--paper-2); }
.section-head { display: flex; flex-direction: column; gap: 12px; margin-block-end: 36px; max-width: 46rem; }
.section-head p { color: var(--muted); font-size: 1.04rem; }

/* game catalogue ------------------------------------------------------- */

.games { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.game {
  position: relative; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column;
  text-decoration: none; color: inherit; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.game:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(16,18,21,.06), 0 20px 46px rgba(16,18,21,.12); }
.game .thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px),
    var(--ink-2);
}
.game .thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.game .body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.game h3 { font-family: var(--display); font-weight: 400; font-size: 1.55rem; }
.game .meta { display: flex; flex-wrap: wrap; gap: 6px; }
.game .meta span {
  font-family: var(--official); font-size: 0.74rem; color: var(--muted);
  border: 1px solid var(--hair); border-radius: 100px; padding: 3px 10px;
}
.game .blurb { color: var(--muted); font-size: 0.97rem; font-family: var(--serif); }
.game .foot {
  margin-block-start: auto; padding-block-start: 14px; border-block-start: 1px solid var(--hair);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.game .from { font-family: var(--display); font-size: 1.3rem; }
.game .go { font-size: 0.92rem; color: var(--accent); font-weight: 600; }

.badge {
  position: absolute; inset-block-start: 14px; inset-inline-end: 14px;
  font-family: var(--official); font-size: 0.72rem; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 100px;
  background: var(--card); border: 1px solid var(--line); color: var(--muted);
}
.badge.soon { background: var(--ink); color: #ded7cd; border-color: var(--ink); }
.badge.testing { background: var(--accent-lo); color: var(--accent); border-color: #e3c6c2; }

/* contact sheet — real pages from the kit ------------------------------ */

.sheet { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.sheet figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sheet .frame {
  background: var(--card); border: 1px solid var(--line); border-radius: 2px;
  padding: 8px; box-shadow: var(--shadow); transition: transform .18s ease;
}
.sheet figure:hover .frame { transform: rotate(-.6deg) translateY(-2px); }
.sheet img { aspect-ratio: 1 / 1.35; object-fit: cover; object-position: top center; }
.sheet figcaption { font-family: var(--official); font-size: 0.84rem; color: var(--muted); }
.sheet figcaption strong { display: block; color: var(--ink); font-size: 0.94rem; font-weight: 700; }

/* steps ---------------------------------------------------------------- */

.steps { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.step { display: flex; flex-direction: column; gap: 8px; padding-block-start: 16px; border-block-start: 2px solid var(--ink); }
.step .n { font-family: var(--mono); font-size: 0.78rem; color: var(--accent); letter-spacing: 0.1em; }
.step p { color: var(--muted); font-size: 0.98rem; }

/* feature list --------------------------------------------------------- */

.features { display: grid; gap: 2px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; }
.feature { background: var(--paper); padding: 22px 24px; display: grid; grid-template-columns: 13rem 1fr; gap: 18px; align-items: baseline; }
@media (max-width: 720px) { .feature { grid-template-columns: 1fr; gap: 6px; } }
.feature dt { font-family: var(--official); font-weight: 700; font-size: 1rem; }
.feature dd { margin: 0; color: var(--muted); font-size: 0.99rem; }

/* editions / pricing --------------------------------------------------- */

.editions { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); align-items: start; }
.edition {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px; display: flex; flex-direction: column; gap: 12px;
}
.edition.featured { border-color: var(--ink); border-width: 2px; }
.edition .who { font-family: var(--official); font-size: 0.82rem; color: var(--muted); letter-spacing: 0.04em; }
.edition .amount { font-family: var(--display); font-size: 2.6rem; line-height: 1; }
.edition .amount small { font-size: 1rem; color: var(--muted); }
.edition ul { margin: 0; padding-inline-start: 1.15em; display: flex; flex-direction: column; gap: 7px; font-size: 0.96rem; color: var(--muted); }
.edition li::marker { color: var(--accent); }

/* honesty block -------------------------------------------------------- */

.notice {
  border: 1px solid var(--line); border-inline-start: 3px solid var(--brass);
  background: var(--card); border-radius: var(--r); padding: 20px 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.notice strong { font-family: var(--official); }
.notice p { color: var(--muted); font-size: 0.98rem; }

/* faq ------------------------------------------------------------------ */

.faq { border-block-start: 1px solid var(--hair); }
details { border-block-end: 1px solid var(--hair); padding-block: 18px; }
details summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 18px; align-items: baseline; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; color: var(--accent); font-size: 1.35rem; line-height: 1; }
details[open] summary::after { content: "–"; }
details .a { margin-block-start: 10px; color: var(--muted); font-family: var(--serif); font-size: 1.02rem; }

/* article cards -------------------------------------------------------- */

.postlist { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.postlist a {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 24px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s ease, transform .15s ease;
}
.postlist a:hover { border-color: var(--ink); transform: translateY(-2px); }
.postlist h3 { font-family: var(--display); font-weight: 400; font-size: 1.24rem; }
.postlist p { color: var(--muted); font-size: 0.95rem; }

/* footer --------------------------------------------------------------- */

footer { background: var(--ink); color: #b9b2a8; padding-block: 46px; font-size: 0.92rem; }
footer .wrap { display: flex; flex-direction: column; gap: 14px; }
footer .brandmark { color: #f2efe9; }
footer .brandmark span { color: var(--accent-lo); }
footer nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
footer a { color: #cfc8bf; text-decoration: none; }
footer a:hover { color: #fff; }

/* articles ------------------------------------------------------------- */

.article { padding-block: clamp(32px, 5vw, 60px) 0; }
.article .wrap { max-width: 44rem; }
.article h1 { font-size: clamp(2rem, 5vw, 3.1rem); margin-block-end: 14px; }
.article .standfirst { font-family: var(--serif); font-size: 1.16rem; color: var(--muted); margin-block-end: 24px; }
.article .meta { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); margin-block-end: 32px; }
.article h2 { font-size: 1.55rem; margin-block: 40px 12px; }
.article h3 { margin-block: 26px 8px; }
.article p { margin-block-end: 16px; font-size: 1.04rem; }
.article ul, .article ol { margin: 0 0 20px; padding-inline-start: 1.3em; display: flex; flex-direction: column; gap: 9px; }
.article li::marker { color: var(--accent); }
.article .callout { background: var(--card); border-inline-start: 3px solid var(--accent); border-radius: 0 var(--r) var(--r) 0; padding: 18px 22px; margin-block: 26px; }
.article .callout p:last-child { margin-block-end: 0; }
.article table { inline-size: 100%; border-collapse: collapse; margin-block-end: 24px; font-size: 0.97rem; }
.article th, .article td { text-align: start; padding: 11px 12px; border-block-end: 1px solid var(--hair); vertical-align: top; }
.article thead th { font-family: var(--official); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--muted); border-block-end: 2px solid var(--line); }
.endcap { margin-block: 46px 0; border: 1px solid var(--line); border-radius: var(--r); padding: 28px; background: var(--card); display: flex; flex-direction: column; gap: 12px; }
.endcap h3 { font-family: var(--display); font-weight: 400; font-size: 1.45rem; }
.endcap p { color: var(--muted); margin: 0; }

/* legal ---------------------------------------------------------------- */

.legal { padding-block: clamp(40px, 7vw, 72px); }
.legal .wrap { max-width: 46rem; display: flex; flex-direction: column; gap: 20px; }
.legal h2 { font-size: 1.35rem; margin-block-start: 18px; }
.legal ol, .legal ul { margin: 0; padding-inline-start: 1.3em; display: flex; flex-direction: column; gap: 9px; }
.legal .updated { color: var(--muted); font-size: 0.9rem; }
.draft { background: #fff8e6; border: 1px solid #e4c86a; border-radius: var(--r); padding: 16px 20px; font-size: 0.94rem; }

/* motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise .6s cubic-bezier(.2,.7,.3,1) both; }
  .reveal:nth-child(2) { animation-delay: .06s; }
  .reveal:nth-child(3) { animation-delay: .12s; }
  .reveal:nth-child(4) { animation-delay: .18s; }
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}