/* alejodev.com -- one stylesheet for every page. No external fonts: the
   type stacks below are already on the visitor's machine, which keeps the
   Content-Security-Policy at 'self' and the pages fast. */

:root {
  --paper: #f5f4ef;
  --ink: #1c1c1a;
  --muted: #64635d;
  --rule: #d9d7cf;
  --card: #fbfaf7;
  --accent: #2c5468;
  --accent-ink: #f5f4ef;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --measure: 62ch;
  --page: 960px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #151614;
    --ink: #e8e7e1;
    --muted: #9b9a92;
    --rule: #2f302c;
    --card: #1b1c1a;
    --accent: #8db8cc;
    --accent-ink: #10181c;
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 var(--sans);
  /* The footer sits at the bottom of the window, even on a short page. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body > .wrap { width: 100%; }
body > main { flex: 1 0 auto; }

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

img { max-width: 100%; display: block; }

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

/* ---- Header & footer ---- */

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 28px;
  padding-bottom: 28px;
  font: 14px/1 var(--mono);
}
/* Projects on the left, GitHub on the right. */
.site-header nav { flex: 1; display: flex; justify-content: space-between; gap: 20px; }
.site-header nav a { text-decoration: none; color: var(--muted); }
.site-header nav a:hover,
.site-header nav a[aria-current] { color: var(--ink); }

.site-footer {
  margin-top: 96px;
  padding-top: 20px;
  padding-bottom: 40px;
  border-top: 1px solid var(--rule);
  font: 13px/1.5 var(--mono);
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---- Type ---- */

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(34px, 6vw, 52px); letter-spacing: -0.01em; }
h2 { font-size: 26px; }
h3 { font-size: 19px; }

.lede {
  max-width: var(--measure);
  margin: 18px 0 0;
  font-size: 19px;
  color: var(--muted);
}

.eyebrow {
  font: 13px/1 var(--mono);
  color: var(--muted);
  text-transform: lowercase;
  margin: 0 0 14px;
}

section { margin-top: 80px; }
section > h2 { margin-bottom: 8px; }
section > .section-note { margin: 0 0 28px; color: var(--muted); max-width: var(--measure); }

code, kbd { font-family: var(--mono); font-size: 0.88em; }

/* ---- Home: intro and project cards ---- */

.intro { padding-top: 48px; }
.intro.centered { text-align: center; }

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
  margin-top: 28px;
}

.project {
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-decoration: none;
  transition: border-color 0.15s;
}
.project:hover { border-color: var(--ink); color: inherit; }
.project h3 { font-size: 30px; }
.project p { margin: 12px 0 0; color: var(--muted); }
.project .meta {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font: 13px/1.4 var(--mono);
  color: var(--muted);
}
.project .go { color: var(--ink); white-space: nowrap; }
.project:hover .go { color: var(--accent); }

/* ---- Buttons ---- */

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.button {
  display: inline-block;
  padding: 11px 18px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  font: 600 15px/1 var(--sans);
  text-decoration: none;
}
.button.primary { background: var(--ink); color: var(--paper); }
.button.primary:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.button:not(.primary):hover { border-color: var(--accent); }
.button.large { padding: 18px 40px; border-radius: 6px; font-size: 19px; }
.button.with-icon { display: inline-flex; align-items: center; gap: 10px; }
.button.with-icon svg { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }

/* ---- Agent Shinx: commands ---- */

.back { font: 14px/1 var(--mono); color: var(--muted); text-decoration: none; }
.back:hover { color: var(--ink); }

.command-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 36px 48px;
}
.command-groups h3 {
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--rule);
}
.command-groups dl { margin: 0; }
.command-groups dt { margin-top: 12px; font: 14px/1.4 var(--mono); }
.command-groups dd { margin: 2px 0 0; color: var(--muted); font-size: 15px; }

.feeds { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.feeds li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.feeds .when { font: 13px/1.6 var(--mono); color: var(--muted); text-align: right; }

/* ---- Agent Shinx: screenshots ---- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 24px;
}
.gallery figure { margin: 0; }
/* The grey box behind each picture while it downloads (see gallery.js). */
.gallery a { display: block; background: var(--rule); border-radius: 4px; }
.gallery img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--rule);
  border-radius: 4px;
  transition: opacity 0.25s;
}
.gallery img.is-loading { opacity: 0; }
.gallery figcaption { margin-top: 10px; font-size: 15px; color: var(--muted); }
.gallery .failed {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border: 1px dashed var(--rule);
  border-radius: 4px;
  font: 13px/1.4 var(--mono);
  color: var(--muted);
  text-align: center;
  padding: 16px;
}

/* Shown only while the gallery has no screenshots in it. */
.gallery-empty {
  padding: 40px 24px;
  border: 1px dashed var(--rule);
  border-radius: 4px;
  color: var(--muted);
  text-align: center;
}
.gallery:has(figure) + .gallery-empty { display: none; }

/* ---- Agent Shinx: intro picture ---- */

.intro.with-avatar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: center;
}
.intro-avatar { grid-column: 2; grid-row: 1; width: 225px; height: auto; border-radius: 28px; }
.hero-actions { grid-column: 1 / -1; justify-content: center; margin-top: 0; }

@media (max-width: 760px) {
  .intro.with-avatar { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .intro-avatar { grid-column: 1; width: 112px; border-radius: 20px; }
}

/* Fade in from below on scroll (reveal.js). Only hidden once the script
   has marked the page, so with scripts off everything just shows. The
   page stays blank only until the script has tagged what to fade -- and
   if it never does, the failsafe shows it after 3s. */
.reveal-ready:not(.reveal-set) body { opacity: 0; animation: reveal-failsafe 0s 3s forwards; }
@keyframes reveal-failsafe { to { opacity: 1; } }
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  /* border-color keeps the project cards' hover transition. */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out, border-color 0.15s;
}
.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }

/* ---- Agent Shinx: invite ---- */

.permissions { margin: 20px 0 0; padding-left: 20px; max-width: var(--measure); }
.permissions li { margin-top: 6px; }
.permissions strong { font-weight: 600; }
.permissions + .section-note { margin-top: 20px; }

/* ---- 404 ---- */

.not-found { padding-top: 80px; }

/* ---- Small screens ---- */

@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding-left: 16px; padding-right: 16px; }
  .site-header nav { gap: 14px; }
  section { margin-top: 64px; }
  .project { padding: 22px; min-height: 0; }
  .feeds li { grid-template-columns: 1fr; gap: 2px; }
  .feeds .when { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}