/* ============================================================
   BYTES & BEVEL — DESIGN SYSTEM v1.0
   Industrial-technical language. Carbon / fog / acid.
   ============================================================ */

/* ---------- 01 · TOKENS ---------- */
:root {
  /* color */
  --c-ink:     #141619;  /* deepest — hero backgrounds, text on light */
  --c-carbon:  #1e2226;  /* panel dark */
  --c-graphite:#2b3036;  /* raised dark surface */
  --c-steel:   #565d64;  /* muted text on light, borders on dark */
  --c-silver:  #9aa1a7;  /* secondary text on dark */
  --c-poster:  #d7d9db;  /* poster-gray page base */
  --c-fog:     #e6e8ea;  /* light section background */
  --c-paper:   #f4f5f6;  /* lightest surface */
  --c-white:   #ffffff;
  --c-acid:    #2b57e2;  /* THE accent — cobalt blueprint blue. sparingly, loud */
  --c-acid-ink:#ffffff;  /* text on accent */

  /* hairlines */
  --line-dark: rgba(255,255,255,0.14);
  --line-light: rgba(20,22,25,0.16);

  /* type */
  --f-display: "Chakra Petch", "Archivo", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", "Menlo", monospace;

  /* type scale */
  --t-display: clamp(3.2rem, 10vw, 8.5rem);
  --t-h1: clamp(2.2rem, 5.5vw, 4rem);
  --t-h2: clamp(1.5rem, 3vw, 2.2rem);
  --t-h3: 1.15rem;
  --t-body: 0.95rem;
  --t-label: 0.7rem;
  --t-micro: 0.62rem;

  /* space (8px base) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: 6.5rem;

  /* misc */
  --step: 10px; /* stair-step unit */
}

/* ---------- 02 · RESET / BASE ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-display);
  font-size: var(--t-body);
  line-height: 1.55;
  background: var(--c-fog);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------- 03 · TYPOGRAPHY ---------- */
.display {
  font-size: var(--t-display);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.display--thin { font-weight: 300; letter-spacing: 0.05em; }
.display--ghost {
  color: transparent;
  -webkit-text-stroke: 1.5px currentColor;
  /* set color on element to control stroke */
}
.h1 { font-size: var(--t-h1); font-weight: 600; line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; }
.h1--thin { font-weight: 300; letter-spacing: 0.05em; }
.h2 { font-size: var(--t-h2); font-weight: 600; line-height: 1.1; letter-spacing: 0.03em; text-transform: uppercase; }
.h3 { font-size: var(--t-h3); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }
.body-lg { font-size: 1.1rem; line-height: 1.6; }
.muted { color: var(--c-steel); }
.on-dark .muted { color: var(--c-silver); }

.label {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.label--index { letter-spacing: 0.1em; }
.micro {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.acid-text { color: var(--c-acid); }

/* ---------- 04 · SURFACES ---------- */
.on-dark  { background: var(--c-ink); color: var(--c-white); }
.on-panel { background: var(--c-carbon); color: var(--c-white); }
.on-light { background: var(--c-fog); color: var(--c-ink); }
.on-paper { background: var(--c-paper); color: var(--c-ink); }
.on-acid  { background: var(--c-acid); color: var(--c-acid-ink); }

/* hairline helpers */
.hl-t { border-top: 1px solid var(--line-light); }
.hl-b { border-bottom: 1px solid var(--line-light); }
.on-dark .hl-t, .on-panel .hl-t, .on-dark.hl-t, .on-panel.hl-t { border-top-color: var(--line-dark); }
.on-dark .hl-b, .on-panel .hl-b, .on-dark.hl-b, .on-panel.hl-b { border-bottom-color: var(--line-dark); }

/* ---------- 05 · MOTIFS ---------- */
/* dot matrix */
.dots {
  background-image: radial-gradient(currentColor 1px, transparent 1.5px);
  background-size: 12px 12px;
  opacity: 0.35;
}
/* stair-step block (pixel staircase, the ZMORPH-style diagonal) */
.stair {
  clip-path: polygon(
    0% 100%, 0% 80%, 20% 80%, 20% 60%, 40% 60%, 40% 40%,
    60% 40%, 60% 20%, 80% 20%, 80% 0%, 100% 0%, 100% 100%
  );
}
/* 45° diagonal cut on a corner */
.cut-tl { clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%, 0 18%); }
.cut-br { clip-path: polygon(0 0, 100% 0, 100% 82%, 82% 100%, 0 100%); }
/* crosshair register mark */
.crosshair { position: relative; width: 14px; height: 14px; }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: currentColor; }
.crosshair::before { left: 50%; top: 0; width: 1px; height: 100%; }
.crosshair::after  { top: 50%; left: 0; height: 1px; width: 100%; }

/* ---------- 06 · COMPONENTS ---------- */
/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  padding: 1.1em 1.9em;
  background: var(--c-ink);
  color: var(--c-white);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.btn .arr { font-family: var(--f-display); font-weight: 700; }
.btn:hover { background: var(--c-graphite); }
.btn--acid { background: var(--c-acid); color: var(--c-acid-ink); }
.btn--acid:hover { background: var(--c-ink); color: var(--c-white); }
.btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.btn--ghost:hover { background: var(--c-acid); color: var(--c-acid-ink); box-shadow: none; }

/* chip / tag — the yellow corner tab */
.chip {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--c-acid);
  color: var(--c-acid-ink);
  padding: 0.6em 1.2em;
}
.chip--outline { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }

/* spec row — technical key/value line */
.spec { display: flex; justify-content: space-between; gap: var(--s-2); padding: 0.75em 0; border-bottom: 1px solid var(--line-light); }
.on-dark .spec, .on-panel .spec { border-bottom-color: var(--line-dark); }
.spec dt { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-steel); }
.on-dark .spec dt, .on-panel .spec dt { color: var(--c-silver); }
.spec dd { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; }

/* card */
.card {
  border: 1px solid var(--line-light);
  padding: var(--s-3);
  background: var(--c-paper);
}
.card--dark { background: var(--c-carbon); color: var(--c-white); border-color: var(--line-dark); }

/* section header: NN / TITLE ------ */
.sec-head { display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-4); }
.sec-head .idx { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.1em; color: var(--c-steel); }
.on-dark .sec-head .idx { color: var(--c-acid); }
.sec-head .rule { flex: 1; height: 1px; background: var(--line-light); }
.on-dark .sec-head .rule { background: var(--line-dark); }

/* layout container */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 3rem); }
.section { padding-block: var(--s-6); }

/* top bar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2);
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
}
.topbar .brand { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; }
.topbar .brand .name { font-weight: 700; letter-spacing: 0.06em; font-size: 0.95rem; text-transform: uppercase; }

/* data bar (footer strip of cells) */
.databar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.databar > div {
  padding: 1rem clamp(1.2rem, 3vw, 2rem);
  border-top: 1px solid var(--line-dark);
  border-right: 1px solid var(--line-dark);
}
.databar > div:last-child { border-right: none; }


/* vertical edge type (poster style) */
.vert {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.vert--flip { transform: rotate(180deg); }

/* bracket headline — [AVAILABLE SOON] style */
.bracketed::before { content: "[\00a0"; }
.bracketed::after  { content: "\00a0]"; }

/* square tile grid motif */
.tile-grid {
  background-image:
    linear-gradient(currentColor 1px, transparent 1px),
    linear-gradient(90deg, currentColor 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.25;
}