/* The Sjöstrand Project: one screen, one name, one accent. */

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: block;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --paper: #ededea;
  --ink: #121212;
  --muted: #4a4a47;
  /* International Klein Blue, the one nod to the art world. */
  --accent: #002fa7;
  --gutter: clamp(16px, 2.5vw, 40px);
  --display: 'Archivo', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f0f0f;
    --ink: #ebebe6;
    --muted: #a3a39e;
    --accent: #4a6bff;
  }
}

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

html,
body {
  margin: 0;
}

body {
  background: var(--paper);
  color: var(--ink);
  font: 400 13px/1.45 var(--mono);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button {
  font: inherit;
  color: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The monogram is measured and drawn by main.js; keep it out of sight until then. */
.js:not(.is-ready) .monogram-cell {
  visibility: hidden;
}

.stage {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  row-gap: clamp(16px, 3vh, 36px);
  height: 100dvh;
  padding: var(--gutter);
}

.chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.name {
  margin: 0;
  font: 800 13px/1.45 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.about-button {
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--ink);
  background: transparent;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.about-button:hover,
.about-button:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

.about-button:active {
  translate: 0 1px;
}

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

/* The monogram: T, S and P filled with their words, fitted by main.js. */

.monogram-cell {
  display: grid;
  align-items: end;
  justify-items: start;
  min-height: 0;
}

.monogram-svg {
  display: block;
  overflow: hidden;
}

.monogram-svg .glyph {
  font-family: var(--display);
  font-size: 1000px;
  font-weight: 900;
}

.monogram-svg .silhouette {
  fill: color-mix(in srgb, var(--ink) 10%, transparent);
}

.monogram-svg .row {
  font-family: var(--mono);
  font-weight: 800;
  fill: var(--ink);
}

.monogram-svg .row .accent {
  fill: var(--accent);
}

@media (prefers-reduced-motion: no-preference) {
  /* Rows of words drift through the letters, alternating direction. */
  .is-ready .monogram-svg .row {
    animation: drift var(--duration) linear infinite;
  }

  .is-ready .monogram-svg .row.reverse {
    animation-direction: reverse;
  }
}

@keyframes drift {
  to {
    transform: translateX(var(--period));
  }
}

/* About: a wall label that rises from the About button. */

.about {
  position: fixed;
  inset: auto var(--gutter) calc(var(--gutter) + 56px) auto;
  width: min(30rem, calc(100vw - 2 * var(--gutter)));
  margin: 0;
  padding: 20px 22px 24px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}

.about::backdrop {
  background: color-mix(in srgb, var(--paper) 60%, transparent);
}

.about-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.about-head h2 {
  margin: 0;
  font: 800 13px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.close {
  min-height: 44px;
  margin: -12px -12px -12px 0;
  padding: 0 12px;
  border: 0;
  background: none;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.close:hover {
  color: var(--accent);
}

.about-copy {
  max-width: 34ch;
  margin: 0 0 20px;
  font: 500 clamp(19px, 2.2vw, 23px)/1.32 var(--display);
  font-stretch: 100%;
  text-wrap: pretty;
}

.about-meta {
  margin: 0;
  color: var(--muted);
}

@media (prefers-reduced-motion: no-preference) {
  .about {
    transition:
      opacity 0.22s var(--ease-out),
      translate 0.35s var(--ease-out),
      overlay 0.35s allow-discrete,
      display 0.35s allow-discrete;
  }

  .about:not(:popover-open) {
    opacity: 0;
    translate: 0 10px;
  }

  @starting-style {
    .about:popover-open {
      opacity: 0;
      translate: 0 10px;
    }
  }
}