/* ===== Ikhtiardims: tokens.css (copy as-is, do not edit values) ===== */
:root{
  /* color: only these */
  --bg:#101010; --fg:#FCFCFC; --muted:#7E7E7E;
  --line:rgba(252,252,252,.14); --line-strong:rgba(252,252,252,.24);
  --wash:rgba(252,252,252,.05); --glass:rgba(16,16,16,.55);
  /* type */
  --font:'Uncut Sans','Uncut Sans Variable',system-ui,sans-serif;
  --fs-label:12px; --fs-body:16px; --fs-lg:20px; --fs-xl:24px; --fs-2xl:32px;
  --ls-body:-.007em; --ls-label:.06em; --ls-tight:-.02em; --ls-display:-.035em;
  /* space (4-pt) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
  --s12:48px; --s14:56px; --s16:64px; --s18:72px; --s20:80px; --s21:84px; --s24:96px;
  /* layout */
  --gutter:24px; --nav-h:49px; /* 16 + 16 + 16px line + 1px border */
  --hairline:1px; --radius:0;
  /* motion */
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-std:cubic-bezier(.4,0,.2,1);
}
@media (max-width:640px){ :root{ --gutter:16px } }
*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-weight:400;
  font-size:var(--fs-body);letter-spacing:var(--ls-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
::selection{background:var(--fg);color:var(--bg)}
:focus-visible{outline:1px solid var(--fg);outline-offset:2px}

/* ---- primitives: every page is built ONLY from these ---- */
.label{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--muted)}
.grid{display:grid;gap:var(--hairline);background:var(--line)}
.grid>*{background:var(--bg);min-width:0}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-8{grid-template-columns:repeat(8,minmax(0,1fr))}
.span-1{grid-column:span 1}.span-2{grid-column:span 2}.span-4{grid-column:span 4}
.span-6{grid-column:span 6}.span-8{grid-column:span 8}.span-full{grid-column:1/-1}
.cell{padding:var(--s8) var(--gutter)}          /* default cell = 32 / 24 */
.rule-t{border-top:1px solid var(--line)} .rule-b{border-bottom:1px solid var(--line)}
.frame{position:relative;overflow:hidden;background:var(--bg)}
.frame>img,.frame>video,.frame>.slot{width:100%;height:100%;object-fit:cover}
.slot{background:var(--bg);outline:1px solid var(--line);outline-offset:-1px}
.r-45{aspect-ratio:4/5}.r-34{aspect-ratio:3/4}.r-1610{aspect-ratio:16/10}.r-21{aspect-ratio:2/1}.r-32{aspect-ratio:3/2}

@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense}
  .grid-8{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid-8>.span-6,.grid-8>.span-8{grid-column:1/-1}
  .grid-8>.span-4{grid-column:span 2} .grid-8>.span-2{grid-column:span 2}
  .grid-4>.span-2{grid-column:span 2}
}
@media (max-width:640px){
  .grid-4,.grid-8{grid-template-columns:minmax(0,1fr)}
  .grid>*{grid-column:1/-1!important}
}