/* LukiWebCo: early-2000s portal on the outside, live agents on the inside. */
:root {
  --navy: #003366;
  --navy-2: #336699;
  --sky: #6699cc;
  --silver: #c0c0c0;
  --silver-hi: #ffffff;
  --silver-lo: #808080;
  --paper: #ffffff;
  --page: #e8ecf2;
  --ink: #111111;
  --muted: #555555;
  --link: #0033cc;
  --visited: #663399;
  --orange: #ff9900;
  --green: #22dd66;
  --amber: #ffbb00;
  --font: Verdana, Tahoma, Geneva, "DejaVu Sans", sans-serif;
  --mono: "Courier New", Courier, "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font: 14px/1.5 var(--font);
  color: var(--ink);
  background-color: var(--page);
  /* tiled background, the 2003 way, but quiet */
  background-image:
    linear-gradient(45deg, rgba(0,51,102,.035) 25%, transparent 25%, transparent 75%, rgba(0,51,102,.035) 75%),
    linear-gradient(45deg, rgba(0,51,102,.035) 25%, transparent 25%, transparent 75%, rgba(0,51,102,.035) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}
a { color: var(--link); }
a:visited { color: var(--visited); }
a:hover { color: #cc0000; }
:focus-visible { outline: 2px dotted #cc0000; outline-offset: 2px; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; z-index: 10; background: #ff0; padding: 4px 8px; }
.draft { margin: 0; padding: 6px 12px; background: #ffffcc; border-bottom: 1px solid #cc9; font-size: 12px; text-align: center; }
.ph { background: #ffeb3b; color: #000; font: bold 10px var(--font); padding: 0 3px; border: 1px solid #c9a800; vertical-align: middle; }

.page { max-width: 1080px; margin: 12px auto; background: var(--paper); border: 1px solid var(--silver-lo); box-shadow: 4px 4px 0 rgba(0,0,0,.18); }

/* masthead */
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: linear-gradient(#0a4a8a, var(--navy)); color: #fff; border-bottom: 3px solid var(--orange); }
.logo { text-decoration: none; color: #fff; display: block; }
.logo:visited, .logo:hover { color: #fff; }
.logo-word { display: block; font: bold 34px/1 "Trebuchet MS", var(--font); letter-spacing: -1px; text-shadow: 2px 2px 0 #001a33; }
.logo-word b { color: var(--orange); }
.logo-tag { display: block; margin-top: 4px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #bcd4ee; }
.masthead-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.live-pill { margin: 0; font-size: 11px; color: #d6f5e0; background: rgba(0,0,0,.3); padding: 3px 8px; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; }

/* the modern catch: a live LED */
.led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); vertical-align: 0; animation: pulse 1.6s ease-in-out infinite; }
.led-amber { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.led-off { background: #aaa; box-shadow: none; animation: none; }
@keyframes pulse { 50% { opacity: .35; } }

/* beveled buttons */
.bevel { display: inline-block; padding: 4px 12px; font: bold 12px var(--font); color: #000 !important; text-decoration: none; background: var(--silver); border: 2px solid; border-color: var(--silver-hi) var(--silver-lo) var(--silver-lo) var(--silver-hi); box-shadow: 1px 1px 0 #000; }
.bevel:hover { background: #d4d4d4; }
.bevel:active { border-color: var(--silver-lo) var(--silver-hi) var(--silver-hi) var(--silver-lo); box-shadow: none; transform: translate(1px,1px); }
.bevel-go { background: linear-gradient(#ffcc66, var(--orange)); }
.bevel-go:hover { background: linear-gradient(#ffd98a, #ffad33); }
.btn-mail { font-size: 12px; }
.wide { display: block; text-align: center; word-break: break-all; }

/* tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 10px 0; background: #dfe7f1; border-bottom: 1px solid var(--navy-2); }
.tabs a { padding: 5px 12px; font: bold 12px var(--font); text-decoration: none; color: var(--navy); background: linear-gradient(#ffffff, #cfdbe9); border: 1px solid var(--navy-2); border-bottom: 0; border-radius: 5px 5px 0 0; }
.tabs a[aria-current] { background: #fff; position: relative; top: 1px; }
.tabs a:visited { color: var(--navy); }

/* ticker */
.ticker { overflow: hidden; background: #000; color: #9f9; font: 12px/24px var(--mono); border-bottom: 1px solid #333; }
.ticker-track { display: inline-flex; gap: 48px; white-space: nowrap; padding-left: 100%; animation: tick 40s linear infinite; }
.ticker b { color: #ff0; }
@keyframes tick { to { transform: translateX(-100%); } }

/* three-column portal */
.layout { display: grid; grid-template-columns: 180px minmax(0,1fr) 230px; gap: 10px; padding: 10px; }

.box { background: #fff; border: 1px solid var(--navy-2); margin-bottom: 10px; }
.box-head { margin: 0; padding: 3px 8px; font: bold 12px var(--font); color: #fff; background: linear-gradient(var(--navy-2), var(--navy)); display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.head-note { font-weight: normal; font-size: 11px; color: #cfe0f2; }
.box-body { padding: 10px 12px; }
.box-body > :first-child { margin-top: 0; }
.box-body > :last-child { margin-bottom: 0; }
.fine { font-size: 11px; color: var(--muted); }

.nav-list, .status-list { list-style: none; margin: 0; padding: 6px 0; }
.nav-list li { padding: 3px 10px 3px 22px; position: relative; }
.nav-list li::before { content: ""; position: absolute; left: 10px; top: 9px; border: 4px solid transparent; border-left-color: var(--orange); }
.status-list li { padding: 3px 10px; font-size: 12px; }
.status-list + .fine { padding: 0 10px 8px; margin: 0; }
.new { font: bold 9px var(--font); color: #fff; background: #cc0000; padding: 0 3px; text-transform: uppercase; }

.badges { display: grid; grid-template-columns: repeat(2, 88px); gap: 4px; }
.badge88 { width: 88px; height: 31px; display: flex; flex-direction: column; justify-content: center; text-align: center; font: 8px/1.15 var(--font); letter-spacing: .5px; border: 1px solid #000; }
.badge88 b { font-size: 9px; }
.b-humans { background: #003366; color: #fff; }
.b-humans b { color: #ff9900; }
.b-cookies { background: #fff; color: #c00; }
.b-html { background: #ffcc00; color: #000; }
.b-view { background: #000; color: #9f9; }

/* hero */
.hero h1 { margin: 0 0 8px; font: bold 28px/1.15 "Trebuchet MS", var(--font); color: var(--navy); letter-spacing: -.5px; }
.lede { font-size: 15px; }
.cta { display: flex; gap: 10px; flex-wrap: wrap; }
.cta .bevel { font-size: 14px; padding: 6px 16px; }

/* media player */
.player { background: linear-gradient(#4b4f57, #2b2e33); border-color: #222; }
.player .box-head { background: linear-gradient(#5a6070, #33373f); }
.player-screen { margin: 8px; background: #000; border: 2px inset #666; aspect-ratio: 16 / 9; }
.player-screen video { display: block; width: 100%; height: 100%; }
.player-bar { margin: 0 8px 8px; padding: 4px 8px; font: 11px var(--mono); color: #9fd; background: #000; border: 1px inset #555; }

/* services */
.services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.services li { border: 1px dashed var(--sky); padding: 8px 10px; background: #f6f9fc; }
.services h3 { margin: 0 0 4px; font-size: 14px; color: var(--navy); display: flex; align-items: center; gap: 6px; }
.services p { margin: 0; font-size: 13px; }
.pix { width: 16px; height: 16px; display: inline-block; image-rendering: pixelated; background-size: 16px 16px; }
.pix-consult { background: radial-gradient(circle at 6px 6px, #fff 2px, transparent 3px), radial-gradient(circle at 7px 7px, var(--navy) 5px, transparent 6px), linear-gradient(135deg, transparent 60%, var(--orange) 60%, var(--orange) 75%, transparent 75%); }
.pix-train { background: linear-gradient(var(--navy) 0 0) 2px 3px / 12px 8px no-repeat, linear-gradient(#fff 0 0) 3px 4px / 10px 6px no-repeat, linear-gradient(var(--orange) 0 0) 7px 11px / 2px 4px no-repeat; }
.pix-tools { background: linear-gradient(45deg, transparent 42%, var(--navy) 42%, var(--navy) 58%, transparent 58%), radial-gradient(circle at 12px 4px, var(--orange) 3px, transparent 4px); }

/* experience */
.big-number { margin: 0 0 8px; font: bold 32px/1 "Trebuchet MS", var(--font); color: var(--navy); }
.big-number small { font: 12px var(--font); color: var(--muted); }
.names { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.names li { padding: 6px 12px; font: bold 13px "Trebuchet MS", var(--font); color: #333; letter-spacing: .3px; background: linear-gradient(#fff, #e9edf2); border: 1px solid #b8c4d2; }

/* how */
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.how-step { position: relative; padding-top: 4px; }
.how-step h3 { margin: 0 0 4px 30px; font-size: 13px; color: var(--navy); }
.how-step p { margin: 0; font-size: 13px; }
.step { position: absolute; top: 0; left: 0; width: 22px; height: 22px; display: grid; place-items: center; font: bold 12px var(--font); color: #fff; background: var(--orange); border: 1px solid #000; }

/* projects: retro boxes with a holographic modern sheen */
.shelf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.card { perspective: 700px; }
.card > a, .card > div { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; background: #fff; border: 2px solid #000; box-shadow: 4px 4px 0 #000; transform: rotateX(var(--rx,0)) rotateY(var(--ry,0)); transition: transform .15s ease-out, box-shadow .15s; position: relative; overflow: hidden; }
.card > a:hover, .card > div:hover { box-shadow: 6px 6px 0 #000; }
.card > a::after, .card > div::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: color-dodge; transition: opacity .2s; background: linear-gradient(115deg, transparent 20%, rgba(255,0,170,.55) 35%, rgba(0,255,230,.55) 50%, rgba(255,230,0,.55) 65%, transparent 80%); background-size: 250% 250%; background-position: var(--hx, 50%) var(--hy, 50%); }
.card > a:hover::after, .card > div:hover::after { opacity: .65; }
.card-art { display: block; height: 110px; position: relative; overflow: hidden; border-bottom: 2px solid #000; }
.card-art > span { position: absolute; inset: 0; }
.card-label { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; flex: 1; }
.card-title { font: bold 15px "Trebuchet MS", var(--font); color: var(--navy); }
.card > a .card-title { text-decoration: underline; color: var(--link); }
.card-desc { font-size: 12px; color: #333; flex: 1; }
.tag { align-self: flex-start; font: bold 10px var(--font); text-transform: uppercase; letter-spacing: 1px; padding: 2px 6px; border: 1px solid #000; }
.tag-live { background: var(--green); }
.tag-wip { background: var(--amber); }
.tag-soon { background: #ddd; }

/* card art, all CSS */
.art-tracker { background: linear-gradient(transparent 0 0), repeating-linear-gradient(90deg, transparent 0 18px, rgba(0,255,120,.15) 18px 19px), repeating-linear-gradient(0deg, transparent 0 18px, rgba(0,255,120,.15) 18px 19px), #031; }
.art-tracker::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 18%; height: 60%; background: linear-gradient(to top, #2f6 0 0) 0 100% / 12% 30% no-repeat, linear-gradient(to top, #2f6 0 0) 22% 100% / 12% 45% no-repeat, linear-gradient(to top, #2f6 0 0) 44% 100% / 12% 38% no-repeat, linear-gradient(to top, #2f6 0 0) 66% 100% / 12% 70% no-repeat, linear-gradient(to top, #ff0 0 0) 88% 100% / 12% 100% no-repeat; }
.art-dead { background: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 120%, #3a0d4d, #0b0b14 70%); }
.art-dead::after { content: "404"; position: absolute; inset: 0; display: grid; place-items: center; font: bold 44px var(--mono); color: #c9f; text-shadow: 3px 0 #f0f, -3px 0 #0ff; letter-spacing: 4px; }
.art-kato { background: radial-gradient(circle at 30% 60%, #7a4a1f 18px, transparent 19px), radial-gradient(circle at 68% 58%, #d9b07a 16px, transparent 17px), linear-gradient(#bfe6ff 60%, #7cc96b 60%); }
.art-kato::after { content: "\2764"; position: absolute; left: 47%; top: 18%; font-size: 22px; color: #e33; }
.art-dragon { background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 6px, transparent 7px), radial-gradient(circle at 75% 25%, rgba(255,255,255,.8) 9px, transparent 10px), radial-gradient(circle at 55% 70%, rgba(255,255,255,.7) 12px, transparent 13px), radial-gradient(circle at 35% 75%, #3c9 14px, transparent 15px), linear-gradient(#5ab0ff, #1d5fd0); }
.art-hallu { background: conic-gradient(from 0deg, #f0f, #ff0, #0ff, #f0f); filter: saturate(1.3); }
.art-hallu::after { content: "?!"; position: absolute; inset: 0; display: grid; place-items: center; font: bold 52px "Trebuchet MS", var(--font); color: #fff; text-shadow: 3px 3px 0 #000; }
.art-edu { background: repeating-linear-gradient(0deg, #f6f1e3 0 18px, #c9d6ea 18px 19px), #f6f1e3; }
.art-edu::after { content: "\03A6"; position: absolute; inset: 0; display: grid; place-items: center; font: 54px Georgia, serif; color: var(--navy); }

.construction { vertical-align: middle; }

/* right column widgets */
.counter-box { text-align: center; }
.counter { display: inline-block; margin: 0 0 6px; padding: 4px 6px; font: bold 26px/1 var(--mono); letter-spacing: 4px; color: #2f6; background: #000; border: 2px inset #666; text-shadow: 0 0 6px rgba(50,255,100,.7); }
.news { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.news li { padding: 6px 0; border-top: 1px dotted #bbb; }
.news li:first-child { border-top: 0; }
.news time { display: block; font: 11px var(--mono); color: #777; }
.news .who { font-weight: bold; color: var(--navy); }
.news li.fresh { animation: fresh 2.5s ease-out; }
@keyframes fresh { from { background: #ffff99; } to { background: transparent; } }
.webring { display: flex; justify-content: space-between; gap: 4px; }
.webring .bevel { padding: 3px 6px; font-size: 11px; }

.footer { padding: 10px 14px; border-top: 3px solid var(--orange); background: #dfe7f1; text-align: center; font-size: 12px; }
.footer p { margin: 2px 0; }

/* phones and tablets: same look, stacked */
@media (max-width: 900px) {
  .page { margin: 0; border: 0; box-shadow: none; }
  .layout { grid-template-columns: 1fr; }
  .col-main { order: 1; }
  .col-right { order: 2; }
  .col-left { order: 3; }
  .shelf { grid-template-columns: repeat(2, 1fr); }
  .badges { grid-template-columns: repeat(4, 88px); }
}
@media (max-width: 600px) {
  .masthead { flex-direction: column; align-items: flex-start; }
  .masthead-right { justify-content: flex-start; }
  .logo-word { font-size: 28px; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .tabs a { white-space: nowrap; }
  .hero h1 { font-size: 23px; }
  .services, .how, .shelf { grid-template-columns: 1fr; }
  .badges { grid-template-columns: repeat(2, 88px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .led, .ticker-track, .news li.fresh { animation: none; }
  .ticker-track { padding-left: 12px; white-space: normal; flex-wrap: wrap; gap: 4px 24px; }
  .card > a, .card > div { transition: none; transform: none; }
}