/* Dimpy Labs.
   The concept: a company page written like a document. It says what the company is, what it does, and what it has made,
   in that order.
   The rule that never breaks: blue is for things you can follow or answer, which means links,
   plus the cursor in the logo, and nothing else.
   One typeface, Newsreader, because the page is made to be read. No script. */
@font-face { font-family: "Newsreader"; src: url("fonts/Newsreader.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/Newsreader-Italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }

:root { --paper: #fff; --ink: #14151a; --soft: #5d606b; --rule: #dcdee6; --wash: #f0f2f8; --blue: #2a45e6; }
@media (prefers-color-scheme: dark) {
  :root { --paper: #0f1014; --ink: #f2f3f6; --soft: #a1a4b0; --rule: #2a2c35; --wash: #191b22; --blue: #93a4ff; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.25rem/1.5 "Newsreader", Georgia, serif; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, table, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.wrap { width: min(100% - 3rem, 68rem); margin-inline: auto; }
.note { font-size: 1rem; font-style: italic; color: var(--soft); }

/* Top bar */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; }
.bar .logo { flex: none; width: 10.5rem; height: auto; display: block; }
.bar nav { display: flex; gap: 1.5rem; font-size: 1.0625rem; }
.bar nav a { color: var(--ink); text-decoration: none; }
.bar nav a:hover { color: var(--blue); }
@media (max-width: 30rem) { .bar .logo { width: 8rem; } .bar nav { gap: 0.75rem; font-size: 1rem; } }

/* First screen: one large headline, one sentence, one link. */
.top { padding: clamp(3rem, 10vw, 8rem) 0 clamp(3.5rem, 10vw, 8rem); }
h1 { font-size: clamp(2.8rem, 8.5vw, 6.5rem); font-weight: 500; line-height: 1; letter-spacing: -0.025em; max-width: 14ch; text-wrap: balance; }
.top h1 + p { margin-top: 2rem; max-width: 34rem; font-size: 1.5rem; line-height: 1.35; }
.top p + p { margin-top: 1.25rem; }

/* Sections. Each has its own shape, so there is no shared grid beyond the heading. */
section { border-top: 1px solid var(--rule); padding: clamp(3rem, 7vw, 5.5rem) 0; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.015em; max-width: 24ch; text-wrap: balance; }
h2 + p { margin-top: 1rem; max-width: 38rem; color: var(--soft); }

/* What we do: three areas side by side, each a large word with a short paragraph. */
.does { margin-top: 2.5rem; display: grid; gap: 0 3rem; }
@media (min-width: 52rem) { .does { grid-template-columns: repeat(3, 1fr); } }
.does li { padding: 1.4rem 0; border-top: 1px solid var(--ink); }
.does h3 { font-size: 2rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.does p { margin-top: 0.5rem; color: var(--soft); }

/* Products: one row each, so the next product is one more row. Name, what it is, where to go. */
.product { display: grid; gap: 1.25rem; margin-top: 2.5rem; padding: 2rem 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); align-items: center; }
@media (min-width: 52rem) { .product { grid-template-columns: 13rem 1fr auto; gap: 3rem; } }
.product img { width: 10rem; }
.product > div p:first-child { font-size: 1.5rem; line-height: 1.3; }

/* About and contact: one short paragraph set large. */
.company { margin-top: 2rem; max-width: 46rem; }
.company p:first-child { font-size: 1.6rem; line-height: 1.35; }
.company p + p { margin-top: 1.25rem; }

/* Footer: the logo and the same links as the top bar, then one legal line. */
footer { border-top: 1px solid var(--rule); padding: 2.5rem 0 3rem; font-size: 1rem; color: var(--soft); }
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin-bottom: 2rem; }
.foot img { width: 9rem; }
.foot nav { display: flex; gap: 1.5rem; font-size: 1.0625rem; }
.foot nav a { color: var(--ink); text-decoration: none; }
.foot nav a:hover { color: var(--blue); }

/* About and 404 pages */
.short { padding: clamp(3rem, 8vw, 5rem) 0; }
.short h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
.tag { font-size: 1rem; font-style: italic; color: var(--soft); margin-bottom: 0.75rem; }
.lead { margin-top: 1rem; max-width: 36rem; }
.row { border-top: 1px solid var(--rule); padding: 2.5rem 0; display: grid; gap: 1rem; }
.row h2 { font-size: 1rem; font-style: italic; font-weight: 400; color: var(--soft); letter-spacing: 0; }
.row .body { display: grid; gap: 1rem; max-width: 36rem; }
.row .lead { margin: 0; font-size: 1.5rem; line-height: 1.3; }
@media (min-width: 52rem) { .row { grid-template-columns: 13rem 1fr; gap: 3rem; } }
.actions { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 0.5rem; }

/* The logo in the top bar types itself in once: each letter appears as the cursor steps past it, then the cursor
   blinks three times and stays. */
.logo { fill: var(--ink); }
.logo rect { fill: var(--blue); animation: carriage 0.9s steps(10) 0.4s both, blink 0.9s steps(1) 1.4s 3; }
.logo path { animation: untyped 1ms backwards; }
.logo path:nth-child(1) { animation-delay: 0.49s; }
.logo path:nth-child(2) { animation-delay: 0.58s; }
.logo path:nth-child(3) { animation-delay: 0.67s; }
.logo path:nth-child(4) { animation-delay: 0.76s; }
.logo path:nth-child(5) { animation-delay: 0.85s; }
.logo path:nth-child(6) { animation-delay: 0.94s; }
.logo path:nth-child(7) { animation-delay: 1.03s; }
.logo path:nth-child(8) { animation-delay: 1.12s; }
.logo path:nth-child(9) { animation-delay: 1.21s; }
.logo path:nth-child(10) { animation-delay: 1.30s; }
@keyframes carriage { from { transform: translateX(-165.63px); } }
@keyframes untyped { from, to { opacity: 0; } }
@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .logo rect, .logo path { animation: none; } }