/*
 * The standalone pages: /about/, /partners/, /referrals/.
 *
 * They sit outside the app on purpose. They are reading pages, reached from
 * search and from links, so they are plain HTML that any browser can
 * translate, and they wear the blog's look rather than the app's because
 * they are the same kind of page as the blog. The values are taken from
 * starstore-blogs/src/styles.css and its layout components, written out
 * as plain CSS because that site is Tailwind and this is one file.
 *
 * Three departures from the blog, each from an audit of these pages at nine
 * device sizes with axe: gold used as text on white is darkened to pass
 * contrast, no label is under 12px, and every link outside a sentence is a
 * 44px target.
 *
 * Nothing here is shared with the app (public/app, app-web) or the console
 * (public/admin). The mark is public/img/favicon.png, as everywhere.
 */

:root {
  --paper: oklch(1 0 0);
  --background: oklch(1 0 0);
  --foreground: oklch(0.18 0.01 60);
  --ink: oklch(0.16 0.01 60);
  --rule: oklch(0.92 0.005 60);
  --card: oklch(0.985 0.003 60);
  --muted-foreground: oklch(0.48 0.01 60);
  --body-text: oklch(0.25 0.02 50);
  --gold: oklch(0.78 0.07 55);
  /*
   * Gold as text, on white. The blog's gold is about 2:1 against white, which
   * fails for small type; this is the same hue darkened to pass 4.5:1. The
   * light gold stays for everything decorative and for text on the dark
   * footer and CTA, where it passes easily.
   */
  --gold-text: oklch(0.5 0.09 55);
  --paper-60: oklch(1 0 0 / 0.6);
  --paper-10: oklch(1 0 0 / 0.1);

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius: 0.5rem;
}

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

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Phones enlarge text on rotation without this, and the layout does not
     expect it. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-feature-settings: "ss01", "ss02";
  letter-spacing: -0.02em;
  margin: 0;
}

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

a {
  color: inherit;
}

::selection {
  background: var(--gold);
  color: var(--ink);
}

.wrap {
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.wrap--wide { max-width: 72rem; }
.wrap--hero { max-width: 64rem; }
.wrap--text { max-width: 48rem; }

.kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted-foreground);
}

/* ------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--rule);
  background: oklch(1 0 0 / 0.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  text-decoration: none;
}

.brand img {
  width: 40px;
  height: 40px;
  border-radius: 999px;
}

.brand-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.brand-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-foreground);
  margin-top: 0.25rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.25rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--gold-text);
}

/* The way into the app reads as the button it is. */
.site-nav .nav-primary {
  padding: 0 1rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.site-nav .nav-primary:hover {
  background: var(--paper);
  color: var(--ink);
}

/*
 * On a phone the header keeps the store and the way into the app; the blog is
 * in the footer. Below 400px there is no room for the Store link beside the
 * name without the two overlapping (at 320 they did), and the name and mark
 * already link to the store, so it goes, and below 360px the name's second
 * line goes too.
 */
@media (max-width: 559px) {
  .site-nav {
    gap: 0.5rem;
  }
  .site-nav .nav-blog {
    display: none;
  }
}

@media (max-width: 399px) {
  .site-nav .nav-store {
    display: none;
  }
}

@media (max-width: 359px) {
  .brand-sub {
    display: none;
  }
  .wrap {
    padding: 0 1.25rem;
  }
}

/* ----------------------------------------------------------- masthead -- */

.masthead {
  border-bottom: 1px solid var(--rule);
}

.masthead .wrap {
  padding-top: 2.5rem;
  padding-bottom: 3rem;
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.back:hover {
  color: var(--gold-text);
}

.masthead .kicker--gold {
  margin-top: 1.25rem;
  color: var(--gold-text);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.masthead h1 {
  margin-top: 1.5rem;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.05;
  text-wrap: balance;
  overflow-wrap: break-word;
}

@media (min-width: 768px) {
  .masthead h1 {
    font-size: 3.75rem;
  }
}

.dek {
  margin: 1.5rem 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

/* --------------------------------------------------------------- hero -- */

.hero {
  border-bottom: 1px solid var(--rule);
  background: var(--card);
}

.hero .wrap {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.hero figure {
  margin: 0;
  display: flex;
  justify-content: center;
  padding: 2rem 1.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
}

/* Sized by the viewport on short screens, so a phone on its side still
   shows the words under it. */
.hero img {
  width: auto;
  height: auto;
  max-height: min(340px, 45vh);
}

/* --------------------------------------------------------------- body -- */

.prose {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.prose p,
.prose li {
  overflow-wrap: break-word;
}

.prose p {
  font-size: 1.0625rem;
  line-height: 1.75;
  margin: 0 0 1.25rem;
  color: var(--body-text);
}

.prose > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.5rem;
  float: left;
  line-height: 0.85;
  margin: 0.35rem 0.6rem 0 0;
  color: var(--gold);
}

.prose h2 {
  font-size: 1.75rem;
  font-weight: 600;
  margin: 2.5rem 0 1rem;
}

.prose ul,
.prose ol {
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
  color: var(--body-text);
}

.prose ul li {
  list-style: none;
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

.prose ul li::before {
  content: "\2605";
  position: absolute;
  left: 0;
  top: 0.3rem;
  color: var(--gold);
  font-size: 0.85rem;
}

.prose ol li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
  padding-left: 0.5rem;
}

.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.prose a:hover {
  color: var(--gold-text);
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---------------------------------------------------------------- CTA -- */

.cta {
  padding-bottom: 4rem;
}

.cta-main {
  display: block;
  padding: 2rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.14s ease;
}

.cta-main:hover {
  background: var(--gold);
  color: var(--ink);
}

.cta-main:active,
.cta-card:active {
  transform: scale(0.98);
}

.cta-main .kicker {
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.cta-main:hover .kicker {
  color: oklch(0.16 0.01 60 / 0.7);
}

.cta-main-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.cta-main-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .cta-main-title {
    font-size: 1.875rem;
  }
}

@media (max-width: 359px) {
  .cta-main {
    padding: 1.5rem;
  }
  .cta-main-title {
    font-size: 1.3rem;
  }
}

.cta-arrow {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  transition: transform 0.2s ease;
}

.cta-main:hover .cta-arrow {
  transform: rotate(45deg);
}

.cta-cards {
  margin-top: 1rem;
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .cta-cards {
    grid-template-columns: 1fr 1fr;
  }
}

.cta-card {
  display: block;
  padding: 1.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.14s ease;
}

.cta-card:hover {
  border-color: var(--gold);
}

.cta-card .kicker {
  letter-spacing: 0.16em;
  margin-bottom: 0.25rem;
}

.cta-card-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}

.cta-card:hover .cta-card-title {
  color: var(--gold-text);
}

.cta-card p {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* ------------------------------------------------------------- footer -- */

.site-footer {
  margin-top: auto;
  background: var(--ink);
  color: var(--paper);
}

.site-footer .wrap {
  padding-top: 4rem;
  padding-bottom: 3rem;
}

/*
 * The brand, then the links as one navigation landmark laid out as its own
 * grid: one column on a small phone, two on a large one, three from a
 * tablet up, beside the brand from a laptop up.
 */
.footer-grid {
  display: grid;
  gap: 2.5rem;
}

.footer-nav {
  display: grid;
  gap: 2rem 1.5rem;
}

@media (min-width: 480px) {
  .footer-nav {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .footer-nav {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 3fr;
  }
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.footer-brand img {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--paper);
}

.footer-brand span {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.footer-about {
  margin: 0;
  max-width: 20rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--paper-60);
}

.footer-head {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin: 0 0 0.5rem;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  font-size: 0.9375rem;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--gold);
}

.footer-base {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--paper-10);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper-60);
}

@media (min-width: 768px) {
  .footer-base {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ------------------------------------------------------------ access -- */

.skip {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 1rem;
}

/* A visible ring for the keyboard, gold on both the white and the ink. */
a:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 3px;
  border-radius: 4px;
}

.site-footer a:focus-visible,
.cta-main:focus-visible {
  outline-color: var(--gold);
}

/*
 * A phone on its side is about 390px tall, and a sticky header would take a
 * fifth of it for the whole read. It scrolls away there.
 */
@media (max-height: 500px) {
  .site-header {
    position: static;
  }
}

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