@font-face {
  font-family: Sora;
  src: url('/assets/sora-latin-variable.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --page-bg: #000;
  --text: #f8fafc;
  --muted: #cbd5e1;
  --input-bg: #2e2e2e;
  --border: #333;
  --line: #777;
  --accent: #7AD7C4;
  --button-text: #171717;
  font-family: Sora, system-ui, sans-serif;
  font-size: clamp(16px, .2vw + 15.6px, 17px);
  color: var(--text);
  background-color: var(--page-bg);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
::selection { background-color: var(--accent); color: var(--button-text); }

.page {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
  min-height: 100svh;
  margin-inline: auto;
  padding: 0 12px clamp(1rem, 2.4vw, 2rem);
  overflow-x: hidden;
}

.showcase { display: flex; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.showcase::-webkit-scrollbar { display: none; }
.showcase img { display: block; flex: 0 0 100%; width: 100%; min-width: 0; height: auto; aspect-ratio: 16 / 9; object-fit: contain; scroll-snap-align: start; }
.home-showcase { flex: none; max-width: 640px; margin: 0 auto; }
.home-showcase:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.entries { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; gap: 1px; background: rgb(255 255 255 / .12); }
.entry { position: relative; display: block; flex: 1 1 0; min-height: 125px; overflow: hidden; isolation: isolate; background: #000; color: #f8fafc; }
.entry-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .95; filter: saturate(.7); transition: opacity .32s ease, filter .32s ease; }
[data-brand="videojet"] .entry-image { object-position: 50% 24%; }
[data-brand="imaje"] .entry-image { object-position: 52% 30%; }
[data-brand="lt"] .entry-image { object-position: 50% 32%; }
[data-brand="codpad"] .entry-image { object-position: 52% 35%; }
[data-brand="linx"] .entry-image { object-position: 50% 35%; }
.entry-content { position: absolute; inset: auto 0 0; display: flex; align-items: center; gap: clamp(.85rem, 2.4vw, 1.75rem); min-height: 46px; padding: .35rem clamp(.9rem, 3vw, 2rem); background: rgb(10 10 10 / .82); }
.entry-number { flex: none; color: var(--accent); opacity: .85; font-size: .75rem; font-weight: 700; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.entry h2 { margin: 0; min-width: 0; font-size: clamp(19px, 2.4vw, 1.6rem); font-weight: 700; line-height: 1.15; }
.entry-password { display: flex; flex: none; align-items: baseline; gap: .5rem; margin-left: auto; color: var(--accent); white-space: nowrap; }
.entry-password span { color: var(--muted); font-size: clamp(13px, 4vw, 15px); }
.entry-password output { font-size: clamp(18px, 5.4vw, 1.6rem); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.entry:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.site-footer { margin-top: auto; padding-top: 1rem; color: var(--muted); font-size: .75rem; text-align: center; }
.site-footer a:hover { color: var(--accent); }

@media (hover: hover) {
  .entry:hover .entry-image { opacity: 1; filter: saturate(1.05) brightness(1); }
}

@media (min-width: 640px) { .page { padding-inline: 20px; } }
@media (min-width: 1024px) {
  .page { padding-inline: 24px; }
  .home-showcase { max-width: none; }
  .home-showcase img { flex-basis: 50%; }
  .entries { flex: none; }
  .entry { min-height: 170px; }
}
@media (max-width: 639px) { .entry-number { display: none; } }
@media (prefers-reduced-motion: reduce) { .entry-image { transition: none; } }