/* F12 Gallery: temporary "coming soon" page. Fonts are served from this site (licences: fonts/OFL-*.txt). */
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 700 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

/* Follows the device's light or dark setting. light-dark(LIGHT, DARK). */
:root {
  color-scheme: light dark;
  --page:  light-dark(#f4f5f7, #111317);
  --card:  light-dark(#ffffff, #1a1d23);
  --line:  light-dark(#dde1e6, #262a31);
  --rim:   light-dark(#b8c0c9, #5b6573);
  --ink:   light-dark(#15181d, #eef1f4);
  --soft:  light-dark(#3d4550, #c7ced8);
  --mute:  light-dark(#5b6673, #949eab);
  --link:  light-dark(#1a62a2, #5aa9e6);
  --sun:   light-dark(#9a6200, #ffd25e);
  --glow:  light-dark(#dcebfa, #1d2b3b);
  --field: light-dark(#eceff2, #22262d);
  --display: "Bricolage Grotesque", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --body: "Instrument Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
}
/* browsers without light-dark() (before 2024) get the dark colours */
@supports not (color: light-dark(#000, #fff)) {
  :root { color-scheme: dark; --page: #111317; --card: #1a1d23; --line: #262a31; --rim: #5b6573; --ink: #eef1f4; --soft: #c7ced8; --mute: #949eab; --link: #5aa9e6; --sun: #ffd25e; --glow: #1d2b3b; --field: #22262d; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0; min-height: 100%; display: flex; flex-direction: column;
  background: radial-gradient(120% 80% at 50% -10%, var(--glow) 0%, var(--page) 60%) no-repeat, var(--page);
  color: var(--ink); font: 400 17px/1.6 var(--body);
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 6px; }

main { flex: 1; display: grid; place-items: center; padding: clamp(32px, 7vw, 80px) 20px; }
.card { width: min(640px, 100%); text-align: center; }
.icon { width: clamp(112px, 22vw, 152px); height: auto; margin: 0 auto 28px; display: block; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .35)); }
.kicker { margin: 0 0 14px; font: 500 13px/1.4 var(--mono); letter-spacing: .02em; color: var(--link); }
h1 { margin: 0; font: 800 clamp(40px, 7.4vw, 72px)/0.98 var(--display); font-variation-settings: "wdth" 82; letter-spacing: -0.02em; text-wrap: balance; }
h1 em { font-style: normal; color: var(--sun); }
.lede { margin: 22px auto 0; max-width: 32em; color: var(--soft); font-size: clamp(17px, 1.8vw, 19px); text-wrap: pretty; }

.status { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-weight: 600; font-size: 15px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 0 var(--sun); animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sun) 55%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.note { margin: 16px auto 0; max-width: 30em; color: var(--mute); font-size: 15px; }

.langs { margin-top: 40px; }
.langs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.langs a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 1px solid var(--rim); border-radius: 999px; color: var(--soft); text-decoration: none; font-size: 15px; }
.langs a:hover { color: var(--ink); border-color: var(--mute); }
.langs a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--page); font-weight: 600; }

footer { padding: 24px 20px 32px; text-align: center; color: var(--mute); font-size: 13px; }
footer p { margin: 0 auto; max-width: 40em; }

@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }