/* T1K0 — site. Kartridz direction: voxel-cream ground, terracotta, hard shadows.
   Five pages, one stylesheet, one script, no framework, no build step. */

:root{
  --cream:#EFE2CB;
  --card:#F6EEDC;
  --ink:#1A1512;
  --ink-2:#4A3F35;
  --ink-3:#5A4E42;
  --muted:#7A6A5A;
  --terra:#B8542B;
  --orange:#E9A13B;
  --green:#6E9C5A;
  --line-dark:#4A423C;
  --sans:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --display:"Arial Black","Segoe UI Variable Display","Segoe UI",system-ui,Impact,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,"Courier New",monospace;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--cream); color:var(--ink); font:400 17px/1.6 var(--sans); }
img{ max-width:100%; display:block; }
a{ color:var(--terra); text-decoration:none; }
a:hover{ color:#8E3F1C; }
h1,h2,h3{ margin:0; letter-spacing:-.025em; }
p{ margin:0; text-wrap:pretty; }

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:16px 40px; background:var(--ink); border-bottom:3px solid var(--terra);
}
.brand{
  display:flex; align-items:center; gap:12px;
  /* Logo jest odnosnikiem do strony glownej. Sam tekst mial 21 px wysokosci,
     czyli ponizej wygodnego celu dotyku na telefonie. */
  padding:8px 0; min-height:40px;
}
.brand b{ font:900 21px/1 var(--sans); letter-spacing:-.01em; color:var(--cream); }
.brand span{
  display:flex; align-items:center; gap:7px;
  font:700 9.5px/1 var(--mono); letter-spacing:.16em; color:#8A8078;
  border-left:1px solid #3A322C; padding-left:12px;
}
.dot{ width:6px; height:6px; background:var(--green); }
.menu{ display:flex; align-items:stretch; gap:4px; flex-wrap:wrap; }
.menu a{
  position:relative; font:700 11px/1 var(--mono); letter-spacing:.14em;
  color:var(--cream); padding:13px 15px;
}
.menu a.on::after{ content:""; position:absolute; left:8px; right:8px; bottom:2px; height:4px; background:var(--orange); }
.menu a.token{
  color:var(--ink); background:var(--orange); box-shadow:4px 4px 0 var(--terra); margin-left:10px;
}

/* ── layout ──────────────────────────────────────────────────────────── */
.pad{ padding:56px 40px; }
.grid-bg{
  background-image:
    repeating-linear-gradient(0deg, rgba(26,21,18,.05) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(26,21,18,.05) 0 1px, transparent 1px 32px);
}
.split{ display:grid; grid-template-columns:1fr 440px; gap:48px; align-items:center; }
.split-end{ align-items:end; }
.col{ display:flex; flex-direction:column; gap:22px; }
.row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.three{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.four{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }

/* ── type ────────────────────────────────────────────────────────────── */
h1{ font:900 clamp(38px,5vw,62px)/.98 var(--sans); }
h2{ font:900 clamp(26px,3.2vw,34px)/1.05 var(--sans); }
h3{ font:700 21px/1.2 var(--sans); letter-spacing:-.01em; }
.lead{ font:400 17px/1.65 var(--sans); color:var(--ink-2); max-width:640px; }
.body{ font:400 15px/1.65 var(--sans); color:var(--ink-3); }
.stamp{ font:700 11px/1 var(--mono); letter-spacing:.18em; }
.tag{ align-self:flex-start; font:700 11px/1 var(--mono); letter-spacing:.18em; color:var(--cream); background:var(--ink); padding:9px 12px; }
.tag-terra{ display:flex; align-items:center; gap:10px; align-self:flex-start; font:700 11px/1 var(--mono); letter-spacing:.18em; color:var(--card); background:var(--terra); padding:10px 13px; }
.tag-terra i{ font-style:normal; border:2px solid var(--card); padding:3px 6px; }
.kicker{ font:700 10.5px/1 var(--mono); letter-spacing:.16em; color:var(--terra); }
.small{ font:700 10.5px/1 var(--mono); letter-spacing:.14em; color:var(--muted); }
.mark{ display:inline-block; white-space:nowrap; background:var(--terra); color:var(--card); padding:0 10px; box-shadow:8px 8px 0 var(--ink); }
.mark-green{ display:inline-block; white-space:nowrap; background:var(--green); color:var(--card); padding:0 10px; box-shadow:8px 8px 0 var(--ink); }

/* ── blocks ──────────────────────────────────────────────────────────── */
.tile{ border:3px solid var(--ink); background:var(--card); box-shadow:7px 7px 0 var(--ink); padding:26px; display:flex; flex-direction:column; gap:12px; }
.tile-flat{ border:3px solid var(--ink); background:var(--cream); padding:26px 28px; display:flex; flex-direction:column; gap:12px; }
.tile-warn{ border:3px solid var(--terra); background:#F4E2D4; box-shadow:9px 9px 0 var(--terra); padding:30px; display:flex; flex-direction:column; gap:12px; }
.tile-dark{ border:3px solid var(--ink); background:var(--ink); box-shadow:9px 9px 0 var(--terra); padding:30px; display:flex; flex-direction:column; gap:16px; color:var(--card); }
.tile-dark .body{ color:#B8AC9C; }
.frame{ border:3px solid var(--ink); background:var(--card); box-shadow:14px 14px 0 var(--terra); padding:18px; }
.frame-green{ box-shadow:12px 12px 0 var(--green); padding:14px; }
.frame-terra{ border:3px solid var(--terra); background:var(--cream); box-shadow:none; padding:12px; }
.frame .cap, .frame-terra .cap, .frame-green .cap{ display:flex; justify-content:space-between; gap:12px; padding-top:12px; font:700 10.5px/1 var(--mono); letter-spacing:.14em; color:#6B5B4C; }
.shot{ overflow:hidden; height:320px; }
.shot img{ width:100%; height:100%; object-fit:cover; }
.shot-fit{ height:380px; background:var(--card); }
.shot-fit img{ object-fit:contain; }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); }
.stat{ background:var(--cream); padding:26px 28px; display:flex; flex-direction:column; gap:6px; border-right:3px solid var(--ink); }
.stat:last-child{ border-right:0; background:var(--terra); }
.stat b{ font:900 44px/1 var(--sans); letter-spacing:-.03em; }
.stat:last-child b{ color:var(--card); }
.stat span{ font:700 10.5px/1 var(--mono); letter-spacing:.16em; color:var(--muted); }
.stat:last-child span{ color:#F0D8C4; }

.band{ background:var(--ink); color:var(--card); padding:52px 40px; }
.band .lead{ color:#B8AC9C; }
.band h2{ color:var(--card); }
.band .live{ display:flex; align-items:center; gap:9px; align-self:flex-start; font:700 10.5px/1 var(--mono); letter-spacing:.18em; color:var(--card); background:var(--terra); padding:9px 12px; }
.band .live i{ width:7px; height:7px; background:var(--card); }
.link-box{ border:2px solid var(--line-dark); padding:14px 15px; display:flex; align-items:center; gap:12px; }

/* ── platform glyphs ──────────────────────────────────────────────────
   Inline SVG in the markup, not an icon font and not an image file: this
   site loads nothing from anywhere else, and its CSP allows images from
   its own origin only. Each glyph is drawn in currentColor with no baked
   background, because the same shapes sit on the dark footer and on the
   cream crypto tiles.

   NOT called .mark: that name is already the orange text highlight a few
   rules up, the one behind "NO RESCUE." - reusing it painted every icon
   as a solid terra block. */
.glyph{ flex:0 0 auto; }
.link-box .glyph{ width:21px; height:21px; color:#9E9284; transition:color .12s; }
.link-box:hover .glyph{ color:var(--orange); }
.link-box b{ min-width:0; overflow-wrap:anywhere; }

/* Once the mark carries the platform, its name on screen is one word of
   noise repeated five times. It stays in the markup for screen readers
   and for anything reading the page as text - just not in the picture. */
.vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* The three crypto links KEEP their visible label. A capsule, a candle
   chart and a padlock are descriptive marks rather than anyone's logo,
   so they cannot name the destination on their own - and on a page about
   money the reader should see where a link leads before clicking it. */
a.tile-flat{ display:grid; grid-template-columns:auto 1fr; column-gap:16px; row-gap:5px; align-items:center; }
a.tile-flat .glyph-lg{ grid-column:1; grid-row:1 / span 2; width:29px; height:29px; color:var(--terra); transition:color .12s; }
a.tile-flat:hover .glyph-lg{ color:var(--ink); }
.link-box span{ font:700 9.5px/1 var(--mono); letter-spacing:.16em; color:#8A8078; }
.link-box b{ font:600 14px/1.3 var(--sans); color:var(--card); }
.link-box:hover{ border-color:var(--orange); }

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{ font:700 14px/1 var(--mono); letter-spacing:.1em; color:var(--card); background:var(--ink); padding:17px 22px; box-shadow:7px 7px 0 var(--terra); border:0; cursor:pointer; }
.btn:hover{ color:var(--orange); }
.btn-out{ font:700 14px/1 var(--mono); letter-spacing:.1em; color:var(--ink); border:2px solid var(--ink); background:transparent; padding:15px 20px; cursor:pointer; }
.btn-out:hover{ background:var(--ink); color:var(--card); }
.btn-sm{ font:700 11px/1 var(--mono); letter-spacing:.14em; color:var(--ink); border:2px solid var(--ink); padding:11px 14px; }
.toggle{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.toggle button{
  position:relative; font:700 11px/1 var(--mono); letter-spacing:.14em;
  color:var(--card); background:transparent; border:2px solid var(--line-dark);
  padding:12px 15px 14px; cursor:pointer;
}
.toggle button.on::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background:var(--orange); }
.toggle .note{ font:400 11px/1 var(--mono); letter-spacing:.1em; color:#6B6157; margin-left:8px; }

/* ── objects ─────────────────────────────────────────────────────────── */
.obj{ border:3px solid var(--ink); background:var(--card); box-shadow:7px 7px 0 var(--ink); display:flex; flex-direction:column; }
.obj .pic{
  height:180px; overflow:hidden;
  /* Ten sam krem, co tlo renderow (#EEDAB7 zmierzone z plikow). Karta jest
     jasniejsza (--card), wiec przy object-fit:contain bylo widac szew po
     bokach obrazka. Rownanie tla znosi go bez przycinania obiektu -
     w katalogu ma byc widoczna cala rzecz, nie jej srodek. */
  background:#EEDAB7;
}
.obj .pic img{ width:100%; height:100%; object-fit:cover; }
.obj .pic.fit img{ object-fit:contain; }
.obj .ph{
  height:180px; display:flex; align-items:center; justify-content:center;
  background-image:repeating-linear-gradient(45deg, rgba(26,21,18,.09) 0 7px, transparent 7px 14px);
  font:700 10px/1 var(--mono); letter-spacing:.14em; color:#8A7A6A;
}
.obj .meta{
  display:flex; justify-content:space-between; gap:10px; padding:13px 15px;
  border-top:3px solid var(--ink); font:700 10.5px/1 var(--mono); letter-spacing:.12em;
}
.obj .meta em{ font-style:normal; color:var(--muted); }
.obj .meta em.hot{ color:var(--terra); }

/* ── his words ───────────────────────────────────────────────────────── */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  position:relative; font:700 11px/1 var(--mono); letter-spacing:.14em; color:var(--ink);
  border:2px solid var(--ink); background:var(--card); padding:13px 15px 15px; cursor:pointer;
}
.chip.on::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background:var(--terra); }
.lines{ display:flex; flex-direction:column; gap:14px; }
.line{
  border:3px solid var(--ink); background:var(--card); padding:22px 26px;
  display:grid; grid-template-columns:190px 1fr; gap:30px; align-items:start;
}
.line .day{ display:flex; flex-direction:column; gap:7px; }
.line .day b{ font:900 24px/1 var(--sans); letter-spacing:-.02em; }
.line .day span{ font:700 10px/1.5 var(--mono); letter-spacing:.14em; color:var(--muted); }
.line q{ font:400 22px/1.45 var(--sans); letter-spacing:-.005em; quotes:"\201C" "\201D"; }

/* ── token page ──────────────────────────────────────────────────────── */
.rule{ font:400 15px/1.55 var(--sans); color:var(--ink-2); border-left:5px solid var(--ink); padding-left:14px; }
.rule-terra{ border-left-color:var(--terra); }
.addr{ border:2px solid var(--line-dark); background:#120E0C; padding:16px 18px; display:flex; flex-direction:column; gap:9px; }
.addr span{ font:700 10px/1 var(--mono); letter-spacing:.16em; color:#8A8078; }
.addr code{ font:400 16px/1.5 var(--mono); color:var(--orange); word-break:break-all; }
.addr-light{ border:2px solid var(--ink); background:var(--cream); }
.addr-light span{ color:var(--muted); }
.addr-light code{ color:var(--terra); font-size:15px; }
.locks{ display:grid; grid-template-columns:repeat(4,1fr); border:3px solid var(--ink); background:var(--ink); }
.locks div{ background:var(--cream); padding:18px 20px; display:flex; flex-direction:column; gap:5px; border-right:3px solid var(--ink); }
.locks div:last-child{ border-right:0; background:var(--terra); }
.locks b{ font:900 26px/1 var(--sans); letter-spacing:-.02em; }
.locks div:last-child b{ color:var(--card); }
.locks span{ font:700 9.5px/1.4 var(--mono); letter-spacing:.14em; color:var(--muted); }
.locks div:last-child span{ color:#F0D8C4; }
.final{ border:3px solid var(--terra); background:var(--terra); color:var(--card); padding:30px; display:flex; flex-direction:column; gap:12px; }
.final h3{ font:900 26px/1.1 var(--sans); }
.final p{ color:#F4E0D2; }
.final strong{ color:#FFF6EA; }

/* the age gate — fail closed: the page is hidden by CSS, the script reveals it */
.page{ display:none; }
html.entered .page{ display:block; }
html.entered .gate{ display:none; }
.gate{ padding:60px 40px 80px; display:flex; justify-content:center; background-image:repeating-linear-gradient(45deg, rgba(26,21,18,.06) 0 8px, transparent 8px 16px); }
.gate-box{ max-width:720px; width:100%; border:3px solid var(--terra); background:var(--card); box-shadow:14px 14px 0 var(--terra); padding:38px 36px 40px; display:flex; flex-direction:column; gap:18px; }

/* ── footer ──────────────────────────────────────────────────────────── */
.footer{ background:var(--ink); border-top:3px solid var(--terra); padding:40px 40px 46px; display:flex; flex-direction:column; gap:26px; }
.socials{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.legal{
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  border-top:1px solid #3A322C; padding-top:22px;
  font:700 11px/1.7 var(--mono); letter-spacing:.1em; color:#8A8078;
}

@media (max-width:1100px){
  .split{ grid-template-columns:1fr; }
  .four{ grid-template-columns:repeat(2,1fr); }
  .socials{ grid-template-columns:repeat(2,1fr); }
  .locks{ grid-template-columns:repeat(2,1fr); }
  .locks div:nth-child(2){ border-right:0; }
}
@media (max-width:760px){
  body{ font-size:16px; }
  .pad, .band, .nav, .footer{ padding-left:20px; padding-right:20px; }
  .two, .three{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2){ border-right:0; }
  .line{ grid-template-columns:1fr; gap:14px; }
  .mark, .mark-green{ box-shadow:5px 5px 0 var(--ink); }
}

/* SKUPIENIE KLAWIATURY. Nic w tym arkuszu nie gasilo domyslnej obwodki,
   wiec nawigacja klawiatura dzialala - ale domyslna obwodka ginie na
   ciemnych kaflach. Wlasny pierscien jest widoczny na obu tlach. */
:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:3px;
  border-radius:2px;
}