/* Octolabo home — two icons, one line each. The DOCKK page's system
   (Funnel Display, the Horizon field under grain, pills) kept to the
   essentials. One stylesheet, no scripts, no inline styles (the site's CSP
   forbids them). The Kaffedex pages keep styles.css. */

@font-face {
  font-family: "Funnel Display";
  src: url("/fonts/FunnelDisplay.ttf") format("truetype");
  font-weight: 300 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #f2f0ea;
  --ink-2: #c9c6cf;
  --ink-3: #a19ea9;
  --ground: #0b0d12;
  --signal: #ff4d06;
  --kaffe: #d26b1c;
  --display: "Funnel Display", -apple-system, "Helvetica Neue", sans-serif;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, .8, .22, 1);
  --r-tile: 24px;
}

* { box-sizing: border-box; }
html { background: var(--ground); height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  font: 16px/1.6 var(--ui);
  -webkit-font-smoothing: antialiased;
  /* Horizon, compressed to one screen: near-black sky, the blue band under
     the headline, steel and ochre behind the icons, orange at the foot. */
  background:
    url("/assets/grain.png"),
    linear-gradient(180deg, #0b0d12 0, #0c0f15 160px, #13284d 320px, #3470d4 480px,
      #5a86b0 600px, #7e8a8c 680px, #a97b45 760px, #e05a26 880px, #2a1408 1080px, #0b0d12 1300px);
  background-repeat: repeat, no-repeat;
}
img { max-width: 100%; height: auto; display: block; }
a { color: #ffb27d; }
a:hover { color: #ffd2b3; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px; }

.shell {
  max-width: 1120px; min-height: 100svh; margin: 0 auto; padding: 0 20px 28px;
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 40px;
}

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; gap: 18px; padding: 20px 0 0; }
.wordmark { color: var(--ink); text-decoration: none; font: 500 19px/1 var(--display); letter-spacing: -.01em; }
.wordmark b { color: var(--signal); font-weight: 500; }
.topbar .spacer { flex: 1; }
.topbar a.quiet { color: var(--ink-2); text-decoration: none; font-size: 14px; }
.topbar a.quiet:hover { color: var(--ink); }

/* ---------- hero ---------- */
.hero { display: grid; gap: 22px; padding-top: 28px; justify-items: start; }
h1 { font-family: var(--display); font-weight: 500; margin: 0; text-wrap: balance;
     font-size: clamp(44px, 7.6vw, 84px); line-height: 1; letter-spacing: -.035em; }
h1 .soft { color: var(--ink-3); }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px; border-radius: 999px; font: 600 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); white-space: nowrap; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }

/* ---------- the two apps: an icon, a name, one line ---------- */
.icons {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 24px; align-content: center; justify-items: center; padding: 24px 0;
}
.app-link {
  display: grid; justify-items: center; gap: 16px; text-align: center; text-decoration: none;
  color: var(--ink); max-width: 340px; padding: 28px 20px; border-radius: var(--r-tile);
}
.app-link:hover { color: var(--ink); }
.app-link.kaffe { --glow: rgba(210, 107, 28, .45); }
.app-link.dockk { --glow: rgba(255, 77, 6, .45); }
.app-icon {
  width: clamp(128px, 18vw, 184px); height: auto; border-radius: 22.37%;
  /* monochrome at rest; the link lights it */
  filter: grayscale(1) brightness(.82);
  opacity: .72;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
  transition: filter .5s var(--ease), opacity .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.app-link:hover .app-icon,
.app-link:focus-visible .app-icon {
  filter: none; opacity: 1;
  transform: translateY(-10px) scale(1.07);
  box-shadow: 0 34px 70px rgba(0, 0, 0, .55), 0 0 70px var(--glow);
}
.app-name { font: 500 28px/1.1 var(--display); letter-spacing: -.02em; }
.app-line { color: var(--ink-2); font-size: 15px; line-height: 1.5; max-width: 30ch; }
.app-platform { font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); opacity: .85; }

/* ---------- footer ---------- */
.footer { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; color: var(--ink-3); font-size: 14px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px; }
.footer .spacer { flex: 1; }
.footer a { color: var(--ink-2); text-decoration: none; }
.footer a:hover { color: var(--ink); }

@media (max-width: 640px) {
  .shell { gap: 32px; }
  .hero { padding-top: 20px; }
  .icons { gap: 8px; padding: 8px 0; }
  .app-link { padding: 20px 12px; }
}

/* Phones can't hover: show the icons in colour. */
@media (hover: none) {
  .app-icon { filter: none; opacity: 1; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .intro { animation: intro .8s var(--ease) both; }
  .intro-2 { animation-delay: .08s; }
  .intro-3 { animation-delay: .16s; }
  .intro-4 { animation-delay: .24s; }
  @keyframes intro { from { opacity: 0; transform: translateY(18px); } }
}
@media (prefers-reduced-motion: reduce) {
  .app-icon { transition: filter .3s, opacity .3s; }
  .app-link:hover .app-icon, .app-link:focus-visible .app-icon { transform: none; }
}