/* Sirek Apps — shared styles.

   Swiss/International style: Helvetica, a strict grid, monochrome, and no
   ornament. The type does the work, so the sizes are decisive and the tracking
   is tight — Helvetica set loose at large sizes looks like a default, not a
   choice.

   There are no webfonts here on purpose. Helvetica Neue ships on every Mac and
   iOS device, Arial on every Windows machine, and the two are metrically close
   enough that the layout doesn't shift between them. That removes the Google
   Fonts round-trip entirely, which is the single biggest thing this page can do
   for load time. */

:root {
  --paper: #ffffff;
  --void: #f4f4f3;
  --sunk: #ececea;
  --hairline: #e0e0de;
  --muted: #6e6e6e;
  --faint: #9a9a9a;
  --ink: #0c0c0c;

  --measure: 680px;
  --wide: 1060px;

  /* Helvetica Neue first (Apple), then Helvetica, then Arial (Windows).
     Arial is the metric-compatible fallback, so line breaks hold. */
  --sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Follow the system unless the visitor has chosen a side. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0d0d0d;
    --void: #161616;
    --sunk: #1e1e1e;
    --hairline: #2a2a2a;
    --muted: #9a9a9a;
    --faint: #6d6d6d;
    --ink: #f2f2f0;
  }
}

:root[data-theme="dark"] {
  --paper: #0d0d0d;
  --void: #161616;
  --sunk: #1e1e1e;
  --hairline: #2a2a2a;
  --muted: #9a9a9a;
  --faint: #6d6d6d;
  --ink: #f2f2f0;
}

* { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.wrap.wide { max-width: var(--wide); }

a { color: inherit; text-decoration: none; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 3px;
}

/* TYPE
   Helvetica's personality lives at the extremes: very tight and very bold, or
   small and quiet. The middle is where it looks generic, so nothing sits there.
   Negative tracking scales with size — big type needs more of it. */

h1, h2, h3 {
  font-weight: 700;
  margin: 0;
  line-height: 1.02;
}

h1 {
  font-size: clamp(2.9rem, 9vw, 5.4rem);
  letter-spacing: -0.045em;
}

h2 {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
}

h3 {
  font-size: 1.28rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

p { margin: 0 0 16px; }

.lead {
  font-size: clamp(1.08rem, 1.8vw, 1.22rem);
  color: var(--muted);
  margin: 24px 0 0;
  max-width: 44ch;
  line-height: 1.5;
  letter-spacing: -0.011em;
}

/* The uppercase micro-label, used for eyebrows, section rules and metadata.
   Helvetica uppercase needs positive tracking to stay readable at this size —
   the opposite of what the headlines need. */
.eyebrow,
.section-label,
.app-meta,
.updated {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}

.eyebrow { margin: 0 0 18px; }

/* MASTHEAD */

nav {
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

/* Without color-mix the bar would be transparent and text would collide with
   the page scrolling behind it. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  nav { background: var(--paper); }
}

nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: 64px;
}

/* The wordmark is a name set in the same face as everything else — bold and
   tight, so it reads as a mark rather than as running text. */
.mark {
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -0.025em;
  line-height: 1;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-right a {
  font-size: 0.84rem;
  color: var(--muted);
  transition: color 0.15s ease;
}

.nav-right a:hover { color: var(--ink); }

.theme-toggle {
  appearance: none;
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.theme-toggle:hover { color: var(--ink); border-color: var(--ink); }

/* SECTIONS */

main { padding: clamp(64px, 12vw, 128px) 0 24px; }

section { margin-top: clamp(64px, 10vw, 112px); }

/* A hairline rule with the label sitting on it — the Swiss section marker. */
.section-label {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 0;
  display: block;
}

/* A heading directly under the rule needs air, or it reads as part of the rule
   rather than as the start of the section. The app list doesn't need this —
   its rows carry their own vertical padding — so this targets headings only. */
.section-label + h2 { margin-top: 30px; }

/* APP LIST */

.app {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 4vw, 36px);
  padding: 32px 0;
  border-bottom: 1px solid var(--hairline);
}

/* The app icon, not a screenshot. It's the thing people actually recognise on
   a Home Screen, it stays legible at this size where a screenshot doesn't, and
   it costs a fraction of the bytes. The radius is iOS's superellipse
   approximated with a percentage so it tracks the box if the size changes. */
.app-icon {
  flex: 0 0 auto;
  width: clamp(64px, 9vw, 88px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 22.5%;
  border: 1px solid var(--hairline);
  display: block;
}

.icon-light { display: block; }
.icon-dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-light { display: none; }
  :root:not([data-theme="light"]) .icon-dark { display: block; }
}

:root[data-theme="dark"] .icon-light { display: none; }
:root[data-theme="dark"] .icon-dark { display: block; }

.app-body { flex: 1 1 auto; min-width: 0; }

.app-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}

.app-head h3 { letter-spacing: -0.03em; }

.app p {
  color: var(--muted);
  margin: 10px 0 0;
  max-width: 46ch;
  letter-spacing: -0.008em;
}

.app-meta { white-space: nowrap; }

.app-links {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.app-site {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--hairline);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.app-site:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* Apple's official badge. Two files, one per theme — the artwork itself must
   not be recoloured, so we swap which one is shown. */
.badge { display: inline-block; line-height: 0; }
.badge img { height: 40px; width: auto; }

/* Every show/hide rule below is written as .badge .badge-* so they all carry
   the same specificity as each other and outrank `.badge img`. Bare
   `.badge-dark` would lose to it and both badges would render. */
.badge .badge-light { display: block; }
.badge .badge-dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge .badge-light { display: none; }
  :root:not([data-theme="light"]) .badge .badge-dark { display: block; }
}

:root[data-theme="dark"] .badge .badge-light { display: none; }
:root[data-theme="dark"] .badge .badge-dark { display: block; }

@media (max-width: 560px) {
  .app { gap: 18px; }
  .app-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .app-links { gap: 16px; }
}

/* CONTACT */

.contact-mail {
  display: inline-block;
  font-size: clamp(1.2rem, 3.4vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-top: 18px;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--hairline);
  transition: text-decoration-color 0.15s ease;
}

.contact-mail:hover { text-decoration-color: var(--ink); }

/* PROSE (privacy / terms) */

.prose h2 {
  font-size: 1.3rem;
  letter-spacing: -0.022em;
  margin: 48px 0 12px;
}

.prose ul {
  margin: 0 0 16px;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prose a,
a.inline {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--hairline);
  transition: text-decoration-color 0.15s ease;
}

.prose a:hover,
a.inline:hover { text-decoration-color: var(--ink); }

.updated { margin: 16px 0 0; }

hr {
  height: 1px;
  background: var(--hairline);
  border: 0;
  margin: 48px 0 0;
}

/* FOOTER */

footer {
  margin-top: clamp(72px, 11vw, 128px);
  border-top: 1px solid var(--hairline);
  padding: 30px 0 60px;
}

footer .wrap {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

footer a,
footer span {
  font-size: 0.82rem;
  color: var(--muted);
  transition: color 0.15s ease;
}

footer a:hover { color: var(--ink); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}