/* ──────────────────────────────────────────────────────────────────────────
   site.css — site-wide layout primitives.
   ────────────────────────────────────────────────────────────────────────── */

/* ── page shell ──────────────────────────────────────────────────────────── */
.page {
  background-color: var(--navy);
  padding: 28px 16px 56px;
}

/* Static 8 × 8 px grid texture. Same two crossed linear-gradients
   as `.brand-header`, so the top banner reads as one continuous
   pattern with the page background. Fixed-position pseudo-element
   fills the viewport behind the page content. */
.page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--navy);
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--blue) 25%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--blue) 25%, transparent) 1px,
      transparent 1px
    );
  background-size: 8px 8px;
}

/* Random highlight squares. initGridHighlights() in scripts/site.js
   paints 7 × 7 px sand squares into the interior of individual
   8 × 8 px grid cells on a fixed canvas, then fades each one back
   to transparent on its own clock. The canvas sits above the
   ::before texture and below the card shell. */
.grid-highlights {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* At 1024 px and below the card fills almost the whole viewport, so
   the textured background would only show in a thin gutter. Remove
   the 8 × 8 texture and the animated highlights entirely; the page
   falls back to flat navy. */
@media (max-width: 1024px) {
  .page::before { display: none; }
  .grid-highlights { display: none; }
}

.page > .shell {
  margin: 0 auto;
  max-width: 960px;
  /* Lift above the ::before grid texture and the highlight canvas
     (both sit at z-index 0). */
  position: relative;
  z-index: 1;
}

/* ── brand card ──────────────────────────────────────────────────────────── */
.card {
  background: var(--sand);
  border: var(--border-thick);
  box-shadow: var(--card-shadow);
  min-width: 0;
}

/* ── framed header ───────────────────────────────────────────────────────── */
.brand-header {
  background: var(--navy);
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--blue) 25%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--blue) 25%, transparent) 1px,
      transparent 1px
    );
  background-size: 32px 32px;
  border-bottom: var(--border-thick);
  padding: 28px 20px 22px;
  text-align: center;
}
.brand-header .logo-tile {
  width: 112px; height: 112px;
  image-rendering: pixelated;
  display: block;
  margin: 0 auto 14px;
  padding: 8px;
  background: var(--sand);
  border: var(--border-thick);
  border-color: var(--cream);
  box-shadow: var(--hard-blue);
}
.brand-header h1 {
  color: var(--white);
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 8px;
  background: var(--navy);
  overflow-wrap: anywhere;
}
.brand-header .tag {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--blue);
  margin-top: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  width: fit-content;
  max-width: 100%;
  margin-left: auto; margin-right: auto;
  padding: 8px;
  background: var(--navy);
  overflow-wrap: anywhere;
}

/* ── nav strip ─────────────────────────────────────────────────────────── */
.nav-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 20px;
  border-bottom: 4px solid var(--cream);
  background: var(--sand);
}
.nav-strip a {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  padding: 6px 10px;
  border: 2px solid var(--navy);
  box-shadow: 2px 2px 0 var(--navy);
  background: var(--white);
}
.nav-strip a:hover, .nav-strip a:focus-visible {
  background: var(--blue);
  color: var(--white);
  outline: none;
}
.nav-strip a.is-active {
  background: var(--navy);
  color: var(--white);
}

/* ── sections ──────────────────────────────────────────────────────────── */
.section {
  padding: 28px 20px;
  border-bottom: 4px solid var(--cream);
}
.section:last-of-type { border-bottom: none; }
.section h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.section h2::after {
  content: "";
  flex: 1;
  height: 4px;
  background: var(--cream);
}
.section-intro {
  font-size: 22px;
  line-height: 1.25;
  color: var(--navy);
  margin-bottom: 22px;
  max-width: 60ch;
}

/* ── generic tiles ─────────────────────────────────────────────────────── */
.tile {
  background: var(--white);
  border: var(--border);
  box-shadow: var(--hard);
  padding: 14px;
  min-width: 0;
}

.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
@media (max-width: 620px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ── about row ──────────────────────────────────────────────────────────── */
.about-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--white);
  border: var(--border);
  box-shadow: var(--hard);
  padding: 16px;
}
.about-row img {
  width: 118px;
  height: auto;
  align-self: stretch;
  object-fit: cover;
  object-position: center top;
  image-rendering: pixelated;
  border: var(--border);
  flex: none;
}
.about-row .copy { min-width: 0; flex: 1 1 auto; }

/* About intro reuses the 02 / Code in motion terminal treatment:
   navy screen, blue title bar, monospace lines, blinking cursor. */
.about-term {
  border: 3px solid var(--blue);
  background: var(--navy);
  box-shadow: 4px 4px 0 var(--cream);
  color: var(--sand);
  min-width: 0;
}
.about-term-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  background: var(--blue);
  border-bottom: 3px solid var(--cream);
}
.about-term-title {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}
.about-term-lights { display: flex; gap: 4px; }
.about-term-lights i {
  width: 8px; height: 8px; display: block;
  border: 2px solid var(--navy);
}
.about-term-lights i:nth-child(1) { background: var(--sand); }
.about-term-lights i:nth-child(2) { background: var(--cream); }
.about-term-lights i:nth-child(3) { background: var(--white); }
.about-term-screen { padding: 12px 10px 6px; }
.about-term-line {
  position: relative;
  margin: 2px 0;
  padding-left: 1.4em;
}
.about-term-prompt,
.about-term-ghost,
.about-term-code {
  font-family: var(--font-code);
  font-size: 16px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.about-term-prompt {
  position: absolute;
  top: 0; left: 0;
  width: 1.4em;
  color: var(--cream);
}
.about-term-ghost { visibility: hidden; }
.about-term-typed {
  position: absolute;
  inset: 0 0 0 1.4em;
}
.about-term-code { color: var(--sand); }
.about-term-cursor {
  display: inline-block;
  width: 0.55em; height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--white);
}
.about-term-cursor.hide { opacity: 0; }
@keyframes about-term-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}
.about-term-cursor.blink {
  animation: about-term-blink 1.1s steps(1, end) infinite;
}
.about-term-status {
  margin: 0;
  padding: 2px 10px 10px;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1;
  color: var(--cream);
}
@media (prefers-reduced-motion: reduce) {
  .about-term-cursor.blink { animation: none; }
}

/* ── goals ──────────────────────────────────────────────────────────────── */
.goals {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.goal {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--white);
  border: var(--border);
  box-shadow: var(--hard);
  padding: 12px;
}
@media (min-width: 760px) {
  .goals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.goal .ico {
  width: 48px; height: 48px;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.goal .ico img { width: 32px; height: 32px; display: block; }
.goal .body { padding-top: 1px; }
.goal .body b {
  font-family: var(--font-display);
  font-size: 12px;
  display: block;
  margin-bottom: 5px;
  letter-spacing: .5px;
}
.goal .body span {
  font-size: 20px;
  line-height: 1.15;
  color: var(--navy);
  display: block;
}

/* ── voice tiles ── removed from public surface; the brand contract is the source of truth. */

/* ── ui playground ─────────────────────────────────────────────────────── */
.ui-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 620px) { .ui-grid { grid-template-columns: minmax(0, 1fr); } }
.ui-demo {
  background: var(--white);
  border: var(--border);
  box-shadow: var(--hard);
  padding: 16px;
  min-width: 0;
}
.ui-demo h3 {
  font-family: var(--font-display);
  font-size: 10px;
  line-height: 1.5;
  margin-bottom: 10px;
}
.ui-demo > p {
  font-size: 20px;
  line-height: 1.2;
  margin-bottom: 16px;
}

/* ── projects ──────────────────────────────────────────────────────────── */
.projects {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
@media (max-width: 620px) { .projects { grid-template-columns: minmax(0, 1fr); } }
.project {
  background: var(--white);
  border: var(--border);
  box-shadow: var(--hard);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.project header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: space-between;
}
.project .pid {
  font-family: var(--font-code);
  font-size: 14px;
  color: var(--blue);
}
.project p { font-size: 20px; line-height: 1.2; }
.project .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.project .tag {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--navy);
  border: 2px solid var(--navy);
  padding: 2px 6px;
  background: var(--sand);
}
.project footer {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.project footer a {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  border: 2px solid var(--navy);
  padding: 4px 8px;
  background: var(--white);
}
.project footer a:hover, .project footer a:focus-visible {
  background: var(--navy);
  color: var(--white);
  box-shadow: 6px 6px 0 var(--blue);
}

/* ── now list ──────────────────────────────────────────────────────────── */
.now-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
@media (max-width: 620px) { .now-list { grid-template-columns: minmax(0, 1fr); } }
.now-item {
  background: var(--white);
  border: var(--border);
  box-shadow: var(--hard);
  padding: 16px;
}
.now-item .lbl {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blue);
  display: block;
  margin-bottom: 8px;
}
.now-item h3 {
  font-family: var(--font-display);
  font-size: 14px;
  margin-bottom: 8px;
}
.now-item p {
  font-size: 20px;
  line-height: 1.2;
}
.now-item .meta {
  font-family: var(--font-code);
  font-size: 14px;
  color: var(--blue);
  margin-top: 12px;
  display: block;
}

/* ── blog ──────────────────────────────────────────────────────────────── */
.post-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.post-item {
  background: var(--white);
  border: var(--border);
  box-shadow: var(--hard);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.post-item .post-date {
  font-family: var(--font-code);
  font-size: 14px;
  color: var(--blue);
  letter-spacing: 0.5px;
}
.post-item .post-title {
  font-family: var(--font-display);
  font-size: 14px;
  margin: 0;
}
.post-item .post-title a {
  color: var(--navy);
  text-decoration: none;
}
.post-item .post-summary {
  font-size: 20px;
  line-height: 1.2;
  color: var(--navy);
}
.post-item .post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.post-item .post-tag {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--navy);
  border: 2px solid var(--navy);
  padding: 2px 6px;
  background: var(--sand);
}
.post-empty {
  font-size: 20px;
  line-height: 1.3;
  color: var(--navy);
}

/* Tag chip used inside hero / latest cards by blog-render.mjs.
   Same visual language as .post-item .post-tag but slightly larger
   so it reads against the bigger card surface. */
.archive-row-tag {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--navy);
  border: 2px solid var(--navy);
  padding: 2px 6px;
  background: var(--sand);
}

/* ── connect / links ───────────────────────────────────────────────────── */
.links {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
@media (max-width: 620px) { .links { grid-template-columns: minmax(0, 1fr); } }
.link {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--white);
  border: var(--border);
  box-shadow: var(--hard);
  padding: 12px;
  min-width: 0;
}
.link .ico {
  width: 48px; height: 48px;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.link .ico img { width: 32px; height: 32px; display: block; }
.link b {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .5px;
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
  word-break: break-word;
}
.link span { font-size: 20px; display: block; color: var(--navy); word-break: break-word; }
.link .placeholder { color: var(--blue); }

/* ── universal clickable surface ────────────────────────────────────────
   One motion language for every interactive surface on the site:
     - Tile cards (`.goal`, `.link`, `.project`, `.video-card`) lift on
       hover (scale + grow shadow from navy 2px to blue 6px).
     - Compact chips (`.home-cta a`, `.nav-strip a`, `.videos-meta a`,
       `.video-card .watch`, `.notfound a.btn`, `.project footer a`)
       flip bg/text and grow the same shadow.
   Both press into the shadow on :active — translate + shadow to 0.
   The reduced-motion override at the bottom of this file neutralises
   every transition for users who prefer no motion. */
.goal,
.link,
.project,
.video-card,
.home-cta a,
.nav-strip a,
.videos-meta .channel a,
.video-card .watch,
.notfound a.btn,
.project footer a {
  transition:
    transform 90ms steps(2, end),
    box-shadow 90ms steps(2, end),
    background-color 90ms steps(2, end),
    color 90ms steps(2, end);
}

.goal:hover, .goal:focus-visible,
.link:hover, .link:focus-visible,
.project:hover, .project:focus-visible,
.video-card:hover, .video-card:focus-visible {
  background: var(--white);
  color: inherit;
  text-decoration: none;
  transform: scale(1.03);
  box-shadow: 6px 6px 0 var(--blue);
}

.home-cta a:hover, .home-cta a:focus-visible,
.nav-strip a:hover, .nav-strip a:focus-visible,
.videos-meta .channel a:hover, .videos-meta .channel a:focus-visible,
.video-card .watch:hover, .video-card .watch:focus-visible,
.notfound a.btn:hover, .notfound a.btn:focus-visible,
.project footer a:hover, .project footer a:focus-visible {
  background: var(--navy);
  color: var(--white);
  text-decoration: none;
  outline: none;
  box-shadow: 6px 6px 0 var(--blue);
}

.goal:active,
.link:active,
.project:active,
.video-card:active {
  transform: translate(3px, 3px) scale(1.02);
  box-shadow: 0 0 0 var(--navy);
}
.home-cta a:active,
.nav-strip a:active,
.videos-meta .channel a:active,
.video-card .watch:active,
.notfound a.btn:active,
.project footer a:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--navy);
}

/* ── placeholder marker ───────────────────────────────────────────────── */
.placeholder-marker {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blue);
  border: 2px solid var(--navy);
  padding: 2px 6px;
  background: var(--sand);
  margin-left: 6px;
  vertical-align: middle;
}

/* ── palette strip ─────────────────────────────────────────────────────── */
.strip {
  display: flex;
  height: 14px;
  border: var(--border-thick);
}
.strip i { flex: 1; }

/* ── narrow adjustments ───────────────────────────────────────────────── */
@media (max-width: 620px) {
  .page { padding: 20px 10px 40px; }
  .section { padding: 22px 16px; }
  .brand-header { padding: 22px 14px 18px; }
  .about-row { flex-direction: column; }
  .about-row img { width: 96px; height: 96px; }
  .nav-strip a { font-size: 9px; padding: 5px 8px; }
}

/* ── ambient background grid ───────────────────────────────────────────
   The full page background carries the same 32 px grid texture as
   the brand header. The centred card (var(--sand)) sits on top, so
   the grid is only visible in the navy margins flanking the card.
   background-attachment: fixed keeps the grid anchored to the
   viewport while content scrolls. background-position drifts one
   cell over 240 s in 240 steps (~1 px every second) — perceptible
   only if you watch for several seconds. The brand header keeps
   its own static grid (same cell size) so they read as one
   continuous pattern from the top banner down through the
   margins. Halts under prefers-reduced-motion. */

/* ── site footer ────────────────────────────────────────────────────────
   Bottom-of-card row used on every public page. Subpages include a
   "← Home" back-link on the left; the home page omits the back-link
   and just shows the ownership / domain claim on the right. The
   claim line uses © for the creative content (auto-rights under
   17 U.S.C. § 401 + Berne Convention) and plain English for the
   domain. We do not use ® (would falsely claim registration) or
   ™ on the URL (the URL itself is not a source-identifying mark
   under TMEP § 1215.02 — the kaganerkan handle, if ever used in
   commerce, would be the place for ™). */
.site-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 14px;
  max-width: 760px;
  margin: 18px auto 0;
  padding: 12px 14px 0;
  border-top: 4px solid var(--cream);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream);
}
.site-footer .back-link {
  color: var(--cream);
  text-decoration: none;
}
.site-footer .back-link:hover,
.site-footer .back-link:focus-visible {
  color: var(--blue);
  outline: none;
}
.site-footer .trademark {
  text-align: right;
  /* A zero-blur navy halo hugs the glyphs, so the texture cannot
     touch the letters without painting a rectangular box behind
     the whole line. */
  text-shadow:
    -1px -1px 0 var(--navy),
     1px -1px 0 var(--navy),
    -1px  1px 0 var(--navy),
     1px  1px 0 var(--navy),
    -2px  0   0 var(--navy),
     2px  0   0 var(--navy),
     0   -2px 0 var(--navy),
     0    2px 0 var(--navy);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .goal,
  .link,
  .project,
  .video-card,
  .home-cta a,
  .nav-strip a,
  .videos-meta .channel a,
  .video-card .watch,
  .notfound a.btn,
  .project footer a { transition: none; }
}