/* ============================================================================
   collectedly.studio

   Rests on tokens/index.css, which owns the palette, the five faces, the space
   scale and the motion. Properties are alphabetized within a rule and logical
   properties are used throughout, per handbook/design.md.

   var(--purple-9) and #ffffff are substituted at build time. See site.nix: the front
   page's colour is drawn from a hash of the studio's own writing, so it turns
   over whenever the writing does.

   THE ONE PLACE THIS DEPARTS FROM THE HANDBOOK, on purpose and worth arguing
   with. design.md says colour is the last ten per cent and the surface stays
   mostly neutral. The front page here is a full bleed of one saturated hue.
   The licence is two lines further down the same page --- "be delightful on the
   door; be quiet inside the room" --- and this is that sentence taken
   literally: the door is loud, and every room behind it is the neutral surface
   the handbook asks for. If the handbook disagrees, the handbook wins and this
   comment is the place to start.
   ============================================================================ */

:root {
  color-scheme: light dark;

  /* Bigger than --text-3xl, which tops the shared scale out at 2.25rem. A
     display size is a real gap in tokens/collectedly.css rather than a licence
     to invent sizes here, and if a second product ever wants one these two
     belong upstream. */
  --display-1: clamp(1.5rem, 4.5vw, 2.75rem);
  --display-2: clamp(1.75rem, 5.5vw, 3.5rem);
}

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

body {
  display: grid;
  gap: var(--space-12);
  grid-template-rows: auto 1fr auto;
  margin: 0;
  min-block-size: 100dvb;
  padding-block: var(--space-6) var(--space-10);
  padding-inline: var(--space-5);
}

.skip {
  background-color: var(--color-surface);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  padding: var(--space-2) var(--space-4);
  position: fixed;
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.masthead,
main,
footer {
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: 46rem;
}

/* --- Masthead ------------------------------------------------------------ */

.masthead {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-chrome);
  gap: var(--space-3) var(--space-6);
  justify-content: space-between;
}

.wordmark {
  align-items: center;
  color: inherit;
  display: inline-flex;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  gap: var(--space-2);
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* Driven through a mask so it takes currentColor. The file carries a fill that
   tokens/README.md says not to trust, and an <img> would be stuck with it ---
   which on the front page would put a fixed red mark on a background that is a
   different hue every time the writing changes. */
.mark {
  background-color: currentColor;
  block-size: 1.5em;
  display: inline-block;
  inline-size: 1.5em;
  mask-image: url("/tokens/collectedly.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.masthead nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.masthead nav a {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
}

/* Full strength on the coloured field. The build measures the text colour
   against the background and admits the pair only above 4.5:1 --- and that
   number is for the colour as measured, so dimming it here would spend the
   margin the check just proved. Small text on the door does not get to be
   decorative. */
body.front .masthead nav a {
  color: inherit;
}

.masthead nav a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* --- The door ------------------------------------------------------------
   One saturated field, the list, and nothing else. Anything added to this page
   is something a person has to read before reaching the argument. */

body.front {
  background-color: var(--purple-9);
  color: #ffffff;
  font-family: var(--font-chrome);
}

.points {
  font-size: var(--display-1);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.18;
  list-style: none;
  margin: 0;
  padding: 0;
}

.points a {
  align-items: baseline;
  color: inherit;
  display: flex;
  gap: 0.5em;
  padding-block: 0.08em;
  text-decoration: none;
}

.points a:hover .point {
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
}

/* Tabular, so the column of numbers is a column. Ranked below the words by size
   alone and not by being faded: the build proves a contrast ratio for this text
   colour on this background, and an opacity underneath it quietly spends that
   proof. Size is the channel that survives both the fade and the page being
   printed in black and white. */
.points .number {
  font-size: 0.62em;
  font-variant-numeric: tabular-nums;
}

.points .point {
  text-wrap: balance;
}

/* --- The rooms -----------------------------------------------------------
   Neutral surface, editorial serif, the shared measure. What the handbook asks
   for everywhere that is not the door. */

body.piece,
body:not(.front) {
  background-color: var(--color-bg);
  color: var(--color-text);
}

body:not(.front) main {
  font-family: var(--font-voice);
  font-size: var(--text-lg);
  max-inline-size: min(var(--measure), 46rem);
}

main h1 {
  font-size: var(--display-1);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  margin-block: 0 var(--space-6);
  text-wrap: balance;
}

main h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
  margin-block: var(--space-10) var(--space-4);
  text-wrap: balance;
}

main p {
  margin-block: 0 var(--space-5);
}

body:not(.front) main a {
  color: var(--color-link);
  text-underline-offset: 0.2em;
}

main pre {
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  margin-block: 0 var(--space-6);
  overflow-x: auto;
  padding: var(--space-4);
}

main code {
  font-family: var(--font-tool);
  font-variant-numeric: tabular-nums;
}

main p code {
  background-color: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  font-size: 0.9em;
  padding: 0.1em 0.3em;
}

/* --- The eleven, on the understory page ---------------------------------- */

.pieces {
  border-block-start: 1px solid var(--color-border-subtle);
  list-style: none;
  margin-block: 0 var(--space-10);
  padding: 0;
}

.pieces li {
  border-block-end: 1px solid var(--color-border-subtle);
}

.pieces a {
  align-items: baseline;
  color: inherit;
  display: flex;
  font-family: var(--font-chrome);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  gap: var(--space-4);
  padding-block: var(--space-4);
  text-decoration: none;
}

body:not(.front) .pieces a {
  color: inherit;
}

.pieces a:hover .title {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.pieces .number {
  color: var(--color-text-muted);
  font-family: var(--font-tool);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

/* --- The tools ----------------------------------------------------------- */

.tools {
  border-block-start: 1px solid var(--color-border-subtle);
  list-style: none;
  margin-block: 0 var(--space-10);
  padding: 0;
}

.tools > li {
  border-block-end: 1px solid var(--color-border-subtle);
  padding-block: var(--space-5);
}

.tools h2 {
  font-size: var(--text-xl);
  margin-block: 0 var(--space-2);
}

.tools h2 a {
  color: inherit;
  text-decoration: none;
}

.tools h2 a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.tools p {
  color: var(--color-text-muted);
  margin-block: 0 var(--space-2);
}

.status {
  color: var(--color-accent-text);
  font-family: var(--font-chrome);
  font-size: var(--text-sm);
}

.status.later {
  color: var(--color-text-muted);
}

/* --- Footer -------------------------------------------------------------- */

footer {
  font-family: var(--font-chrome);
  font-size: var(--text-sm);
  padding-block-start: var(--space-6);
}

body:not(.front) footer {
  border-block-start: 1px solid var(--color-border-subtle);
  color: var(--color-text-muted);
}

body.front footer {
  border-block-start: 1px solid currentColor;
  color: inherit;
}

footer p {
  margin-block: 0 var(--space-2);
}

footer .rules {
  max-inline-size: 22rem;
}

footer a {
  color: inherit;
}

/* --- Narrow -------------------------------------------------------------- */

@media (max-width: 34rem) {
  body {
    gap: var(--space-8);
  }

  .points {
    letter-spacing: -0.01em;
  }
}