/* Home: greeting, byline, the projects strip, experience, contact. One column, everything
   hanging off column 1. Spacing in baselines (tokens.css, "Home"). */

.home {
  position: relative;
  z-index: 1; /* the page above the backdrop */
  padding-top: calc(var(--home-top-bl) * var(--baseline));
  padding-bottom: calc(var(--home-end-bl) * var(--baseline));
}

.home > * {
  grid-column: 1 / -1;
}

/* The artwork behind the home: placed by its centre in a backdrop that covers the page and
   clips the overhang, behind everything, scrolling with the page. Never takes the pointer. */
.home__backdrop {
  position: absolute;
  z-index: 0; /* not -1: that would land behind the body's own background */
  inset: 0;
  overflow: hidden;
  background: var(--color-backdrop); /* the page color, inside this layer, so the art's blend has something to blend with */
  pointer-events: none;
}

.home__art {
  position: absolute;
  top: var(--art-y);
  left: calc(50% + var(--art-dx));
  width: var(--art-size);
  height: auto;
  max-width: none;
  translate: -50% -50%;
  opacity: var(--art-opacity);
  mix-blend-mode: screen; /* as in the mock: the lines lift the grey rather than sit on it */
  /* The drawing is a circle of ~440px radius in the middle of the photo; fade its edge away from
     --art-fade of that radius outwards */
  -webkit-mask-image: radial-gradient(circle 440px at 50% 50%, #000 var(--art-fade), transparent 100%);
  mask-image: radial-gradient(circle 440px at 50% 50%, #000 var(--art-fade), transparent 100%);
  user-select: none;
}

.home__byline {
  max-width: calc(var(--home-byline-cols) * var(--grid-col) + (var(--home-byline-cols) - 1) * var(--grid-gutter));
  margin-top: calc(var(--home-byline-gap-bl) * var(--baseline));
}

/* Each section starts with a rule across the grid, halfway through the section gap */
.home__heading {
  margin-top: calc(var(--home-section-gap-bl) / 2 * var(--baseline));
  padding-top: calc(var(--home-section-gap-bl) / 2 * var(--baseline) - 1px); /* the rule's pixel, on the baseline grid */
  border-top: 1px solid color-mix(in oklab, var(--color-ink) var(--rule-section), transparent);
}

.home__heading + * {
  margin-top: calc(var(--home-heading-gap-bl) * var(--baseline));
}

/* Load-in order (css/motion.css) */
.home__greeting { --intro-step: 0; }
.home__byline { --intro-step: 1; }
.home__heading { --intro-step: 2; }
.tile:nth-child(1) { --intro-step: 3; }
.tile:nth-child(2) { --intro-step: 4; }
.tile:nth-child(3) { --intro-step: 5; }
.tile:nth-child(4) { --intro-step: 6; }
.tile:nth-child(n + 5) { --intro-step: 7; }
.exp { --intro-step: 7; }
.home__heading--contact { --intro-step: 6; }
.circles { --intro-step: 7; }

/* The projects strip: always flush to the grid's width, never a lone tile on a row. When at
   least --strip-min columns fit (2 per tile), all tiles share one row in their designed
   proportions (--cols on each tile), stretching to fill it; below that, two per row at half
   the width each. --fits is 1 or 0: the column count that fits (js/layout.js) against the
   strip's minimum. Hovering a tile pushes its cover in (css/motion.css) and brightens its name. */

.strip {
  --fits: clamp(0, var(--grid-count, var(--grid-cols)) - var(--strip-min) + 1, 1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gutter);
}

.tile {
  --cols: 2; /* unless the tile says otherwise */
  flex-grow: calc(var(--fits) * var(--cols) + (1 - var(--fits)));
  flex-basis: calc((1 - var(--fits)) * (50% - var(--grid-gutter) / 2));
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.tile:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: var(--radius);
}

/* The frame shows the project's cover, cropped from the bottom like its hero, on the hero's
   color (--tile-bg on the tile) */
.tile__frame {
  display: block;
  height: calc(var(--tile-rows) * var(--row) + (var(--tile-rows) - 1) * var(--gap));
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--tile-bg, var(--color-placeholder));
}

.tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--tile-focus, 50% 100%);
}

/* The name sits under the tile at the tile's width (wrapping if it must), in the space
   captions use: dimmed at rest, full on hover */
.tile__label {
  display: block;
  margin-top: calc(var(--caption-under-gap-bl) * var(--baseline));
  opacity: var(--tile-label-dim);
}

.tile:is(:hover, :focus-visible) .tile__label {
  opacity: 1;
}

/* The lock (functions/_middleware.js): on the live site, without the password the Projects
   section isn't there at all. The byline's "problems that are worth solving" is the way in: it
   reads as text until hovered, when its underline draws in; clicking it opens a small dialog
   for the password. With the password (or locally) the same phrase just scrolls to the
   projects. The dialog is the page's colors on a dimmed page. */

.home__byline .gate__open {
  text-decoration-line: none;
}

.home__byline .gate__open:is(:hover, :focus-visible) {
  text-decoration-line: underline;
}

@media (prefers-reduced-motion: no-preference) {
  .home__byline .gate__open {
    background-size: 0 1px;
    transition: background-size 400ms var(--motion-ease);
  }

  .home__byline .gate__open:is(:hover, :focus-visible) {
    text-decoration-line: none;
    background-size: 100% 1px;
    animation: none; /* not the redraw: this one just draws in */
  }
}

.gate__dialog {
  width: calc(3 * var(--grid-col) + 2 * var(--grid-gutter));
  max-width: calc(100vw - 2 * var(--grid-margin));
  padding: calc(4 * var(--baseline));
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius);
  color: var(--color-ink);
  background: var(--color-backdrop);
  box-shadow: 0 18px 54px color-mix(in oklab, var(--color-ink) 25%, transparent);
}

.gate__dialog::backdrop {
  background: color-mix(in oklab, var(--color-ink) 40%, transparent);
}

.gate__form {
  display: grid;
  gap: calc(2 * var(--baseline));
}

.gate__label {
  margin: 0;
}

.gate__input,
.gate__button,
.gate__cancel {
  height: calc(var(--circle-bl) * var(--baseline));
  padding: 0 calc(var(--baseline) * 1.5);
  box-sizing: border-box;
  font: inherit;
  letter-spacing: inherit;
  border-radius: var(--radius);
}

.gate__input {
  width: 100%;
  min-width: 0;
  color: var(--color-ink);
  background: color-mix(in oklab, var(--color-ink) 8%, var(--color-backdrop));
  border: 1px solid color-mix(in oklab, var(--color-ink) 35%, transparent);
}

.gate__input::placeholder {
  color: color-mix(in oklab, var(--color-ink) 50%, var(--color-backdrop));
}

.gate__actions {
  display: flex;
  gap: var(--baseline);
}

.gate__button {
  color: var(--color-backdrop);
  background: var(--color-ink);
  border: 0;
  cursor: pointer;
}

.gate__cancel {
  color: var(--color-ink);
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--color-ink) 35%, transparent);
  cursor: pointer;
}

.gate__input:focus-visible,
.gate__button:focus-visible,
.gate__cancel:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Experience: each role is a row across the page grid (subgrid), the three-line stack in the
   text column and a line about the work beside it from column 5; stacked layouts put the line
   under the stack. Hairlines between rows, in the ink at low opacity. */

.exp {
  display: grid;
  grid-template-columns: subgrid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.exp__entry {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  row-gap: calc(var(--exp-gap-bl) * var(--baseline));
  padding-block: calc(var(--exp-pad-bl) * var(--baseline));
}

.exp__entry + .exp__entry {
  border-top: 1px solid color-mix(in oklab, var(--color-ink) var(--exp-rule), transparent);
  /* the rule sits on the baseline grid: give back its pixel */
  padding-top: calc(var(--exp-pad-bl) * var(--baseline) - 1px);
}

.exp__role,
.exp__note {
  grid-column: 1 / -1;
}

.exp__org {
  color: var(--color-ink);
}

.exp__when {
  color: var(--color-muted);
}

[data-layout~="side"] .exp__role {
  grid-column: 1 / span 3;
}

[data-layout~="side"] .exp__note {
  grid-column: 5 / span 4;
}

/* Contact: round links in the key color */

.circles {
  display: flex;
  gap: calc(var(--gap) / 2);
}

.circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--circle-bl) * var(--baseline));
  height: calc(var(--circle-bl) * var(--baseline));
  border-radius: 50%;
  background: var(--color-key);
  color: var(--color-ink);
  text-decoration: none;
}

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

.circle svg {
  width: 44%;
  height: 44%;
}

.circle__in {
  font: 900 calc(var(--circle-bl) * var(--baseline) * 0.42) / 1 var(--font-styrene);
  letter-spacing: -0.02em;
}