/* LuckeySystems Bench — shared styles
   The page is a terrain cross-section: sky on top, a grass horizon seam,
   entries mined from the ground, bedrock at the bottom. */

:root {
  --sky-hi: #7db3d8;
  --sky-lo: #bedff3;
  --grass: #57a03c;
  --grass-dark: #3d7a28;
  --dirt: #7a5230;
  --dirt-dark: #5c3d22;
  --ground: #efe8d8;
  --card: #f8f3e6;
  --ink: #26211a;
  --stone: #6f6555;
  --bedrock: #191510;
  --gold: #e8b64c;
  --maxw: 1060px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--ink);
  background: var(--ground);
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.px   { font-family: 'Silkscreen', 'Courier New', monospace; font-weight: 700; line-height: 1.1; }
.mono { font-family: 'IBM Plex Mono', monospace; }

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

:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ---------------- sky ---------------- */

.sky {
  position: relative;
  background: linear-gradient(var(--sky-hi), var(--sky-lo));
  overflow: hidden;
  color: var(--ink);
}
.sky .wrap { position: relative; z-index: 1; }
.sun {
  position: absolute; top: 46px; right: 8%;
  width: 54px; height: 54px; background: #fff3ba;
  box-shadow: 0 0 0 6px rgba(255, 243, 186, 0.45), 0 0 60px 20px rgba(255, 240, 170, 0.55);
}
.cloud { position: absolute; width: 18px; height: 18px; background: #fff; opacity: 0.92; }
.cloud::before {
  content: ''; position: absolute; inset: 0; background: #fff;
  box-shadow: 18px 0 #fff, 36px 0 #fff, 54px 0 #fff, 72px 0 #fff,
              18px -18px #fff, 36px -18px #fff, 54px -18px #fff,
              -18px 0 #fff, 36px -36px #fff;
}
.cloud.c1 { top: 26%; left: -140px; animation: drift 80s linear infinite; }
.cloud.c2 { top: 12%; left: -140px; animation: drift 120s linear infinite; animation-delay: -60s; transform: scale(0.7); }
.cloud.c3 { top: 42%; left: -140px; animation: drift 95s linear infinite; animation-delay: -30s; transform: scale(1.25); }
@keyframes drift { to { left: 110%; } }
@media (prefers-reduced-motion: reduce) { .cloud { animation: none; left: 20%; } .cloud.c2 { left: 55%; } .cloud.c3 { left: 78%; } }

/* ---------------- horizon seam ---------------- */

.horizon {
  height: 46px;
  background:
    repeating-linear-gradient(90deg, #57a03c 0 8px, #4c9134 8px 18px, #61aa45 18px 26px) top / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, #3d7a28 0 6px, #366d23 6px 16px) top 14px left 0 / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, #7a5230 0 10px, #6d4829 10px 22px, #82593a 22px 34px);
}

/* ---------------- blocky components ---------------- */

.btn {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 15px;
  text-decoration: none; cursor: pointer;
  color: #fff; background: var(--grass);
  border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  padding: 10px 20px;
  transition: transform 0.06s, box-shadow 0.06s;
}
.btn:hover, .btn:focus-visible { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.btn.ghost { background: var(--card); color: var(--ink); }
.btn.small { font-size: 13px; padding: 7px 14px; }

.slab {
  background: var(--card);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(38, 33, 26, 0.28);
}

.chip {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px;
  border: 2px solid var(--ink); background: #fff;
  padding: 2px 9px; margin: 2px 2px 2px 0;
}

.eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--stone);
}
.sky .eyebrow { color: #2c4a63; }
.eyebrow a { color: inherit; text-decoration: none; border-bottom: 1.5px solid currentColor; }
.eyebrow a:hover { color: var(--ink); }

/* ---------------- bedrock footer ---------------- */

.bedrock {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 12px, transparent 12px 30px),
    var(--bedrock);
  color: #b0a894;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  padding: 34px 0 40px;
  margin-top: 0;
}
.bedrock a { color: #ddd3bb; }
.bedrock .wrap { display: flex; flex-wrap: wrap; gap: 10px 32px; justify-content: space-between; }