/*
  The type, neutrals, labels and panes of tjh.li, so the project page reads as
  part of the same site. The accent is loge's own: the app has a white accent
  on charcoal, so here it is simply the text colour, and no hue competes with
  the screenshots.
  Fonts are Mona Sans and IBM Plex Mono (SIL OFL 1.1, see fonts/).
*/
@font-face {
  font-family: "Mona Sans";
  src: url("/fonts/mona-sans.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --background: oklch(0.968 0.006 265);
  --foreground: oklch(0.2 0.02 265);
  --muted-foreground: oklch(0.48 0.018 265);
  --card: oklch(0.99 0.003 265);
  --rule: oklch(0.82 0.014 265);
  --shadow: 0 8px 30px -12px rgb(0 0 0 / 0.35);
  --display: "Mona Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(0.16 0.014 265);
    --foreground: oklch(0.94 0.008 265);
    --muted-foreground: oklch(0.7 0.016 265);
    --card: oklch(0.2 0.016 265);
    --rule: oklch(0.35 0.02 265);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The same static film grain as tjh.li, above everything, costing one paint. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background-image: url("/grain.svg");
  opacity: 0.14;
  mix-blend-mode: overlay;
}

h1,
h2 {
  text-wrap: balance;
}
p,
li,
dd {
  text-wrap: pretty;
}

::selection {
  background: var(--foreground);
  color: var(--background);
}

:focus-visible {
  outline: 2px solid var(--foreground);
  outline-offset: 2px;
}

code {
  font-family: var(--mono);
  font-size: 0.875em;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 70;
  padding: 0.5rem 0.75rem;
  background: var(--foreground);
  color: var(--background);
  font-size: 0.75rem;
}

/* Metadata in the mono face, as on tjh.li. */
.label {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted-foreground);
}

.link {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s ease;
}
.link:hover {
  text-decoration-color: currentColor;
}

/* ------------------------------------------------------------------ page */

.page {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.25rem 7rem;
}

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(44rem, 88svh);
  padding: 4rem 0 3rem;
}

.hero-name {
  margin: 0;
  font-size: clamp(5rem, 30vw, 13rem);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 0.86;
  letter-spacing: -0.045em;
}

.hero-line {
  margin: 2rem 0 0;
  max-width: 34ch;
  font-size: 1.25rem;
  line-height: 1.35;
}
.hero-line strong {
  font-weight: 600;
}
.hero-line span {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted-foreground);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 2.25rem;
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border-radius: 0.75rem;
  background: var(--foreground);
  color: var(--background);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.button:hover {
  opacity: 0.85;
}

.hero-meta {
  margin: 1.75rem 0 0;
  line-height: 1.6;
}

/* Screenshots are the product here, so they sit in the same frame as the panes. */
.shot {
  margin: 0;
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid color-mix(in oklab, var(--rule) 70%, transparent);
  border-radius: 1rem;
  background: var(--card);
}

/*
  Panes step across the grid like the stones on tjh.li, so the page zig-zags
  and the screenshots fill the open side of each row.
*/
.panes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4rem;
  margin-top: 4rem;
}

.pane {
  border: 1px solid color-mix(in oklab, var(--rule) 70%, transparent);
  border-radius: 1rem;
  background: var(--card);
  padding: 2rem 1.5rem;
}

.pane h2 {
  margin: 0 0 1.5rem;
  font-size: 1.75rem;
  font-weight: 600;
  font-stretch: 115%;
  line-height: 1;
  letter-spacing: -0.02em;
}

.lead {
  margin: 0 0 2rem;
  max-width: 62ch;
  font-size: 1.0625rem;
}

.rows {
  margin: 0;
  border-top: 1px solid var(--rule);
}
.rows > div {
  display: grid;
  gap: 0.375rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}
.rows dt {
  padding-top: 0.4rem;
}
.rows dd {
  margin: 0;
  max-width: 62ch;
  font-size: 1.0625rem;
  line-height: 1.5;
}

.source {
  overflow-wrap: anywhere;
  user-select: all;
}

.note {
  margin: 1.5rem 0 0;
  max-width: 62ch;
  color: var(--muted-foreground);
}
.note strong,
.note code {
  color: var(--foreground);
}

.shot-phones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 30rem;
}

.limits {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.limits li {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--muted-foreground);
}
.limits strong {
  color: var(--foreground);
  font-weight: 600;
}

.footer {
  margin-top: 5rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.footer p {
  margin: 0;
  max-width: 72ch;
}
.footer .footer-by {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

@media (min-width: 640px) {
  .page {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .hero-line {
    font-size: 1.5rem;
  }
  .pane {
    padding: 2.5rem;
  }
  .pane h2 {
    font-size: 2rem;
  }
  .rows > div {
    grid-template-columns: 9rem 1fr;
    gap: 1.5rem;
  }
  .footer {
    padding: 1.5rem 2.5rem;
  }
}

@media (min-width: 768px) {
  .panes {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row dense;
    column-gap: 2rem;
    row-gap: 7rem;
    margin-top: 7rem;
  }
  .pane-features {
    grid-column: 1 / span 8;
  }
  .shot-phones {
    grid-column: 9 / span 4;
    align-self: center;
  }
  .pane-install {
    grid-column: 3 / span 10;
  }
  .shot-ipad {
    grid-column: 1 / span 7;
    align-self: center;
  }
  .pane-limits {
    grid-column: 8 / span 5;
  }
}

/* ------------------------------------------------------------------- bar */

/*
  One floating bar at the bottom, under the thumb, like tjh.li's. Every
  target is the bar's full 44px height. Without room for the section links
  they scroll sideways inside the bar.
*/
.bar {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: fit-content;
  max-width: calc(100% - 1.5rem);
  height: 3.375rem;
  margin: 0 auto;
  padding: 0.25rem;
  border: 1px solid color-mix(in oklab, var(--rule) 70%, transparent);
  border-radius: 1rem;
  background-color: color-mix(in oklab, var(--card) 62%, transparent);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: var(--shadow);
  font-size: 0.875rem;
}
@media (prefers-reduced-transparency: reduce) {
  .bar {
    background-color: var(--card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.bar a {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: 100%;
  padding: 0 0.75rem;
  border-radius: 0.75rem;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.bar a:hover {
  color: var(--foreground);
  background-color: color-mix(in oklab, var(--foreground) 8%, transparent);
}

.bar .bar-home {
  gap: 0.375rem;
  color: var(--foreground);
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: -0.01em;
}

.bar-links {
  display: flex;
  min-width: 0;
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.bar-links::-webkit-scrollbar {
  display: none;
}

.bar .bar-end {
  border-left: 1px solid var(--rule);
  border-radius: 0 0.75rem 0.75rem 0;
}

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