/* ==========================================================================
   Picoli Games — studio site
   Visual direction: desert field survey. Warm near-black ground, ochre accent,
   topographic contour field, mono data labels, expanded grotesque display.
   Deliberately single-theme (dark): the studio's own visual world.
   ========================================================================== */

:root{
  /* ground + surfaces (warm-biased neutrals, never pure grey) */
  --ground:#12100E;
  --ground-2:#0D0B09;
  --surface:#1A1713;
  --surface-2:#211D18;
  --line:#2E2820;
  --line-strong:#463D31;

  /* ink */
  --ink:#EFE8DC;
  --ink-2:#B3A899;
  --ink-3:#867B6D;

  /* accent — desert ochre */
  --accent:#D07E2E;
  --accent-hi:#E9A055;
  --accent-soft:rgba(208,126,46,.13);

  /* semantic (kept separate from accent) */
  --live:#93A672;
  --live-soft:rgba(147,166,114,.14);

  --measure:66ch;
  --page:1180px;
  --rail:9.5rem;

  --step--1:.8125rem;
  --step-0:1rem;
  --step-1:1.1875rem;
  --step-2:clamp(1.4rem,2.4vw,1.85rem);
  --step-3:clamp(1.85rem,4vw,2.9rem);
  --step-4:clamp(2.4rem,6.4vw,4.6rem);

  --sans:"IBM Plex Sans","IBM Plex Sans Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --arabic:"IBM Plex Sans Arabic","IBM Plex Sans",-apple-system,"Segoe UI",sans-serif;
  --display:"Archivo","IBM Plex Sans",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

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

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

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* --- bilingual switching -------------------------------------------------
   Both languages ship in the HTML; CSS hides the inactive one, so the page
   still reads correctly with JavaScript disabled (English by default).       */
:root:not([data-lang="ar"]) [lang="ar"]{display:none !important}
[data-lang="ar"] [lang="en"]{display:none !important}
[lang="ar"]{font-family:var(--arabic);line-height:1.9}
[data-lang="ar"] .mono{letter-spacing:.08em}

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

a{color:inherit}

:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent-hi);
  outline-offset:3px;
  border-radius:2px;
}

/* --- type ---------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-variation-settings:"wdth" 116;
  font-weight:700;
  line-height:1.05;
  text-wrap:balance;
  margin:0;
  letter-spacing:-.015em;
}
h1[lang="ar"],h2[lang="ar"],h3[lang="ar"],h4[lang="ar"]{
  font-family:var(--arabic);
  font-variation-settings:normal;
  line-height:1.35;
  letter-spacing:0;
}
h1{font-size:var(--step-4);text-transform:uppercase;letter-spacing:-.02em}
h1[lang="ar"]{text-transform:none}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);font-variation-settings:"wdth" 108;letter-spacing:0}

p{margin:0;max-width:var(--measure)}

.mono{
  font-family:var(--mono);
  font-size:var(--step--1);
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--ink-3);
}

.lede{font-size:var(--step-1);color:var(--ink-2);max-width:58ch}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}

/* --- layout shell -------------------------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--page);
  margin-inline:auto;
  padding-inline:clamp(1.15rem,4vw,2.75rem);
}

/* Two-column band: label rail in the margin, content beside it.
   The rail carries the section's name — a map margin, not decoration. */
.band{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3rem);
  padding-block:clamp(3.25rem,7vw,5.5rem);
  border-top:1px solid var(--line);
}
.band > .band-label{
  padding-top:.55rem;
  position:sticky;
  top:5.5rem;
  align-self:start;
  height:max-content;
}
.band-body{display:flex;flex-direction:column;gap:clamp(1.5rem,3vw,2.25rem);min-width:0}

@media (max-width:820px){
  .band{grid-template-columns:1fr;gap:1.1rem;padding-block:2.75rem}
  .band > .band-label{position:static;padding-top:0}
}

/* --- header -------------------------------------------------------------- */
.site-head{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{
  display:flex;align-items:center;gap:clamp(.75rem,3vw,2rem);
  min-height:4.25rem;
}
.brand{
  display:inline-flex;align-items:center;gap:.6rem;
  text-decoration:none;flex:0 0 auto;
}
.brand svg{width:22px;height:22px;flex:0 0 auto}
.brand-name{
  font-family:var(--display);
  font-variation-settings:"wdth" 112;
  font-weight:700;font-size:.98rem;
  text-transform:uppercase;letter-spacing:.06em;
  white-space:nowrap;
}
.site-nav{
  display:flex;gap:clamp(.85rem,2.4vw,1.6rem);
  margin-inline-start:auto;
  overflow-x:auto;
  scrollbar-width:none;
  padding-block:.4rem;
}
.site-nav::-webkit-scrollbar{display:none}
.site-nav a{
  font-family:var(--mono);
  font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-2);text-decoration:none;white-space:nowrap;
  padding-block:.35rem;
  border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--accent-hi);border-bottom-color:var(--accent)}
.site-nav a[lang="ar"]{font-family:var(--arabic);letter-spacing:0;font-size:.85rem}

.lang-toggle{
  flex:0 0 auto;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);background:transparent;
  border:1px solid var(--line-strong);border-radius:2px;
  padding:.42rem .7rem;cursor:pointer;
  transition:color .18s ease,border-color .18s ease,background .18s ease;
}
.lang-toggle:hover{color:var(--ink);border-color:var(--accent);background:var(--accent-soft)}

/* --- hero ---------------------------------------------------------------- */
.hero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--line)}
.hero canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:-2;
  opacity:.8;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to right,rgba(18,16,14,.98) 8%,rgba(18,16,14,.74) 38%,rgba(18,16,14,0) 72%),
    linear-gradient(to bottom,rgba(18,16,14,0) 58%,rgba(18,16,14,1) 100%);
}
[data-lang="ar"] .hero::after{
  background:
    linear-gradient(to left,rgba(18,16,14,.98) 8%,rgba(18,16,14,.74) 38%,rgba(18,16,14,0) 72%),
    linear-gradient(to bottom,rgba(18,16,14,0) 58%,rgba(18,16,14,1) 100%);
}
@media (max-width:820px){
  .hero canvas{opacity:.34}
  .hero::after{background:linear-gradient(to bottom,rgba(18,16,14,.55),rgba(18,16,14,1) 92%)}
}
.hero .wrap{
  display:flex;flex-direction:column;gap:clamp(1.25rem,3vw,1.9rem);
  padding-block:clamp(3.25rem,9vh,5.5rem) clamp(2.75rem,6vh,4.25rem);
}
.hero h1{max-width:15ch}
.hero h1 .accentline{color:var(--accent-hi);display:block}

.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.4rem}
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.13em;
  text-decoration:none;padding:.78rem 1.25rem;border-radius:2px;
  border:1px solid var(--line-strong);color:var(--ink);
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#150F07;font-weight:500}
.btn-primary:hover{background:var(--accent-hi);border-color:var(--accent-hi)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-hi);background:var(--accent-soft)}
.btn[lang="ar"]{font-family:var(--arabic);letter-spacing:0;font-size:.9rem}

/* --- cards / grids ------------------------------------------------------- */
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.grid-3 > .cell{background:var(--surface);padding:clamp(1.25rem,2.5vw,1.75rem);display:flex;flex-direction:column;gap:.65rem}
.cell h3{color:var(--ink)}
.cell p{font-size:.94rem;color:var(--ink-2)}

.card{
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  padding:clamp(1.4rem,3vw,2.25rem);
  display:flex;flex-direction:column;gap:1.15rem;
}
.card-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.9rem;justify-content:space-between}

.chip{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;
  padding:.3rem .6rem;border-radius:2px;
  border:1px solid var(--live);color:var(--live);background:var(--live-soft);
  white-space:nowrap;
}
.chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--live)}
.chip[lang="ar"]{font-family:var(--arabic);letter-spacing:0;font-size:.8rem}

/* spec list — real data about the game, laid out as a spec sheet */
.specs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--line);border-block:1px solid var(--line);
  margin:0;
}
@media (max-width:700px){.specs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.specs{grid-template-columns:1fr}}
.specs > div{background:var(--surface);padding:.85rem 1rem;display:flex;flex-direction:column;gap:.2rem}
.specs dt{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.15em;color:var(--ink-3)}
.specs dd{margin:0;font-size:.92rem;color:var(--ink);font-variant-numeric:tabular-nums}
.specs dt[lang="ar"],.specs dd[lang="ar"]{font-family:var(--arabic);letter-spacing:0}

ul.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
ul.ticks li{
  position:relative;padding-inline-start:1.3rem;color:var(--ink-2);font-size:.94rem;
  max-width:var(--measure);
}
ul.ticks li::before{
  content:"";position:absolute;inset-inline-start:0;top:.72em;
  width:.5rem;height:1px;background:var(--accent);
}

/* facts table (studio + press) */
.facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);max-width:44rem}
.facts > div{
  background:var(--surface);display:grid;grid-template-columns:minmax(7.5rem,12rem) minmax(0,1fr);
  gap:1rem;padding:.8rem 1rem;
}
.facts dt{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;color:var(--ink-3);padding-top:.18rem}
.facts dd{margin:0;font-size:.95rem}
.facts dt[lang="ar"]{font-family:var(--arabic);letter-spacing:0;font-size:.85rem}
@media (max-width:560px){.facts > div{grid-template-columns:1fr;gap:.15rem}}

/* --- legal documents ----------------------------------------------------- */
.doc{display:flex;flex-direction:column;gap:1.6rem;max-width:var(--measure)}
.doc section{display:flex;flex-direction:column;gap:.7rem}
.doc h2{
  font-size:var(--step-1);font-variation-settings:"wdth" 106;
  padding-bottom:.5rem;border-bottom:1px solid var(--line);
}
.doc h2 .num{color:var(--accent);font-family:var(--mono);font-size:.8em;margin-inline-end:.6rem}
.doc p,.doc li{color:var(--ink-2);font-size:.97rem}
.doc ul{margin:0;padding-inline-start:1.15rem;display:grid;gap:.4rem}
.doc a{color:var(--accent-hi);text-underline-offset:3px}
.doc-meta{
  display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;
  padding:.75rem 1rem;border:1px solid var(--line);background:var(--surface);
  max-width:var(--measure);
}

.callout{
  border-inline-start:2px solid var(--accent);
  background:var(--accent-soft);
  padding:1rem 1.15rem;
  max-width:var(--measure);
  display:flex;flex-direction:column;gap:.4rem;
}

/* --- press assets -------------------------------------------------------- */
.asset-row{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line)}
.asset{background:var(--surface);padding:1.5rem 1.75rem;display:flex;flex-direction:column;gap:.9rem;align-items:flex-start;flex:1 1 13rem}
.asset .swatch{width:100%;height:3rem;border:1px solid var(--line)}

/* --- footer -------------------------------------------------------------- */
.site-foot{border-top:1px solid var(--line);background:var(--ground-2);margin-top:0}
.site-foot .wrap{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:2rem;padding-block:3rem 1.5rem;
}
.foot-col{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.foot-col a{
  color:var(--ink-2);text-decoration:none;font-size:.9rem;
  transition:color .18s ease;
}
.foot-col a:hover{color:var(--accent-hi)}
.foot-bottom{
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  padding-block:1.1rem 2.5rem;
}

/* --- page header (interior pages) ---------------------------------------- */
.page-head{border-bottom:1px solid var(--line)}
.page-head .wrap{
  display:flex;flex-direction:column;gap:.9rem;
  padding-block:clamp(2.75rem,7vw,4.5rem) clamp(2rem,5vw,3rem);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* --- preview-only single-page router ------------------------------------- */
[data-route]{display:none}
[data-route].is-active{display:block}

/* language-toggle label swap */
:root:not([data-lang="ar"]) .t-ar{display:none}
[data-lang="ar"] .t-en{display:none}

/* skip link */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--accent);color:#150F07;padding:.6rem 1rem;
  font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;
}
.skip:focus{left:0}

/* small screens: give the nav the room the wordmark was taking */
@media (max-width:560px){
  .brand-name{display:none}
  .site-head .wrap{gap:.75rem;min-height:3.75rem}
  .site-nav{gap:.95rem}
  .site-nav a{font-size:.7rem;letter-spacing:.1em}
}