/* gplatform.org — Gelhaus Solutions.
   Loaded after site.css on this site and nowhere else.

   The two sites share a stylesheet because they share a codebase, not because
   they should look alike. What is shared here is the reset, the layout
   primitives, the colour architecture and the component markup. What is not is
   the register: ennogelhaus.de is a person writing about their work, and reads
   like a document. This is a company describing a product line, and reads like
   a specification.

   Concretely, the differences below are:
     - a teal accent instead of blue
     - tighter radii and 1px borders instead of shadowed cards
     - monospace for anything that is an identifier, which is most of what a
       platform company names
     - headings set tighter and heavier, on a larger scale
     - its own hero, split panel, catalogue table and section bands, none of
       which exist on the other site

   Still no web fonts, no images, no external requests of any kind. Everything
   below is drawn with borders, gradients and the system stack. */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  --accent: #2bb8a3;
  --accent-strong: #4fd0bc;
  --accent-ink: #041512;
  --accent-wash: rgba(43, 184, 163, 0.10);
  --accent-line: rgba(43, 184, 163, 0.32);
  --focus: #6fdcc9;

  /* Sharper than the personal site's 10/14px. A softer corner reads editorial;
     this reads like tooling. */
  --radius: 6px;
  --radius-lg: 8px;

  /* site.css sets --container: 100% deliberately, and gives its reason: a
     fixed cap leaves dead gutter down either side of a wide display. That
     argument holds for a page of prose, which is what that site mostly is.
     It does not hold for a table: at 2500px the catalogue below stretches
     into rows you have to track across with a finger. So this site caps, and
     caps generously enough that the gutter is not the first thing you see. */
  --container: 84rem;

  --gs-band: rgba(255, 255, 255, 0.015);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --accent: #0f7a6b;
    --accent-strong: #0b5d51;
    --accent-ink: #ffffff;
    --accent-wash: rgba(15, 122, 107, 0.07);
    --accent-line: rgba(15, 122, 107, 0.26);
    --focus: #0f7a6b;
    --gs-band: rgba(16, 24, 40, 0.014);
  }
}

:root[data-theme="light"] {
  --accent: #0f7a6b;
  --accent-strong: #0b5d51;
  --accent-ink: #ffffff;
  --accent-wash: rgba(15, 122, 107, 0.07);
  --accent-line: rgba(15, 122, 107, 0.26);
  --focus: #0f7a6b;
  --gs-band: rgba(16, 24, 40, 0.014);
}

/* --------------------------------------------------------------------------
   2. Type
   -------------------------------------------------------------------------- */

h1, h2, h3 {
  letter-spacing: -0.022em;
}

h1 { font-weight: 680; }
h2 { font-weight: 640; }

/* Identifiers are set in mono throughout: product names, statuses, versions,
   column headers. It is the cheapest honest signal that this is a company that
   ships software rather than a company that talks about it. */
.gs-mono {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.gs-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   3. Hero

   Deliberately not .hero. The personal site's hero is a two-column grid with a
   person card in the right-hand column, and reusing that shape for a company
   was the single most forced thing about the first version of this site.
   -------------------------------------------------------------------------- */

.gs-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 11vw, 9rem) clamp(3.5rem, 8vw, 6rem);
  border-bottom: 1px solid var(--line);
}

/* Lit from above rather than gridded. The other site draws a blueprint grid
   here; doing the same again is what "too similar" meant. */
.gs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% -20%, var(--accent-wash), transparent 62%),
    linear-gradient(180deg, var(--surface) 0%, transparent 55%);
  pointer-events: none;
}

/* A single horizon rule under the fold of the headline. */
.gs-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line) 22%, var(--accent-line) 78%, transparent);
  pointer-events: none;
}

.gs-hero > * {
  position: relative;
}

.gs-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.1rem);
  line-height: 1.04;
  max-width: 20ch;
  margin-bottom: 1.5rem;
}

.gs-hero__lead {
  color: var(--muted);
  font-size: clamp(1.06rem, 1.7vw, 1.25rem);
  line-height: 1.6;
  max-width: 62ch;
  margin-bottom: 2.25rem;
}

/* --------------------------------------------------------------------------
   4. The split panel

   The one thing this company is actually about: the same application, run by
   you or run by us. It has no equivalent on the personal site.
   -------------------------------------------------------------------------- */

.gs-split {
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.gs-split__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.gs-side {
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--surface);
}

.gs-side + .gs-side {
  border-left: 1px solid var(--line);
}

@media (max-width: 46rem) {
  .gs-side + .gs-side {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

.gs-side--hosted {
  background: linear-gradient(180deg, var(--accent-wash), transparent 70%), var(--surface-2);
}

.gs-side__tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.85rem;
}

.gs-side--hosted .gs-side__tag {
  color: var(--accent);
}

.gs-side h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  margin-bottom: 0.75rem;
}

.gs-side p {
  color: var(--muted);
  margin-bottom: 1.25rem;
}

.gs-side ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
}

.gs-side li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.6rem;
  font-size: 0.94rem;
  color: var(--text);
}

.gs-side li::before {
  content: "\2014";
  color: var(--accent);
  font-family: var(--font-mono);
}

/* --------------------------------------------------------------------------
   5. The catalogue table

   A product line is a list with columns, not a wall of portfolio cards. The
   card grid on the personal site is right there because each entry is a piece
   of writing; here each entry is a thing you could run.
   -------------------------------------------------------------------------- */

.gs-band {
  border-block: 1px solid var(--line);
  background: var(--gs-band);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.gs-head {
  max-width: 58ch;
  margin-bottom: 2.5rem;
}

.gs-head h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  margin-bottom: 0.75rem;
}

.gs-head p {
  color: var(--muted);
}

.gs-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.gs-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  min-width: 34rem;
}

.gs-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0.9rem 1.15rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.gs-table td {
  padding: 1.05rem 1.15rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.gs-table tr:last-child td {
  border-bottom: 0;
}

.gs-table tbody tr:hover {
  background: var(--surface-2);
}

.gs-table a {
  text-decoration: none;
}

.gs-app {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
}

.gs-table a:hover .gs-app {
  color: var(--accent);
}

.gs-app__alt {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--dim);
  margin-top: 0.25rem;
  white-space: nowrap;
}

.gs-what {
  color: var(--muted);
  max-width: 52ch;
}

.gs-col-status {
  width: 1%;
  white-space: nowrap;
}

/* The shared status chip, restyled: square, mono, quieter. */
.gs-band .chip,
.gs-table .chip {
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   6. Closing strip
   -------------------------------------------------------------------------- */

.gs-close {
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.gs-close__inner {
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--accent-wash), transparent 60%), var(--surface);
  padding: clamp(2rem, 4.5vw, 3.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

@media (max-width: 46rem) {
  .gs-close__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

.gs-close h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  margin-bottom: 0.6rem;
}

.gs-close p {
  color: var(--muted);
  max-width: 54ch;
  margin: 0;
}

/* --------------------------------------------------------------------------
   7. Brand mark

   A drawn mark rather than two letters in a box. The personal site's "EG"
   monogram is right for a person; a company reusing the same square with
   different letters is the visual equivalent of the same page with different
   words.
   -------------------------------------------------------------------------- */

.gs-mark {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--accent);
}

.brand,
.admin-brand {
  gap: 0.6rem;
}

/* --------------------------------------------------------------------------
   8. Prose, a little tighter than the personal site's
   -------------------------------------------------------------------------- */

.rich h2,
.prose h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
}

/* --------------------------------------------------------------------------
   9. The blog, in this site's register

   Everything structural comes from site.css. What changes here is the same
   thing that changes everywhere else on gplatform.org: square corners instead
   of rounded ones, a 1px border doing the work a shadow does on the personal
   site, and monospace for anything that behaves like an identifier.

   The reason the two blogs are not made to look alike is the reason the two
   sites are not: ennogelhaus.de is a person writing, and its index should read
   like a table of contents. This is a company publishing release notes, and
   its index should read like a changelog.
   -------------------------------------------------------------------------- */

.lead-post__media,
.entry__thumb,
.post-hero img,
.rich img {
  border-radius: 3px;
}

.lead-post__title {
  font-weight: 650;
  letter-spacing: -0.02em;
}

/* A changelog reads down a column of dates. The oversized lead of the personal
   site would put one release above the fold and the rest below it. */
.lead-post {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.lead-post__media img {
  aspect-ratio: 21 / 9;
}

.lead-post__excerpt {
  max-width: 62ch;
}

/* The year is a section marker here, not a whisper. */
.post-year__label {
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.35rem;
}

.tag,
.tag--link,
.tag__count {
  border-radius: 3px;
  font-family: var(--font-mono);
}

.topic-card {
  border-radius: 3px;
}

.topic-card__name {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.rich pre,
.rich pre.code {
  border-radius: 3px;
}

.rich table {
  font-size: 0.86rem;
}

.rich th {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   10. The contact form, in this site's register

   Almost nothing to do. The form in site.css is drawn entirely from
   --radius, --line, --surface and --accent, and this file has already
   redefined all four -- so it arrives teal, tighter and squarer without a
   single rule here. What is left is the one thing tokens cannot express: the
   3px corner this site puts on anything that holds content rather than
   frames it, which is the same value .rich img and .entry__thumb use above.
   -------------------------------------------------------------------------- */

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea,
.form-error--summary {
  border-radius: 3px;
}

/* An address being typed is an identifier, and this site sets identifiers in
   monospace. Only the email field: a name and a message are prose. */
.contact-form__field input[type="email"] {
  font-family: var(--font-mono);
  font-size: 0.92rem;
}