/* golka.org — studio homepage. Layer on top of golka-base.css.
   The studio deliberately keeps the neutral --accent from the base: §5 says
   the studio tone must not compete with any single app's identity, so nothing
   is overridden here. Each app card carries its own accent instead. */

/* ---------- header ---------- */
.gs-header { padding-block: var(--space-6); }
.gs-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.gs-header__nav { display: flex; gap: var(--space-6); font-size: var(--text-sm); }
.gs-header__nav a { color: var(--ink-muted); text-decoration: none; }
.gs-header__nav a:hover { color: var(--accent); text-decoration: underline; }

.gs-brand { display: inline-flex; align-items: center; gap: var(--space-3); }
.gs-brand img { width: 2rem; height: 2rem; border-radius: 22%; flex: none; }

/* ---------- hero ---------- */
.gs-hero { padding-block: var(--space-16) var(--space-12); }
.gs-hero__inner { display: grid; gap: var(--space-12); align-items: center; }
.gs-hero__copy { max-width: 38rem; }
.gs-hero h1 { margin-bottom: var(--space-6); }
.gs-hero__sub { font-size: var(--text-lg); color: var(--ink-muted); margin-bottom: 0; }

@media (min-width: 58rem) {
  .gs-hero__inner { grid-template-columns: 1.35fr 1fr; gap: var(--space-16); }
}

/* Tile motif — the studio's shared grid rhythm (§5), used as a quiet
   graphic rather than a picture. Three tiles are tinted to hint that the
   grid belongs to a family of apps. */
.gs-hero__motif {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  /* width:100% is load-bearing. margin-inline:auto cancels the default
     justify-self:stretch, so without it the grid shrinks to max-content —
     and since the tiles are empty spans, that is zero, collapsing every
     column and leaving only the gaps. */
  width: 100%;
  max-width: 20rem;
  margin-inline: auto;
}
.gs-hero__tile {
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background: var(--card);
}
.gs-hero__tile:nth-child(3) { background: var(--accent-soft); }
.gs-hero__tile:nth-child(5) { background: var(--accent); }
.gs-hero__tile:nth-child(7) { background: var(--accent-soft); }

/* A tile that holds an app: the icon fills it, and it links to the app's site. The icons already
   carry their own rounded shape, so the tile gets the same radius and no background of its own. */
.gs-hero__tile--app {
  display: block;
  background: none;
  box-shadow: 0 10px 24px -16px rgba(43, 38, 34, 0.55);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.gs-hero__tile--app img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.gs-hero__tile--app:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -16px rgba(43, 38, 34, 0.65);
}
.gs-hero__tile--app:focus-visible { outline: 3px solid var(--app-accent, var(--accent)); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .gs-hero__tile--app { transition: none; }
  .gs-hero__tile--app:hover { transform: none; }
}

/* ---------- apps ---------- */
.gs-apps__grid {
  list-style: none;
  margin: 0; padding: 0;
  /* The base stylesheet caps every <ul> at the reading measure (62ch), which squeezed the grid into a
     single column and left the right half of the row empty. Cards are not prose: let the grid use the row. */
  max-width: none;
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
/* With a single app the card would stretch the full container and read as a
   banner, so cap it; a second app fills the row properly. */
@media (min-width: 46rem) {
  .gs-apps__grid { grid-template-columns: repeat(auto-fit, minmax(20rem, 26rem)); }
}

/* Cards in one row are the same height whatever their text length: the list item stretches to the
   row, the link fills it, and the status line sits at the bottom so the two statuses line up. */
.gs-app { display: flex; }
.gs-app__link { flex: 1; }
.gs-app__link > div { align-self: stretch; display: flex; flex-direction: column; }
.gs-app__status { margin-top: auto; }

.gs-app__link {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--card);
  color: inherit;
  text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.gs-app__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -20px rgba(43, 38, 34, 0.6);
}
.gs-app__icon { border-radius: var(--radius-lg); flex: none; width: 72px; height: 72px; }
.gs-app__name { margin-bottom: var(--space-2); }
.gs-app__tagline { color: var(--ink-muted); margin-bottom: var(--space-3); }
.gs-app__status { color: var(--app-accent, var(--accent)); }

/* ---------- three points ---------- */
.gs-points { background: var(--card); }
.gs-points__grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) { .gs-points__grid { grid-template-columns: repeat(3, 1fr); } }
.gs-point p { margin-bottom: 0; color: var(--ink-muted); }

/* ---------- contact ---------- */
.gs-contact__trader { margin-top: var(--space-8); color: var(--ink-muted); }

/* ---------- prose ---------- */
.gs-lead { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-snug); }
.gs-prose h2 { margin-top: var(--space-12); }

/* ---------- footer ---------- */
.gs-footer { padding-block: var(--space-8) var(--space-16); }
.gs-footer__inner { display: grid; gap: var(--space-3); padding-top: var(--space-8); }
.gs-footer__mark { margin: 0; }
.gs-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-6); font-size: var(--text-sm); }
.gs-footer p { margin: 0; }

/* Social profiles: readable labels and quiet, comfortably sized icon links. */
.social-links { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-block: var(--space-2); }
.social-links__item {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--hairline-strong); border-radius: 999px;
  color: var(--ink-muted); font-size: var(--text-sm); font-weight: 500;
  line-height: 1.25; text-decoration: none;
}
.social-links__icon { flex: none; }
.social-links__item:hover { color: var(--accent); background: var(--card); border-color: var(--accent); text-decoration: none; }
.social-links__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }