/* ============================================================================
 * apprun.icu — "Brickyard" design system (shared by every page)
 * ----------------------------------------------------------------------------
 * The subject is a yard of small browser apps, each one a plot built from
 * blocks. So the whole system is derived from the block:
 *
 *   - MATERIALS, not a brand palette. Eight voxel materials (water, sand,
 *     grass, lava, rose, diamond, amethyst, stone), one per kind of app. Every
 *     material has three face tones — top, front, side — exactly like a lit
 *     cube, so any coloured surface can be extruded into a real block.
 *   - EXTRUSION, not drop shadows. Buttons, tiles and chips have a true 45°
 *     depth (two skewed faces) that grows on hover and collapses on press.
 *   - ONE type family on its width axis: wide + black for display (it reads as
 *     stacked blocks), normal width for text. No monospace labels.
 *   - Neutrals lean cool-blue (open-sky light) so the warm block colours pop;
 *     ink is a deep night navy, never pure black.
 *   - Ornament only where it is the subject: voxel scenes, the strata edge
 *     (a stepped terrain horizon) and the cube glyph. No grid paper, no glows.
 * ==========================================================================*/

@property --d { syntax: "<length>"; inherits: true; initial-value: 6px; }

:root {
  /* neutrals — hue-biased toward open sky */
  --page: #f3f8fe;
  --page-2: #e6effa;
  --card: #ffffff;
  --ink: #0c1535;
  --ink-2: #26325a;
  --ink-3: #4b5a82;
  --line: #d3e0f2;
  --line-2: #b3c6e3;

  /* semantic */
  --ok: #167a3f; --ok-soft: #dff5e6;
  --warn: #8a5600; --warn-soft: #fff0cc;
  --bad: #b3261e; --bad-soft: #ffe3df;
  --info: #1650b0; --info-soft: #e0ecff;

  /* materials: top (lit) / front / side (shade) / ink (text-safe on white) / soft tint / sky pair */
  --grass-top: #8be05a; --grass: #3fae44; --grass-side: #26803a; --grass-ink: #1b6a2c; --grass-soft: #e3f6dc;
  --water-top: #74c6ff; --water: #2f8cf0; --water-side: #1c5fc4; --water-ink: #1650b0; --water-soft: #e1efff;
  --sand-top: #ffe27a; --sand: #f6b92d; --sand-side: #c98a10; --sand-ink: #7d5200; --sand-soft: #fff1c9;
  --lava-top: #ffa064; --lava: #ff6a30; --lava-side: #c9400f; --lava-ink: #a9360b; --lava-soft: #ffe6d8;
  --rose-top: #ff94bb; --rose: #ef4a85; --rose-side: #b52a60; --rose-ink: #a3205a; --rose-soft: #ffe0ec;
  --diamond-top: #7cf0e0; --diamond: #17c3b0; --diamond-side: #0e8c7e; --diamond-ink: #0a6f65; --diamond-soft: #d9f8f2;
  --amethyst-top: #c4a8ff; --amethyst: #8a5cf0; --amethyst-side: #5b36b8; --amethyst-ink: #5a34b4; --amethyst-soft: #ebe3ff;
  --stone-top: #b5c1d4; --stone: #6f7f99; --stone-side: #475671; --stone-ink: #3b4863; --stone-soft: #e3e9f2;

  /* the active material: pages/sections choose one with data-mat="…" */
  --m-top: var(--water-top); --m: var(--water); --m-side: var(--water-side);
  --m-ink: var(--water-ink); --m-soft: var(--water-soft); --on-m: #fff;
  --sky-a: #a9d8ff; --sky-b: #eaf4ff;

  --display: "Archivo", "Arial Black", system-ui, sans-serif;
  --font-ui: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --code: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --r: 4px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --shadow-soft: 0 1px 2px rgba(12, 21, 53, 0.06), 0 12px 30px -16px rgba(12, 21, 53, 0.28);
}

[data-mat="water"]    { --m-top: var(--water-top);    --m: var(--water);    --m-side: var(--water-side);    --m-ink: var(--water-ink);    --m-soft: var(--water-soft);    --on-m: #fff;    --sky-a: #a9d8ff; --sky-b: #eaf4ff; }
[data-mat="sand"]     { --m-top: var(--sand-top);     --m: var(--sand);     --m-side: var(--sand-side);     --m-ink: var(--sand-ink);     --m-soft: var(--sand-soft);     --on-m: var(--ink); --sky-a: #ffe7a0; --sky-b: #fff7dc; }
[data-mat="grass"]    { --m-top: var(--grass-top);    --m: var(--grass);    --m-side: var(--grass-side);    --m-ink: var(--grass-ink);    --m-soft: var(--grass-soft);    --on-m: #fff;    --sky-a: #bfe8ff; --sky-b: #eaf8e4; }
[data-mat="lava"]     { --m-top: var(--lava-top);     --m: var(--lava);     --m-side: var(--lava-side);     --m-ink: var(--lava-ink);     --m-soft: var(--lava-soft);     --on-m: #fff;    --sky-a: #ffcfae; --sky-b: #fff0e6; }
[data-mat="rose"]     { --m-top: var(--rose-top);     --m: var(--rose);     --m-side: var(--rose-side);     --m-ink: var(--rose-ink);     --m-soft: var(--rose-soft);     --on-m: #fff;    --sky-a: #ffc9de; --sky-b: #ffeef5; }
[data-mat="diamond"]  { --m-top: var(--diamond-top);  --m: var(--diamond);  --m-side: var(--diamond-side);  --m-ink: var(--diamond-ink);  --m-soft: var(--diamond-soft);  --on-m: var(--ink); --sky-a: #a8f1e6; --sky-b: #e6fbf8; }
[data-mat="amethyst"] { --m-top: var(--amethyst-top); --m: var(--amethyst); --m-side: var(--amethyst-side); --m-ink: var(--amethyst-ink); --m-soft: var(--amethyst-soft); --on-m: #fff;    --sky-a: #d6c8ff; --sky-b: #f3edff; }
[data-mat="stone"]    { --m-top: var(--stone-top);    --m: var(--stone);    --m-side: var(--stone-side);    --m-ink: var(--stone-ink);    --m-soft: var(--stone-soft);    --on-m: #fff;    --sky-a: #c6d2e6; --sky-b: #eef2f9; }

/* ------------------------------------------------------------- base ------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms ease both vt-out; }
::view-transition-new(root) { animation: 260ms var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

body { font-family: var(--font-ui); font-stretch: 100%; font-synthesis: none; color: var(--ink-2); background: var(--page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-family: var(--display); font-stretch: 118%; font-weight: 850; color: var(--ink); text-wrap: balance; }
::selection { background: var(--m); color: var(--on-m); }
:focus-visible { outline: 3px solid var(--m); outline-offset: 3px; border-radius: 2px; }
html { scrollbar-color: var(--line-2) var(--page); }
img, svg, canvas, video { max-width: 100%; }
code, kbd, pre, samp { font-family: var(--code); font-stretch: 100%; }

/* --------------------------------------------------------- the cube glyph - */
.cube {
  --s: 1em;
  display: inline-block; width: var(--s); height: var(--s); flex: none; vertical-align: -0.12em;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: conic-gradient(from 300deg at 50% 50%, var(--m-top) 0 120deg, var(--m-side) 0 240deg, var(--m) 0 360deg);
}

/* ---------------------------------------------------- extruded blocks ------ */
.blk, .btn {
  --d: 5px; --face: var(--m); --side: var(--m-side); --under: color-mix(in srgb, var(--m-side) 62%, var(--m));
  position: relative; border-radius: 0;
  margin: 0 8px 8px 0;               /* reserve the max depth so hover never reflows */
  background: var(--face); color: var(--on-m);
  transition: --d 0.14s var(--ease), transform 0.14s var(--ease), background-color 0.14s;
}
.blk::before, .btn::before, .blk::after, .btn::after { content: ""; position: absolute; pointer-events: none; transform-origin: 0 0; }
.blk::before, .btn::before { left: 100%; top: 0; width: var(--d); height: 100%; background: var(--side); transform: skewY(45deg); }
.blk::after, .btn::after { left: 0; top: 100%; width: 100%; height: var(--d); background: var(--under); transform: skewX(45deg); }
a.blk:hover, button.blk:hover, .btn:hover, .blk.lift:hover { --d: 8px; transform: translate(-3px, -3px); }
a.blk:active, button.blk:active, .btn:active { --d: 1px; transform: translate(3px, 3px); transition-duration: 0.05s; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; cursor: pointer; border: 0; text-decoration: none;
  padding: 0.82em 1.25em; font: 800 0.98rem/1 var(--display); font-stretch: 108%; letter-spacing: 0.005em; user-select: none;
}
.btn:hover { color: var(--on-m); }
.btn.btn-ghost { --face: var(--card); --side: var(--line-2); --under: var(--line); color: var(--ink); }
.btn.btn-ghost:hover { color: var(--ink); }
.btn.btn-ink { --face: var(--ink); --side: #050a1f; --under: #1a2550; color: #fff; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; --d: 3px; }

/* ----------------------------------------------- strata: a terrain horizon - */
/* A stepped silhouette (random-looking but fixed) used as a section edge. It is
   a mask on a coloured element: <div class="strata" data-mat="grass"></div> */
.strata {
  height: 28px; background: var(--m); margin: 0;
  -webkit-mask: var(--strata-mask) repeat-x bottom / 520px 28px; mask: var(--strata-mask) repeat-x bottom / 520px 28px;
  --strata-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V10h20V18h20V24h20V20h20V20h20V24h20V24h20V12h20V20h20V12h20V20h20V12h20V24h20V24h20V24h20V24h20V20h20V16h20V4h20V8h20V16h20V24h20V24h20V24h20V24h20V12h20V28H0z'/%3E%3C/svg%3E");
}
.strata.flip { transform: scaleY(-1); }

/* -------------------------------------------------- world banner (pages) --- */
.vx-banner {
  position: relative; isolation: isolate; overflow: clip; color: var(--ink);
  background: linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 78%, var(--page) 100%);
}
.vx-banner__inner {
  position: relative; z-index: 1; width: min(calc(100% - 2.5rem), 1200px); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: clamp(1rem, 4vw, 3.5rem);
  padding: clamp(2rem, 6vw, 4.5rem) 0 clamp(2.5rem, 6vw, 4rem);
}
.vx-banner__scene { position: relative; aspect-ratio: 1.18; min-height: 260px; max-height: 440px; width: 100%; touch-action: pan-y; }
.vx-banner__scene .vx-canvas { position: absolute; inset: 0; display: block; }
.vx-banner h1 { font-size: clamp(2.1rem, 5.2vw, 4.2rem); line-height: 0.98; letter-spacing: -0.025em; margin: 0 0 1rem; }
.vx-banner p.lede { font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.55; color: var(--ink-2); max-width: 36em; }
.vx-banner .strata { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 0; background: var(--page); }
@media (max-width: 860px) {
  .vx-banner__inner { grid-template-columns: 1fr; }
  .vx-banner__scene { order: -1; aspect-ratio: 1.5; max-height: 280px; min-height: 200px; }
}

/* ------------------------------------------------------------- reveal ----- */
/* Elements marked [data-reveal] are "placed" like a block: they drop in from
   slightly above with a little overshoot. ds.js adds .is-in on first view. */
.js [data-reveal] { opacity: 0; transform: translateY(-18px) scale(0.985); transition: opacity 0.5s var(--ease), transform 0.65s var(--ease-pop); transition-delay: calc(var(--i, 0) * 55ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="up"] { transform: translateY(22px); }
.js [data-reveal="up"].is-in { transform: none; }

/* block progress bar — ds.js injects <div class="scroll-blocks"> */
.scroll-blocks { position: fixed; left: 0; right: 0; top: 0; z-index: 90; height: 5px; display: flex; pointer-events: none; }
.scroll-blocks i { flex: 1; background: transparent; transition: background-color 0.18s; }
.scroll-blocks i.on { background: var(--c, var(--m)); }

/* skip link + sr-only */
.skip-link { position: absolute; left: 0.75rem; top: -4rem; z-index: 200; background: var(--ink); color: #fff; padding: 0.7rem 1rem; font-weight: 700; }
.skip-link:focus { top: 0.75rem; }
.ds-nocaps { text-transform: none !important; letter-spacing: 0 !important; }
.sr, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}