/* Danish's Design Workbench — the index page.
   Black ground, one wordmark, one oversized list. Nothing else. */

/* Overused Grotesk, the same face the FrontPage Labs site uses, self-hosted
   from the same two woff2 files rather than pulled off a CDN. Only medium and
   semibold exist, so nothing here asks for 700. */
@font-face {
  font-family: 'Overused-Grotesk';
  src: url('/assets/fonts/overusedgrotesk-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Overused-Grotesk';
  src: url('/assets/fonts/overusedgrotesk-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --ink:        #ffffff;
  --ground:     #000000;
  --dim:        #4a4a4a;  /* a resting row when another row is hovered */
  --quiet:      #6e6e6e;  /* the trailing label */
  --fpl-blue:   #03f6ff;  /* the studio cyan, used by the mark and nothing else */

  --font: 'Overused-Grotesk', -apple-system, BlinkMacSystemFont,
          'Helvetica Neue', Arial, sans-serif;

  /* One row's type size, sized off the viewport height as well as its width so
     the stack keeps roughly filling the screen instead of running off it. */
  --row: clamp(1.5rem, min(6.4vw, 5.4vh), 4.5rem);

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --speed: 180ms;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  overflow: hidden;              /* the list scrolls, the page does not */
}

/* ── Masthead ────────────────────────────────────────────────────────────── */

.masthead {
  flex: none;
  padding: clamp(1.1rem, 2.6vh, 2rem) var(--gutter);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  color: var(--ink);
  text-decoration: none;
  font-size: clamp(0.95rem, 1.5vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  transition: opacity var(--speed) ease;
}

.wordmark:hover { opacity: 0.65; }

.wordmark .mark {
  height: 1.05em;
  width: auto;
  flex: none;
  fill: none;
  stroke: var(--fpl-blue);
  stroke-width: 2.6;
  stroke-linecap: square;
}

/* ── The list ────────────────────────────────────────────────────────────── */

.stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.projects {
  counter-reset: project -1;     /* so the first increment lands on 00 */
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding: clamp(1rem, 4vh, 3rem) var(--gutter);
  scrollbar-width: none;
}

.projects::-webkit-scrollbar { display: none; }

/* Only fade the edges when there is genuinely more list than screen. The class
   is put on by workbench.js; without JS the list simply never fades. */
.projects.is-overflowing {
  mask-image: linear-gradient(to bottom, transparent 0, #000 5.5rem,
                              #000 calc(100% - 5.5rem), transparent 100%);
}

.project {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  text-decoration: none;
  color: var(--ink);
  font-size: var(--row);
  line-height: 1.14;
  letter-spacing: -0.03em;
  word-spacing: 0.08em;          /* the negative tracking closes the word gaps too */
  text-transform: uppercase;
  transition: color var(--speed) ease, transform var(--speed) ease;
}

/* Hovering one row pushes every other row back, which is the whole effect. */
.projects:hover .project { color: var(--dim); }
.projects:hover .project:hover { color: var(--ink); }

.project:hover { transform: translateX(0.14em); }

.project:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  color: var(--ink);
}

/* The digits are tabular so the numbers form a column and every name starts at
   the same x, but the period is deliberately left proportional. Overused
   Grotesk gives the period a full monospace advance in its tabular set, which
   opens a visible gap between the number and its own full stop. Splitting it
   into ::after and switching that run back to normal figures keeps the column
   and closes the gap. */
.num {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.num::before { content: counter(project, decimal-leading-zero); }
.num::after  { content: "."; font-variant-numeric: normal; }

.project { counter-increment: project; }

.name { flex: none; }

/* The trailing label sits out to the right and only shows on the hovered row.
   It never affects layout, so rows do not shift when it appears. */
.meta {
  margin-left: 0.55em;
  font-size: 0.26em;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--quiet);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-0.15em);
  transition: opacity var(--speed) ease;
}

.project:hover .meta,
.project:focus-visible .meta { opacity: 1; }

/* Touch screens have no hover, so the labels would never appear at all. Show
   them permanently there instead. */
@media (hover: none) {
  .meta { opacity: 1; }
  .project:hover { transform: none; }
}

/* Narrow screens. Rather than shrinking the type until "Get Mansi Employed"
   fits on one line, which would leave it far too small to read as oversized,
   the name is allowed to wrap. Because the number and the name are separate
   flex children, a wrapped second line aligns under the name instead of under
   the number, which gives the hanging indent for free. The list then runs past
   the bottom of the screen on most phones, which is what the scroll and the
   edge fade are there for. */
@media (max-width: 34rem) {
  :root { --row: clamp(1.6rem, 7.2vw, 2.6rem); }
  .meta { display: none; }
  .name { flex: 1 1 auto; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
  .project:hover { transform: none; }
}