@import url("../assets/css/editorial.css");

:root {
  --bg: #ffffff;
  --bg-soft: #f7f4ef;
  --ink: #1a1713;
  --muted: #5c5650;
  --line: rgba(26, 23, 19, 0.12);
  --accent: #1a1713;
  --accent-soft: #2a261f;
  --accent-text: #ffffff;
  --c: #19b6dd;
  --m: #e0469f;
  --y: #f1c513;
  --gallery-gap: 4rem;
}

body {
  background: var(--bg);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  padding: 0.14rem 0.42rem;
  border: 1px solid #000000;
  border-radius: 0.35rem;
  background: #ffffff;
  color: #000000;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  vertical-align: middle;
}

.device__frame {
  background: linear-gradient(160deg, #ffffff, #f2eee7);
  border: 1px solid var(--line);
  box-shadow: 0 22px 45px rgba(26, 23, 19, 0.14);
}

.device__frame::before {
  background: #e6e0d8;
}

/* Dottre screenshot mocks */
.screen--source {
  background:
    radial-gradient(120% 70% at 28% 20%, #ffe3a6 0%, transparent 42%),
    linear-gradient(165deg, #7fb6d8 0%, #c98bbf 48%, #3a2a44 100%);
}

.screen--halftone {
  background-color: #0c0d10;
  background-image:
    radial-gradient(var(--c) 22%, transparent 23%),
    radial-gradient(var(--m) 22%, transparent 23%),
    radial-gradient(var(--y) 22%, transparent 23%);
  background-size: 18px 18px, 18px 18px, 18px 18px;
  background-position: 0 0, 6px 9px, 12px 3px;
}

.screen--plates {
  background: #0c0d10;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
}

.plate { display: block; }

.plate--c { background: repeating-radial-gradient(circle at 8px 8px, var(--c) 0 3px, transparent 3px 9px); }
.plate--m { background: repeating-radial-gradient(circle at 8px 8px, var(--m) 0 3px, transparent 3px 9px); }
.plate--y { background: repeating-radial-gradient(circle at 8px 8px, var(--y) 0 3px, transparent 3px 9px); }
.plate--k { background: repeating-radial-gradient(circle at 8px 8px, #e9edf2 0 3px, transparent 3px 9px); }