/* ═══════════════════════════════════════════════════════════════════
   DAEDULUS LABS — shared stylesheet for the lab front and the gallery
   ───────────────────────────────────────────────────────────────────
   One decision governs everything below: the gallery is a neutral
   vitrine and the exhibits bring their own colour. The Garden Ledger
   is cream and bottle green, the pick 'em is black and gold, the
   reporting package is navy and grey — if this page had a palette of
   its own it would fight all three at once and win against none.

   So the ground is near-black, the type is bone, and there is exactly
   one chromatic accent, used only where something is interactive or
   live. Everything else is earned with scale, spacing and hairlines.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bg:      #0A0A0B;
  --bg-2:    #0E0F11;
  --panel:   #131418;
  --panel-2: #181A1F;
  --ink:     #F4F3EF;
  --ink-2:   #A5A49C;
  --ink-3:   #6B6B65;
  --line:    rgba(244, 243, 239, .11);
  --line-2:  rgba(244, 243, 239, .06);
  --acc:     #FF4D2E;
  --acc-dim: rgba(255, 77, 46, .16);
  --live:    #57D9A3;

  --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gut:  clamp(20px, 5vw, 64px);
  --max:  1280px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* the faintest engineering grid — you should not notice it, only miss
   it if it were gone */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(244,243,239,.030) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,243,239,.030) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 0%, transparent 78%);
}
main, header, footer { position: relative; z-index: 1; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }

a { color: inherit; }

/* ── type ─────────────────────────────────────────────────────────── */

h1, h2, h3 { font-weight: 700; line-height: 1.02; letter-spacing: -.03em; margin: 0; }

.disp {
  font-size: clamp(38px, 7.2vw, 92px);
  font-variation-settings: "wdth" 96;
  letter-spacing: -.035em;
}
.h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: -.028em;
}

.lede {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34em;
  margin: 0;
}
.prose { max-width: 36em; color: var(--ink-2); }
.prose p { margin: 0 0 1.05em; }
.prose strong { color: var(--ink); font-weight: 600; }

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}

/* ── header ───────────────────────────────────────────────────────── */

.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10, 10, 11, .78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-2);
}
.site-head .wrap {
  display: flex; align-items: center; gap: 28px;
  height: 66px;
}
.mark {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; margin-right: auto;
}
.mark svg { display: block; flex: 0 0 auto; }
.mark b {
  font-weight: 700; font-size: 15.5px; letter-spacing: -.012em;
  font-variation-settings: "wdth" 96;
}
.mark span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3);
  padding-left: 11px; margin-left: 2px; border-left: 1px solid var(--line);
}
@media (max-width: 560px) { .mark span { display: none; } }

.nav { display: flex; gap: 4px; }
.nav a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .17em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-3);
  padding: 8px 12px; border-radius: 6px;
  transition: color .16s ease, background .16s ease;
}
.nav a:hover { color: var(--ink); background: rgba(244,243,239,.05); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::before {
  content: ""; display: inline-block; width: 5px; height: 5px;
  border-radius: 50%; background: var(--acc);
  margin-right: 8px; vertical-align: 2px;
}

/* ── hero ─────────────────────────────────────────────────────────── */

.hero { padding: clamp(64px, 12vh, 132px) 0 clamp(52px, 9vh, 96px); }
.hero .disp { margin: 18px 0 0; max-width: 15ch; }
.hero .lede { margin-top: 26px; }

.strip {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin-top: 40px; padding-top: 20px;
  border-top: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 11px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-3);
}
.strip b { color: var(--ink-2); font-weight: 500; }

/* ── generic section ──────────────────────────────────────────────── */

.sec { padding: clamp(56px, 9vh, 104px) 0; border-top: 1px solid var(--line-2); }
.sec-head { margin-bottom: clamp(34px, 5vh, 52px); }
.sec-head .h2 { margin-top: 14px; }

/* ── principles ───────────────────────────────────────────────────── */

.tenets { display: grid; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; }
@media (min-width: 860px) { .tenets { grid-template-columns: repeat(3, 1fr); } }

.tenet { background: var(--bg); padding: clamp(24px, 3vw, 34px); }
.tenet .n {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  color: var(--acc); display: block; margin-bottom: 20px;
}
.tenet h3 { font-size: 21px; letter-spacing: -.02em; margin-bottom: 12px; }
.tenet p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.62; }

/* ── status dot / badges ──────────────────────────────────────────── */

.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-2);
  padding: 4px 9px; border: 1px solid var(--line);
  border-radius: 999px; white-space: nowrap;
}
.badge i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3);
  flex: 0 0 auto;
}
.badge.is-live { color: var(--live); border-color: rgba(87, 217, 163, .3); }
.badge.is-live i { background: var(--live); box-shadow: 0 0 0 3px rgba(87,217,163,.14); }
.badge.is-build { color: var(--acc); border-color: rgba(255,77,46,.32); }
.badge.is-build i { background: var(--acc); }
.badge.is-private i { background: var(--ink-3); }

/* ── the workshop list (homepage) ─────────────────────────────────── */

.rows { border-top: 1px solid var(--line-2); }
.row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 20px;
  align-items: center;
  padding: 22px 0; border-bottom: 1px solid var(--line-2);
  text-decoration: none;
}
.row .t { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.row .d { color: var(--ink-3); font-size: 15px; grid-column: 1 / -1; margin-top: -4px; }
@media (min-width: 720px) {
  .row { grid-template-columns: 250px 1fr auto; }
  .row .d { grid-column: auto; margin-top: 0; }
}
.row:hover .t { color: var(--acc); }

/* ── gallery grid ─────────────────────────────────────────────────── */

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.chip {
  font-family: var(--mono); font-size: 11px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-3);
  background: none; border: 1px solid var(--line);
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.chip:hover { color: var(--ink); border-color: rgba(244,243,239,.24); }
.chip[aria-pressed="true"] {
  color: var(--bg); background: var(--ink); border-color: var(--ink);
}

.grid { display: grid; gap: clamp(18px, 2.4vw, 28px); }
@media (min-width: 760px) { .grid { grid-template-columns: repeat(2, 1fr); } }
/* Three columns only once there is enough to fill them. With three apps
   and one of them taking the lead row, a three-column grid leaves a hole
   that reads as a card that failed to load. This widens on its own the
   moment a fourth app is added to the catalogue. */
@media (min-width: 1140px) {
  .grid:has(> .card:nth-child(4)) { grid-template-columns: repeat(3, 1fr); }
}
/* the first card earns the full width — a gallery with a lead exhibit
   reads as curated; an even grid reads as a spreadsheet */
@media (min-width: 760px) { .grid .card.lead { grid-column: 1 / -1; } }

.card {
  position: relative;
  display: flex; flex-direction: column;
  cursor: pointer;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 14px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.card:hover { border-color: rgba(244,243,239,.2); transform: translateY(-3px); background: var(--panel-2); }

/* the title button carries the click for the whole card (see cardHtml) */
.card-open {
  font: inherit; letter-spacing: inherit; color: inherit;
  background: none; border: 0; padding: 0; margin: 0;
  text-align: left; cursor: pointer;
}
.card-open::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* ring the whole card rather than the title text when it has focus */
@supports selector(:has(*)) {
  .card-open:focus-visible { outline: none; }
  .card:has(.card-open:focus-visible) { outline: 2px solid var(--acc); outline-offset: 3px; }
}

/* the round "+" in the corner — the only hint that a card opens something.
   It turns a quarter on hover. */
.peek {
  position: absolute; top: 14px; right: 14px; z-index: 2; pointer-events: none;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink);
  background: rgba(10, 10, 11, .62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  transition: transform .35s cubic-bezier(.2,.8,.25,1), background .2s ease, color .2s ease, border-color .2s ease;
}
.peek::before, .peek::after {
  content: ""; position: absolute; width: 12px; height: 1.5px; background: currentColor;
}
.peek::after { transform: rotate(90deg); }
.card:hover .peek {
  transform: rotate(90deg);
  background: var(--acc); border-color: var(--acc); color: var(--bg);
}

.shot {
  position: relative; overflow: hidden;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-2);
  aspect-ratio: 16 / 9;
}
.grid .card.lead .shot { aspect-ratio: 21 / 7; }
.shot img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: transform .5s cubic-bezier(.2,.7,.25,1);
}
.card:hover .shot img { transform: scale(1.025); }
/* a hair of the page's ground pulled over the shot so three very
   different app palettes still sit together on one page */
.shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10,10,11,0) 55%, rgba(10,10,11,.55) 100%);
}

/* no picture yet: the app's initial in outline, on a faint hatch */
.shot.plate {
  display: grid; place-items: center;
  background: radial-gradient(120% 90% at 30% 15%, #1B1C21 0%, var(--bg-2) 62%);
}
.shot.plate::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(244,243,239,.035) 0 1px, transparent 1px 12px);
}
.shot.plate span {
  position: relative;
  font-size: clamp(72px, 10vw, 128px); font-weight: 700; line-height: 1;
  letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1px rgba(244, 243, 239, .3);
  transition: transform .5s cubic-bezier(.2,.7,.25,1), -webkit-text-stroke-color .3s ease;
}
.card:hover .shot.plate span { transform: scale(1.05); -webkit-text-stroke-color: rgba(255, 77, 46, .6); }
.shot.plate em {
  position: absolute; left: 16px; bottom: 14px; z-index: 1;
  font-style: normal; font-family: var(--mono); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
}

.card-body { padding: 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card-body h3 { font-size: 22px; letter-spacing: -.024em; }
.card-body .sub { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.58; flex: 1; }
.card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: 14px; border-top: 1px solid var(--line-2);
}
.stack {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin-left: auto;
}
.go {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--acc);
}
.note {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.card:hover .go { text-decoration: underline; text-underline-offset: 4px; }

.empty {
  border: 1px dashed var(--line); border-radius: 14px;
  padding: 44px 24px; text-align: center; color: var(--ink-3);
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase;
}

/* ── detail pane ──────────────────────────────────────────────────────
   Desktop: a centred panel that rises a few pixels as it fades in.
   Phone (≤600px): a full-height sheet that slides up from the bottom.
   Reduced motion is already handled by the global rule near the top. */

html.is-locked, html.is-locked body { overflow: hidden; }

.pane {
  padding: 0; margin: auto;
  width: min(680px, calc(100vw - 48px));
  max-width: none;
  max-height: min(88vh, 900px);
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 120px -24px rgba(0, 0, 0, .75);
}
.pane[open] {
  display: flex; flex-direction: column;
  animation: pane-in .3s cubic-bezier(.2,.8,.25,1);
}
.pane::backdrop {
  background: rgba(6, 6, 7, .74);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: pane-fade .3s ease;
}
.pane.is-closing { animation: pane-out .18s ease forwards; }
.pane.is-closing::backdrop { animation: pane-fade-out .18s ease forwards; }

@keyframes pane-in   { from { opacity: 0; transform: translateY(16px) scale(.985); } }
@keyframes pane-out  { to   { opacity: 0; transform: translateY(10px) scale(.99); } }
@keyframes sheet-in  { from { transform: translateY(100%); } }
@keyframes sheet-out { to   { transform: translateY(100%); } }
@keyframes pane-fade     { from { opacity: 0; } }
@keyframes pane-fade-out { to   { opacity: 0; } }

.pane-sheet {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
}

.pane-top {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px 12px 24px;
  background: rgba(19, 20, 24, .88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-2);
}
.pane-x {
  flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: none; color: var(--ink-2);
  border: 1px solid var(--line); cursor: pointer;
  transition: color .15s ease, border-color .15s ease, transform .35s cubic-bezier(.2,.8,.25,1);
}
.pane-x:hover { color: var(--ink); border-color: rgba(244,243,239,.3); transform: rotate(90deg); }

.pane .shot { flex: 0 0 auto; aspect-ratio: 16 / 8; }
.pane .shot.plate span { font-size: clamp(80px, 16vw, 150px); }
/* the tag already sits in the pane's top bar */
.pane .shot.plate em { display: none; }

.pane-body { padding: 28px 28px 12px; }
.pane-title {
  font-size: clamp(30px, 4.4vw, 42px); letter-spacing: -.032em;
  margin-bottom: 18px; outline: none;
  font-variation-settings: "wdth" 96;
}
.pane-body p { margin: 0 0 1em; color: var(--ink-2); font-size: 16px; line-height: 1.64; }
.pane-pts { list-style: none; margin: 22px 0 6px; padding: 0; border-top: 1px solid var(--line-2); }
.pane-pts li {
  position: relative;
  padding: 11px 0 11px 26px;
  border-bottom: 1px solid var(--line-2);
  font-size: 15px; line-height: 1.5;
}
.pane-pts li::before {
  content: ""; position: absolute; left: 2px; top: 1.3em;
  width: 11px; height: 1px; background: var(--acc);
}

.pane-foot {
  position: sticky; bottom: 0; z-index: 3; margin-top: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 16px 24px;
  background: rgba(19, 20, 24, .94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-2);
}
.pane-foot .stack { margin-left: 0; }
.pane-go, .pane-shut {
  margin-left: auto;
  font-family: var(--mono); font-size: 11px; letter-spacing: .15em;
  text-transform: uppercase; white-space: nowrap;
  padding: 12px 20px; border-radius: 999px;
}
.pane-go {
  color: var(--bg); background: var(--acc); font-weight: 500;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pane-go:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(255, 77, 46, .6); }
.pane-shut { color: var(--ink-3); border: 1px dashed var(--line); }

@media (max-width: 600px) {
  .pane {
    width: 100%; height: 100%; height: 100dvh;
    max-height: none; margin: 0;
    border: 0; border-radius: 0;
  }
  .pane[open] { animation: sheet-in .34s cubic-bezier(.2,.8,.25,1); }
  .pane.is-closing { animation: sheet-out .18s ease-in forwards; }
  .pane-top { padding: 10px 10px 10px 18px; }
  .pane-body { padding: 22px 18px 10px; }
  .pane-foot { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
  .pane-go, .pane-shut {
    flex: 1 1 100%; margin-left: 0; text-align: center;
    white-space: normal;
  }
}

/* ── footer ───────────────────────────────────────────────────────── */

.site-foot {
  border-top: 1px solid var(--line-2);
  padding: 48px 0 60px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; }
.site-foot a { color: var(--ink-2); text-decoration: none; }
.site-foot a:hover { color: var(--ink); }
.site-foot .sp { margin-left: auto; }

/* ── focus, for people who drive with a keyboard ──────────────────── */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}