/* Galleriet er et nøytralt prøvebord: grått underlag, så fargene i skissene får snakke. */
:root {
  --board: #e3e4e6;
  --ink: #15161a;
  --mute: #555861;
  --rule: #c6c8cd;
  --gut: clamp(18px, 4vw, 64px);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--board); color: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

.top { padding: clamp(28px, 5vw, 72px) var(--gut) clamp(28px, 4vw, 56px); max-width: 1560px; margin: 0 auto; }
.mark { display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(28px, 5vw, 64px); font-weight: 500; }
.mark img { width: 40px; height: auto; border-radius: 9px; }
h1 {
  margin: 0;
  font-size: clamp(2.6rem, 8.2vw, 7.5rem);
  font-weight: 700;
  font-stretch: 85%;
  line-height: 0.92;
  letter-spacing: -0.035em;
  max-width: 12ch;
  text-wrap: balance;
}
.lede { margin: clamp(18px, 2.4vw, 32px) 0 0; max-width: 56ch; font-size: clamp(1.0625rem, 1.3vw, 1.3rem); color: var(--mute); }

main { padding: 0 var(--gut); max-width: 1560px; margin: 0 auto; }
.grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr;
  gap: clamp(48px, 6vw, 88px) clamp(28px, 4vw, 64px);
}
@media (min-width: 900px) { .grid { grid-template-columns: 1fr 1fr; } }

.card { min-width: 0; }
.shots { display: block; position: relative; padding: 0 9% 7% 0; text-decoration: none; }
.desk {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(21, 22, 26, .14), 0 18px 40px -18px rgba(21, 22, 26, .45);
  transition: transform .25s ease;
}
.phone {
  position: absolute; right: 0; bottom: 0; width: 21%;
  border-radius: clamp(8px, 1.1vw, 16px);
  border: clamp(3px, .4vw, 5px) solid var(--ink);
  background: var(--ink);
  box-shadow: 0 16px 30px -12px rgba(21, 22, 26, .6);
  transition: transform .25s ease;
}
@media (hover: hover) {
  .shots:hover .desk { transform: translateY(-4px); }
  .shots:hover .phone { transform: translateY(-9px); }
}

.text { margin-top: clamp(14px, 1.6vw, 22px); max-width: 60ch; }
h2 { margin: 0; display: flex; align-items: baseline; gap: .5em; font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 700; font-stretch: 90%; letter-spacing: -0.02em; line-height: 1.05; }
h2 a { text-decoration: none; }
h2 a:hover { text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .14em; }
.nr { font-weight: 300; font-variant-numeric: tabular-nums; color: var(--mute); min-width: 1.15em; }
.vibe { margin: .5em 0 0; }
.try { margin: .45em 0 0; color: var(--mute); }
.try b { color: var(--ink); font-weight: 600; }
.meta { margin-top: 1em; padding-top: .85em; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: .9375rem; color: var(--mute); }
.swatches { display: inline-flex; }
.swatches span { width: 26px; height: 26px; box-shadow: inset 0 0 0 1px rgba(21, 22, 26, .16); }
.swatches span:first-child { border-radius: 4px 0 0 4px; }
.swatches span:last-child { border-radius: 0 4px 4px 0; }

.foot { max-width: 1560px; margin: clamp(56px, 8vw, 120px) auto 0; padding: 24px var(--gut) 48px; border-top: 1px solid var(--rule); color: var(--mute); font-size: .9375rem; }
.foot p { margin: 0 0 .4em; max-width: 70ch; }

@media (prefers-reduced-motion: reduce) { .desk, .phone { transition: none; } }