/*
 * filerse.com — the GRAFIT surface, derived from packages/design-tokens/tokens.json 3.3.0.
 *
 * Every colour, radius and type step below is a token, not a web invention: the site and the app
 * have to look like one product, and the only way to keep that true over time is to take the
 * numbers from the same file the app takes them from.
 *
 * The page makes NO third-party request. Fonts are served from this origin (subset from the same
 * SIL OFL 1.1 files the app bundles); there is no icon CDN and no webfont service. A site whose
 * subject is "nothing leaves your device" cannot fetch a stylesheet from someone else while
 * saying so. Analytics is the one deliberate exception, and since 20 September 2026 it is unconditional
 * rather than consent-gated (see assets/analytics.js, and the privacy page that matches it).
 */

/* ---- fonts: subset of the app's own files (scripts/build-web-fonts.py) ---- */
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../fonts/schibsted-grotesk-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../fonts/schibsted-grotesk-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../fonts/schibsted-grotesk-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---- tokens ---- */
:root {
  color-scheme: light dark;

  --canvas: #f0f0f0;
  --paper: #ffffff;
  --fill: #fafafa;
  --ink: #0a0a0a;
  --ink-2: #3d3d3d;
  --muted: #6b6b6b;
  --hairline: #dcdcdc;
  --dashed: #8a8a8a;
  --on-ink: #ffffff;

  --spine-document: #2b5ce0;
  --spine-spreadsheet: #1a7541;
  --spine-image: #6d28d9;
  --spine-text: #52525b;
  --spine-archive: #0e7490;
  --spine-other: #6b6b72;

  --sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* radius.paper / radius.card / radius.full */
  --r-paper: 20px;
  --r-card: 18px;
  --r-full: 999px;

  --pad: 20px;
  --measure: 34rem;
}

@media (min-width: 412px) {
  :root {
    --pad: 24px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #000000;
    --paper: #0f0f0f;
    --fill: #1f1f1f;
    --ink: #ffffff;
    --ink-2: #9a9a9a;
    --muted: #6b6b6b;
    --hairline: #3d3d3d;
    --dashed: #6b6b6b;
    --on-ink: #0a0a0a;

    --spine-document: #6e90f0;
    --spine-spreadsheet: #58b37e;
    --spine-image: #a78bfa;
    --spine-text: #9ca3af;
    --spine-archive: #45b6ce;
    --spine-other: #a1a1aa;
  }
}

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

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 18px/29px var(--sans);
  font-synthesis-weight: none;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ---- skip link and focus, drawn the way the app draws focus (control.focusRing 2) ---- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--on-ink);
  padding: 12px 18px;
  border-radius: var(--r-card);
  z-index: 10;
}
.skip:focus {
  left: var(--pad);
  top: 12px;
}

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- masthead ---- */
.masthead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 36px 0 0;
  color: var(--ink);
}
.masthead svg {
  display: block;
  width: 30px;
  height: 30px;
}
.wordmark {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.75px;
}

/* ---- hero ---- */
.hero {
  display: grid;
  gap: 40px;
  padding: 56px 0 0;
  align-items: center;
}
@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: 64px;
    padding: 76px 0 0;
  }
}

h1 {
  margin: 0 0 22px;
  font-size: clamp(48px, 7.4vw, 82px);
  line-height: 0.98;
  font-weight: 900;
  letter-spacing: -0.038em;
}

.lede {
  margin: 0 0 16px;
  font-size: clamp(19px, 2.2vw, 22px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 28em;
}

/* typography.scale.monoMeta */
.meta {
  margin: 0;
  font: 400 13px/20px var(--mono);
  color: var(--muted);
}

/* typography.scale.label */
.label {
  font: 500 10px/14px var(--mono);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- paper: the app's list surface ---- */
.paper {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-paper);
  overflow: hidden;
}
.paper > .band {
  padding: 16px 19px 12px;
}
.row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 19px;
  border-top: 1px solid var(--hairline);
}
/* The name and its mono summary are two lines of a row, never one: these are spans inside a span,
 * so without display they only stack because the box happens to be narrow. */
.row-body,
.cap-body {
  display: block;
  min-width: 0;
  flex-grow: 1;
}
.row-name {
  display: block;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.32px;
}
.row-meta {
  display: block;
  font: 400 13px/20px var(--mono);
  color: var(--muted);
}
.footnote {
  border-top: 1px solid var(--hairline);
  background: var(--fill);
  padding: 14px 19px;
  font: 400 13px/20px var(--mono);
  color: var(--muted);
}

/* spineShape: 6 x 28, radius 999 */
.spine {
  flex-shrink: 0;
  width: 6px;
  height: 28px;
  border-radius: var(--r-full);
  background: var(--spine-other);
}
.spine.document {
  background: var(--spine-document);
}
.spine.spreadsheet {
  background: var(--spine-spreadsheet);
}
.spine.image {
  background: var(--spine-image);
}
.spine.text {
  background: var(--spine-text);
}
.spine.archive {
  background: var(--spine-archive);
}
.spine.other {
  background: transparent;
  border: 1.5px dashed var(--dashed);
}

/* ---- sections ---- */
section {
  padding: 72px 0 0;
}
@media (min-width: 900px) {
  section {
    padding: 104px 0 0;
  }
}

h2 {
  margin: 0 0 18px;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -0.03em;
  max-width: 16em;
}

section > p {
  margin: 0 0 16px;
  color: var(--ink-2);
  max-width: var(--measure);
}
section > p:last-of-type {
  margin-bottom: 0;
}

.section-head {
  margin: 0 0 12px;
}

.grid {
  display: grid;
  gap: 16px;
  margin: 32px 0 0;
}
@media (min-width: 720px) {
  .grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- capability rows: the three states, drawn as the app draws them ---- */
.cap {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 19px;
  border-top: 1px solid var(--hairline);
}
.cap-name {
  display: block;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.32px;
}
.cap-why {
  margin: 2px 0 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink-2);
}
.cap.locked .badge,
.badge {
  flex-shrink: 0;
  align-self: center;
  font: 500 10px/14px var(--mono);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-full);
  padding: 5px 10px;
}
.cap.off {
  border-top-style: dashed;
  border-top-color: var(--dashed);
}
.cap.off .cap-name,
.cap.off .cap-why {
  color: var(--muted);
}

/* ---- format wall ---- */
.formats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 1px;
  margin: 32px 0 0;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-paper);
  overflow: hidden;
}
.format {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 16px;
  background: var(--paper);
}
.format-name {
  font: 500 15px/20px var(--mono);
}

/* ---- closing note ---- */
.status {
  margin: 72px 0 0;
  border-top: 1px solid var(--hairline);
  padding: 28px 0 0;
}
@media (min-width: 900px) {
  .status {
    margin-top: 104px;
  }
}
.status p {
  margin: 0;
  max-width: var(--measure);
  color: var(--ink-2);
}

footer {
  padding: 28px 0 56px;
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: baseline;
  font: 400 13px/20px var(--mono);
  color: var(--muted);
}
footer a,
.status a {
  color: var(--ink);
  text-decoration-color: var(--hairline);
  text-underline-offset: 3px;
}
footer a:hover,
.status a:hover {
  text-decoration-color: currentColor;
}