/* Shared styling for the static pages at the site root (home, about, privacy, contact, 404). */
:root {
  color-scheme: dark;
  --bg: #060912;
  --text: #eef2fb;
  --muted: #9aa6c2;
  --line: rgba(255, 255, 255, 0.12);
  --card: rgba(255, 255, 255, 0.045);
  --accent: #69c8f2;
  --font: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(38, 74, 160, 0.35), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(245, 197, 66, 0.12), transparent 55%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 62rem; margin: 0 auto; padding: 0 20px }
.prose { max-width: 44rem }

header.site {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 18px 0; border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text) }
.brand b { font-size: 1.15rem; letter-spacing: .01em }
.dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block }
.dot.a { background: #e5484d } .dot.b { background: #f2b632; margin-left: -6px } .dot.c { background: #69c8f2; margin-left: -6px }
nav.site { display: flex; gap: 4px; flex-wrap: wrap }
nav.site a {
  color: var(--muted); text-decoration: none; padding: 10px 12px; border-radius: 10px;
  min-height: 44px; display: inline-flex; align-items: center;
}
nav.site a:hover, nav.site a[aria-current='page'] { color: var(--text); background: rgba(255,255,255,.07) }

h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.2; margin: 2.2rem 0 .6rem }
h2 { font-size: 1.35rem; margin: 2.4rem 0 .6rem }
h3 { font-size: 1.08rem; margin: 1.6rem 0 .4rem }
p, li { color: #d7deef }
.lead { font-size: 1.12rem; color: var(--muted); margin-bottom: 1.5rem }
a { color: var(--accent) }
ul, ol { padding-left: 1.2rem }
li { margin: .35rem 0 }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0 }
dl dt { font-weight: 600; margin-top: 1rem }
dl dd { margin: .2rem 0 0; color: #d7deef }
table { border-collapse: collapse; width: 100%; margin: 1rem 0 }
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line) }
th { color: var(--muted); font-weight: 600; font-size: .9rem }

.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin: 2rem 0 }
.card {
  display: block; padding: 20px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--card); text-decoration: none; color: var(--text); transition: background .15s, transform .1s;
}
.card:hover { background: rgba(255,255,255,.09) }
.card:active { transform: translateY(1px) }
.card h3 { margin: 0 0 .35rem; font-size: 1.15rem }
.card p { margin: 0; color: var(--muted); font-size: .96rem }
/* The tool photographed by tools/og.mjs, which writes these at exactly 720x534. The aspect-ratio
   has to match that: it reserves the space before the image arrives, so the text below it does not
   jump. Change the size there and change it here. The dark background is what shows in the gap.

   height: auto is load bearing. The width and height attributes on the <img> become a
   presentational height of 534px, which beats aspect-ratio, and the picture would render as a
   tall slice of itself. */
.card img {
  display: block; width: 100%; height: auto; aspect-ratio: 720 / 534; object-fit: cover;
  border-radius: 10px; margin: 0 0 14px; background: #0e1526;
}

footer.site { margin-top: 4rem; padding: 2rem 0 3rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem }
/* The links and the "Cookie settings" button have to be laid out the same way or they do not line
   up. The button is 44px tall to meet the touch-target minimum and centres its own label the way
   buttons do; a bare <a> was only as tall as its text and, stretched to the row height by the flex
   default, sat against the top of it. So the button's label read lower than every link beside it.
   Centring the row and giving the links the same box fixes the alignment and keeps both at 44px.
   This is what .tool-prose__nav in the three apps already does. */
footer.site nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: .8rem }
footer.site nav a, footer.site nav button.linklike {
  display: inline-flex; align-items: center; min-height: 44px;
}
footer.site a { color: var(--muted) }
footer.site a:hover { color: var(--text) }

button.linklike {
  background: none; border: 0; color: var(--muted); font: inherit; text-decoration: underline;
  cursor: pointer; padding: 0; min-height: 44px;
}
button.linklike:hover { color: var(--text) }