/* Arca Holdings. One screen, light and dark follow the device. No scripts. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light dark;
  --bg: #FFFFFF;
  --text: #141414;
  --body: #2B2B2B;
  --muted: #5C5C5C;
  --rule: #E2E2E2;
  --underline: #A8A8A8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141414;
    --text: #EDEDED;
    --body: #D4D4D4;
    --muted: #A3A3A3;
    --rule: #2E2E2E;
    --underline: #6B6B6B;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  padding: clamp(40px, 8vw, 96px) clamp(24px, 6vw, 64px);
  background: var(--bg);
  color: var(--text);
  font-family: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

p, ul { margin: 0; }

a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover { text-decoration-color: currentColor; }

a:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
  border-radius: 4px;
}

.muted { color: var(--muted); }

/* Home */

.intro { display: flex; flex-direction: column; gap: 8px; }

h1 {
  margin: 0;
  font-size: clamp(30px, 3.2vw + 12px, 36px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.intro p { font-size: 18px; line-height: 1.45; }

.app {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  color: var(--text);
  text-decoration: none;
}

.app img { width: 52px; height: 52px; flex: none; }

.app-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.app-name { font-size: 19px; font-weight: 500; line-height: 1.25; }

.app-summary { font-size: 16px; line-height: 1.45; color: var(--muted); }

.app-status { font-size: 14px; line-height: 1.45; color: var(--muted); }

.app-link {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.app:hover .app-link { text-decoration-color: currentColor; }

.about {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
}

.site-footer { font-size: 13px; line-height: 1.6; color: var(--muted); }

/* Privacy */

.doc { gap: 36px; }

.doc-header { display: flex; flex-direction: column; gap: 10px; }

.home-link {
  align-self: flex-start;
  margin-bottom: 18px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.updated { font-size: 14px; line-height: 1.5; color: var(--muted); }

.lede { margin-top: 8px; font-size: 17px; line-height: 1.55; color: var(--body); }

.doc section { display: flex; flex-direction: column; gap: 10px; }

h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.doc section p,
.doc section ul {
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
}

.doc section ul { padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; }

.doc .site-footer { border-top: 1px solid var(--rule); padding-top: 20px; }