/* Amoleo Light and Amoleo Dark, the same two themes carried by Amoleo · Pets and
   Amoleo · Connections, so the family reads as one thing. Values are copied from
   Connections' styles.css rather than re-derived, and should stay in step with it.

   One deliberate difference. In the products, --accent is the app's own colour
   (terracotta in Pets, cyan in Connections). The parent has no sub-brand, so
   here --accent is the colour of the AMOLEO half of the wordmark itself: navy.

   Navy at #1c1c2e is a text colour on near-white. On a near-black background the
   same value is invisible, so Dark carries a lightened version at the same hue —
   7.3:1 on --bg, where the literal navy would be about 1.2:1. It still reads as
   the same colour, which is the point; it is not a different accent. */

:root {
  --brand: #1c1c2e;

  /* Each app's accent, used by the family lockup in the footer. Fixed across
     themes so a product's colour means the same thing on every site.
     See Amoleo-Family/docs/family-footer.md. */
  --brand-pets: #c45032;
  --brand-connections: #0b6e8f;
  --brand-rissbrook: #2f6b4f;   /* provisional until the Astro rebuild picks one */

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --wrap: 1080px;
  --step: clamp(56px, 9vw, 104px);
}

/* Dark is the default so a browser that reports no preference gets the theme the
   apps default to, rather than a flash of the other one. */
:root, [data-theme="dark"] {
  color-scheme: dark;

  --bg: #101013;
  --panel: #191920;
  --panel-2: #2b2b33;
  --text: #e9e9ee;
  --text-strong: #ffffff;
  --muted: #9a9aa8;
  --border: #2b2b33;

  --accent: #9a9ae0;
  --on-accent: #101013;

  /* Connections and Rissbrook lighten in Dark; Pets does not, matching what
     Connections already ships. See §2 of the family footer spec. */
  --brand-connections: #3fb6dc;
  --brand-rissbrook: #57b184;
  --brand-pets-ink: #d9603f;   /* terracotta at body size — see --wordmark-ink */

  --shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --bg: #f7f7fb;
    --panel: #ffffff;
    --panel-2: #e0e0e6;
    --text: #3a3a4a;
    --text-strong: #1c1c2e;
    --muted: #6b6b7a;
    --border: #e0e0e6;

    --accent: #1c1c2e;
    --on-accent: #ffffff;

    --brand-connections: #0b6e8f;
    --brand-rissbrook: #2f6b4f;
    --brand-pets-ink: #bd4b2f;

    --shadow: 0 2px 8px rgba(28, 28, 46, 0.08);
    --shadow-lg: 0 8px 24px rgba(28, 28, 46, 0.16);
  }
}

/* Kept as an explicit selector as well as a media query so that adding a theme
   toggle later is a matter of setting data-theme, with no CSS restructuring. */
[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f7fb;
  --panel: #ffffff;
  --panel-2: #e0e0e6;
  --text: #3a3a4a;
  --text-strong: #1c1c2e;
  --muted: #6b6b7a;
  --border: #e0e0e6;
  --accent: #1c1c2e;
  --on-accent: #ffffff;
  --brand-connections: #0b6e8f;
  --brand-rissbrook: #2f6b4f;
  --brand-pets-ink: #bd4b2f;
  --shadow: 0 2px 8px rgba(28, 28, 46, 0.08);
  --shadow-lg: 0 8px 24px rgba(28, 28, 46, 0.16);
}

/* ---- base ---- */

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--text-strong); line-height: 1.2; margin: 0 0 0.5em; }
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--panel);
  color: var(--text-strong);
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---- brand wordmark ----

   Matches Amoleo · Pets and Amoleo · Connections exactly. The suffix is 0.6em
   and nudged down 0.15em on purpose: the product name hangs off the family name.
   Setting both to the same size flattens the wordmark into plain text. */

.brand-wordmark {
  display: flex;
  align-items: center;
  margin: 0;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-strong);
}
.brand-wordmark .brand-dot {
  color: var(--wordmark-accent, var(--accent));
  margin: 0 7px;
  font-weight: 400;
}
.brand-wordmark .brand-suffix {
  display: flex;
  align-items: center;
  position: relative;
  top: 0.15em;
  font-size: 0.6em;
  font-weight: 600;
  color: var(--wordmark-accent, var(--accent));
}

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

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 20;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}
a.site-brand { text-decoration: none; color: var(--text-strong); }
.site-header nav { display: flex; gap: 22px; }
.site-header nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
}
.site-header nav a:hover { color: var(--text-strong); }

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

.hero { padding: calc(var(--step) * 1.1) 0 var(--step); }
.hero h1 {
  font-size: clamp(34px, 6.2vw, 60px);
  letter-spacing: -0.02em;
  max-width: 16ch;
  margin-bottom: 24px;
}
.hero-sub {
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--muted);
  max-width: 54ch;
  margin: 0;
}

/* ---- work ---- */

.section-heading {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: var(--step);
}

.work { padding-bottom: var(--step); }

.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
  margin-bottom: calc(var(--step) * 1.15);
}

/* Alternating sides give the page a rhythm without needing a second layout.
   The order swap is visual only — the DOM order stays text-then-image, which
   is the order it should be read in. */
.product:nth-of-type(even) .product-text { order: 2; }

.product-mark { font-size: 26px; margin-bottom: 14px; }
.product-lede {
  font-size: clamp(19px, 2.1vw, 23px);
  color: var(--text-strong);
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 16px;
}
.product-text p:not(.product-lede):not(.product-link) { color: var(--text); }

.product-link { margin: 20px 0 0; font-weight: 600; }
.product-link a { text-decoration: none; }
.product-link a:hover { text-decoration: underline; }

/* A product is never named bare — "Visit · Pets", never "Visit Pets", so the
   name always arrives carrying the separator that ties it to the family.
   Borrows the wordmark's uppercase and letterspacing but not its sizing: this
   sits inside a sentence, at the size of the words either side of it.

   Deliberately plain inline, not flex. The wordmark proper is display:flex, and
   nesting that inside an inline-flex link in a narrow column broke "Visit",
   the name and the arrow onto three lines. Ordinary text flow does not. */
/* 600, not the wordmark's 800: 800 is the weight of "Amoleo", and this is the
   suffix, which is 600 there. The separator keeps the suffix's 400.

   0.9em, not the wordmark's 0.6em. There the suffix is 0.6 of a large family
   name it hangs off; here there is no family name and the reference is the
   sentence, where 0.6em would be about 10px. The reason to go below 1em at all
   is optical rather than proportional: uppercase set at the size of the words
   around it reads as larger, because every letter reaches cap height while the
   lowercase beside it mostly sits at x-height. 0.9 brings the caps back down to
   about the height of the ascenders either side. */
.link-mark {
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 600;
  font-size: 0.9em;
  white-space: nowrap;
  color: var(--wordmark-accent, var(--accent));
}
.link-mark .link-dot {
  font-weight: 400;
  letter-spacing: 0;
  margin-right: 5px;
}

/* Each product's accent drives its own wordmark, so a colour means one product
   wherever it appears.

   Pets is the exception, and not by choice. The wordmark's suffix is 0.6em, so
   in a 26px heading the product name renders at 15.6px and in a link at 16px —
   both small text, both needing 4.5:1. True terracotta #c45032 manages 4.33:1
   on light and 4.11:1 on dark. --brand-pets-ink is the same hue nudged until it
   passes: #bd4b2f and #d9603f. Side by side with the true value you would
   struggle to name which is which, which is the point.

   The footer lockup deliberately keeps #c45032, because a lockup whose colours
   differ per site defeats its purpose. That leaves the footer's 7.8px suffix
   below AA — a known family-wide issue, recorded in the family footer spec. */
.product.pets { --wordmark-accent: var(--brand-pets-ink); }
.product.connections { --wordmark-accent: var(--brand-connections); }
.product.rissbrook { --wordmark-accent: var(--brand-rissbrook); }
.product.accounts { --wordmark-accent: var(--muted); }

/* ---- screenshots ----

   A phone shot overlapping the corner of a desktop one: honest about these being
   mobile-first apps, and it fills the column better than either alone. The
   padding on the container is what the phone overhangs into — without it the
   overhang is clipped by the grid cell. */

.product-shot {
  position: relative;
  padding: 0 6% 6% 0;
}
.shot-desktop {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  background: var(--panel);
}
.shot-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 21%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  background: var(--panel);
}

/* ---- Luke ---- */

.person {
  border-top: 1px solid var(--border);
  padding: var(--step) 0;
}
.person-inner {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
.person-photo {
  width: 220px;
  height: 220px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  object-fit: cover;
  box-shadow: var(--shadow);
}
.person-text h2 {
  font-size: clamp(26px, 3.4vw, 34px);
  margin-bottom: 18px;
}

/* ---- long-form pages (privacy) ---- */

.prose { padding: calc(var(--step) * 0.7) 0 var(--step); }
.prose .wrap { max-width: 760px; }
.prose h1 { font-size: clamp(30px, 5vw, 42px); letter-spacing: -0.015em; margin-bottom: 20px; }
.prose h2 { font-size: 21px; margin: 40px 0 12px; }
.prose ul { margin: 0 0 1em; padding-left: 22px; }
.prose li { margin-bottom: 10px; }
.prose code {
  font-size: 0.9em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}
.prose-meta { color: var(--muted); font-size: 15px; }

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

.site-footer {
  border-top: 1px solid var(--border);
  padding: 40px 0 56px;
  text-align: center;
}

.family-mark { font-size: 13px; flex-wrap: nowrap; justify-content: center; white-space: nowrap; }
.family-app, .family-link { display: inline-flex; align-items: center; }

.family-mark .pets { --wordmark-accent: var(--brand-pets); }
.family-mark .connections { --wordmark-accent: var(--brand-connections); }
.family-mark .rissbrook { --wordmark-accent: var(--brand-rissbrook); }
.family-mark .accounts { --wordmark-accent: var(--muted); }

.family-mark a { text-decoration: none; }
.family-mark a:hover { text-decoration: underline; }
.family-mark a.family-name { color: inherit; }

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin: 24px 0 0;
  font-size: 14px;
  color: var(--muted);
}
.footer-meta a { color: var(--muted); }

.linkish {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.linkish:hover { color: var(--text-strong); }

/* ---- buttons ---- */

.btn {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 20px;
  min-height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn-hero { background: var(--accent); color: var(--on-accent); }
.btn-hero:hover { filter: brightness(1.12); }
.btn-quiet {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-quiet:hover { background: var(--panel-2); }

/* ---- consent ---- */

.consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.consent-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 20px 24px;
}
.consent h2 { font-size: 17px; margin-bottom: 4px; }
.consent p { margin: 0; font-size: 14.5px; max-width: 62ch; }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- narrow ---- */

@media (max-width: 860px) {
  .product,
  .person-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The alternating swap only makes sense in two columns. In one it would put
     images above their own headings. */
  .product:nth-of-type(even) .product-text { order: 0; }
  .person-photo { width: 160px; height: 160px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }

  /* Without this the rows are about 100px wide: the wrapper centres its content,
     so it is only as wide as the words, and width:100% of that is 100% of
     nothing much. */
  .family-mark-wrap { display: block; }
  .family-mark {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    white-space: normal;
    gap: 2px;
  }
  .family-mark .family-name,
  .family-mark .family-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
  }
  .family-mark .family-name:hover,
  .family-mark a.family-link:hover { background: var(--border); text-decoration: none; }

  .consent-actions .btn { flex: 1; }
}

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