/* Resets and page defaults. Nothing here is specific to one screen. */

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
  scrollbar-gutter: stable;   /* the page doesn't shift sideways when a sheet locks the scroll */
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-m);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }   /* so a class that sets display never overrides the hidden attribute */
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

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

/* while the holding screen is up the page behind it stays put */
html.is-holding { overflow: hidden; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* text styles: the only sizes and weights used on any screen (see the type tokens) */
.t-display { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: -0.02em; }
.t-lede    { margin: 0; font-size: var(--fs-l); font-weight: var(--fw-medium); line-height: 1.25; letter-spacing: -0.01em; }
.t-body    { margin: 0; font-size: var(--fs-m); line-height: var(--lh-body); }
.t-label   { font-size: var(--fs-s); font-weight: var(--fw-medium); letter-spacing: 0.06em; text-transform: uppercase; }

/* the logo, small: an ink disc with the orange dot clipped by it (the holding screen has its own, larger and animated) */
.brand { display: flex; align-items: center; gap: 10px; font-weight: var(--fw-medium); }
.mark { position: relative; display: block; width: 30px; height: 30px; overflow: hidden; border-radius: 50%; background: var(--ink); }
.mark::after {
  content: "";
  position: absolute;
  width: 70%; height: 70%;
  left: 42%; top: -12%;
  border-radius: 50%;
  background: var(--accent);
  transition: transform var(--dur-base) var(--ease-spring);
}
.brand:hover .mark::after { transform: translate(-48%, 62%) scale(1.15); }

/* a pill button: a tray of translucent paper */
.pill {
  display: flex;
  align-items: center;
  padding: 13px 18px;
  border: 0;
  border-radius: 999px;
  font-weight: var(--fw-medium);
  color: var(--ink);
  cursor: pointer;
  background-color: rgba(236, 236, 229, 0.86);
  box-shadow: 0 0 0 1px rgba(29, 29, 27, 0.14), 0 12px 26px -16px rgba(29, 29, 27, 0.4);
}
.pill:hover { background-color: var(--paper-light); }

/* a text link: the one style for nav, filters and the controls inside live projects (the one showing is dark and underlined) */
.link {
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.link:hover { color: var(--ink); }
.link[aria-current="page"], .link[aria-pressed="true"] { color: var(--ink); text-decoration: underline; }