/* ==========================================================================
   The site (index.html, js/h.js, js/h-home.js).

     - the project blocks are white; red under the pointer
     - one even scroll down the whole page: no snapping, and no list scrolling
       inside a section. The rows simply pass, beside the world in its frame
     - the homepage (Field) is at the end of this file, before the phone rules

   Markup comes from js/h.js.
   ========================================================================== */

html:has(body.s) {
  scrollbar-gutter: stable;
}

html.is-locked {
  overflow: hidden;
}

body.s {
  --bar: 52px;
  --side-w: 44vw; /* the rows' side */
  --gap: 22px; /* around the world's frame */
  --white: #fff;
  --move: 0.65s;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

.s-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--bar);
  padding: 0 18px;
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  font-size: 13px;
}

.s-name {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.s-header nav {
  display: flex;
  gap: clamp(14px, 2.4vw, 30px);
}

.s-header a:hover,
.s-header a[aria-current] {
  color: var(--red);
}

.s-label {
  display: inline-block;
  margin: 0;
  color: var(--red);
  font-size: 12px;
  font-weight: 400;
}

/* ---------------------------------------------------------------- screens */

.s-screen {
  position: relative;
  z-index: 1;
}

/* The homepage: one screen, lying over the world until it is scrolled away. */
.s-intro {
  height: 100vh;
  height: 100svh;
  min-height: 480px;
  padding-top: var(--bar);
  overflow: hidden;
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}

.s-sec {
  width: var(--side-w);
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--bar);
}

/* A section's title stays under the bar while its rows pass. */
.s-head {
  position: sticky;
  top: var(--bar);
  z-index: 3;
  padding: 14px 18px 16px;
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}

.s-head__title {
  font-size: clamp(36px, 4.6vw, 80px);
  letter-spacing: -0.03em;
  line-height: 0.95;
}

.s-head__meta {
  padding-top: 4px;
  font-size: 13px;
}

.s-head > * {
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.s-head:not(.is-in) > * {
  opacity: 0;
  transform: translateY(12px);
}

/* ---------------------------------------------------------------- the rows */

/* Each project is a white block the full width of the side. They keep one
   height, so nothing moves under the pointer and the scroll stays even. Each
   slides in from the left the first time it comes into view. */
.s-tower {
  position: relative;
  display: block;
  height: clamp(150px, 24vh, 236px);
  overflow: hidden;
  border-bottom: 1px solid var(--ink);
}

.s-tower__in {
  position: absolute;
  inset: 0;
  background: var(--white);
  transition: transform var(--move) var(--ease) calc(var(--k, 0) * 70ms), background 0.25s var(--ease), color 0.25s var(--ease);
}

.s-tower:not(.is-in) .s-tower__in {
  transform: translateX(-101%);
}

.s-tower__num {
  position: absolute;
  left: 18px;
  top: 12px;
  color: var(--red);
  font-size: 13px;
}

.s-tower__title {
  position: absolute;
  left: 16px;
  top: 50%;
  font-size: clamp(38px, 5.2vw, 92px);
  letter-spacing: -0.025em;
  line-height: 0.9;
  white-space: nowrap;
  transform: translateY(-50%);
}

.s-tower__meta {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 12px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.s-tower.is-hot .s-tower__in,
.s-tower.is-active .s-tower__in,
.s-tower:focus-visible .s-tower__in {
  background: var(--red);
  color: #fff;
}

.s-tower.is-hot .s-tower__num,
.s-tower.is-active .s-tower__num,
.s-tower:focus-visible .s-tower__num {
  color: inherit;
}

.s-tower:focus-visible {
  outline-offset: -4px;
}

/* ---------------------------------------------------------------- the world */

/* One frame, fixed beside the rows. The homepage and About pass over it. */
.s-world {
  position: fixed;
  top: calc(var(--bar) + var(--gap));
  bottom: var(--gap);
  left: calc(var(--side-w) + var(--gap));
  z-index: 0;
  width: calc(100vw - var(--side-w) - 4 * var(--gap));
  border: 1px solid var(--ink);
  background: var(--paper);
  transition: opacity 0.5s var(--ease);
}

.s-world canvas {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.s-world canvas.is-on {
  opacity: 1;
  pointer-events: auto;
}

/* Changing worlds (sweep() in js/h.js): the new one lies over the old and is uncovered
   along a line of red type, drawn on a canvas of its own. */
.s-world canvas.is-coming {
  z-index: 1;
}

.s-world canvas.s-sweep {
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 1;
}

.s-world__tag {
  position: absolute;
  z-index: 3;
  left: 14px;
  bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 3px 8px 4px;
  background: var(--paper);
  color: var(--grey);
  font-size: 12px;
}

.s-world__tag span:first-child {
  color: var(--red);
}

.s-world__tag a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The cover of the project being pointed at, in the corner of the frame. */
.s-plate {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  width: clamp(170px, 17vw, 290px);
  margin: 0;
  border: 1px solid var(--ink);
  background: var(--white);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.3s var(--ease), transform 0.45s var(--ease);
  pointer-events: none;
}

.s-plate.is-on {
  opacity: 1;
  transform: none;
}

.s-plate img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--soft);
}

.s-plate figcaption {
  display: flex;
  gap: 10px;
  padding: 6px 9px 7px;
  border-top: 1px solid var(--ink);
  font-size: 12px;
  line-height: 1.3;
}

.s-plate b {
  color: var(--red);
  font-weight: 400;
}

.no-world .s-world {
  display: none;
}

/* ------------------------------------------------------------ indicators */

.s-rail {
  position: fixed;
  right: 12px;
  top: 50%;
  z-index: 25;
  display: grid;
  justify-items: end;
  gap: 3px;
  font-size: 11px;
  transform: translateY(-50%);
  transition: opacity 0.4s var(--ease), visibility 0s;
}

/* The homepage has its own doors; the indicators come in with the first section. */
body[data-at="index"] .s-rail {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0s 0.4s;
}

.s-rail a,
.s-rail button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border: 1px solid var(--ink);
  background: var(--paper);
}

.s-rail i {
  font-family: system-ui, sans-serif;
  font-style: normal;
}

.s-rail a[aria-current],
.s-rail a:hover,
.s-rail button:hover {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.s-rail button:disabled {
  visibility: hidden;
}

.s-rail button span:empty,
body[data-at="about"] .s-rail button span {
  display: none; /* on About the label would lie over the text */
}

/* The wave of red type that carries a jump from one part of the page to another
   (wave() in js/h.js). It lies over everything but the page-load curtain. */
.s-wave {
  position: fixed;
  inset: 0;
  z-index: 900;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------- a project's page */

/* A project has the whole window below the bar to itself. It appears and goes at once,
   under the wave (open() and close() in js/h.js). */
.s-panel {
  position: fixed;
  inset: var(--bar) 0 0 0;
  z-index: 20;
  overflow-y: auto;
  background: var(--paper);
  visibility: hidden;
}

.s-panel.is-open {
  visibility: visible;
}

/* The indicators belong to the scroll underneath. */
html.is-locked .s-rail {
  visibility: hidden;
}

.s-panel__in {
  padding: 18px 18px 80px;
  animation: s-in 0.6s var(--ease) backwards;
}

/* What it is, beside the facts. */
.s-pintro {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  gap: clamp(24px, 5vw, 96px);
}

.s-pintro .s-facts {
  margin-top: 0;
}

@keyframes s-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

.s-close {
  position: sticky;
  top: 12px;
  z-index: 2;
  float: right;
  padding: 5px 12px 6px;
  border: 1px solid var(--ink);
  background: var(--paper);
  font-size: 12px;
}

.s-close:hover {
  background: var(--ink);
  color: var(--paper);
}

.s-kicker {
  display: flex;
  gap: 14px;
  padding: 6px 0 clamp(16px, 3vw, 40px);
  font-size: 13px;
}

.s-kicker b {
  color: var(--red);
  font-weight: 400;
}

.s-ptitle {
  padding-bottom: clamp(22px, 4vw, 64px);
  font-size: clamp(48px, 10.5vw, 210px);
  letter-spacing: -0.035em;
  line-height: 0.88;
  text-wrap: balance;
}

.s-text {
  max-width: 34em;
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.42;
}

.s-pintro .s-text {
  font-size: clamp(18px, 1.9vw, 30px);
  line-height: 1.3;
}

.s-text p + p {
  margin-top: 0.85em;
}

.s-facts {
  margin: 22px 0 0;
  border-bottom: 1px solid var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.s-facts div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  padding: 7px 0 8px;
  border-top: 1px solid var(--ink);
}

.s-facts dt {
  color: var(--red);
}

.s-facts dd {
  margin: 0;
}

.s-facts a:hover {
  color: var(--red);
}

.s-figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px) 18px;
  margin-top: clamp(32px, 6vw, 96px);
}

/* A photographic series is a board of pictures, three across. */
.s-figs--board {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.s-fig {
  grid-column: 1 / -1;
  margin: 0;
}

.s-fig--half {
  grid-column: span 1;
}

.s-fig button {
  display: block;
  width: 100%;
  background: var(--soft);
  cursor: zoom-in;
}

.s-fig img {
  width: 100%;
  height: auto;
}

.s-fig figcaption {
  display: flex;
  gap: 12px;
  padding-top: 8px;
  font-size: 12px;
}

.s-fig figcaption b {
  color: var(--red);
  font-weight: 400;
}

.s-nextp {
  display: block;
  width: 100%;
  margin-top: 40px;
  padding: 10px 0 0;
  border-top: 1.5px solid var(--ink);
  text-align: left;
}

.s-nextp small {
  display: block;
  padding-bottom: 4px;
  color: var(--red);
  font-size: 13px;
}

.s-nextp strong {
  font-size: clamp(32px, 4.4vw, 72px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1;
}

.s-nextp:hover strong {
  color: var(--red);
}

/* ------------------------------------------------------------------ about */

.s-about {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr);
  grid-template-rows: 1fr auto;
  gap: 0 clamp(20px, 3vw, 48px);
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--bar) + 18px) 56px 14px 18px;
  border-top: 1px solid var(--ink);
  background: var(--paper);
}

.s-about > * {
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.s-about > :nth-child(2) {
  transition-delay: 0.1s;
}

.s-about > :nth-child(3) {
  transition-delay: 0.2s;
}

.s-about:not(.is-in) > * {
  opacity: 0;
  transform: translateY(28px);
}

.s-about__portrait {
  max-width: 260px;
  margin-top: 18px;
  background: var(--soft);
}

.s-about__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.s-lead {
  padding-bottom: 18px;
  font-size: clamp(22px, 2.6vw, 40px);
  letter-spacing: -0.015em;
  line-height: 1.12;
  text-wrap: balance;
}

.s-about__cv .s-label {
  margin-top: 18px;
  padding-bottom: 6px;
}

.s-about__cv .s-label:first-child {
  margin-top: 0;
}

.s-about__cv .s-facts {
  margin-top: 0;
}

/* What a job involved, under its line. */
.s-notes {
  margin: 6px 0 2px;
  padding: 0 0 0 1.1em;
  color: var(--grey);
  list-style: "– ";
}

.s-notes li + li {
  margin-top: 3px;
}

.s-facts div.is-wide {
  display: block;
}

.s-foot {
  grid-column: 1 / -1;
  padding-top: 14px;
  font-size: 12px;
}

/* ---------------------------------------------------------- the homepage: Field */

.h-stage {
  position: relative;
  height: 100%;
}

.h-field canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.h-field__doors {
  position: absolute;
  inset: 0;
  display: grid;
  grid-auto-rows: 1fr;
}

.h-field__doors a {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 10px 18px;
  font-size: 12px;
}

.h-field__doors a + a {
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}

.h-field__doors small {
  color: var(--red);
  font-size: 12px;
}

.h-field__doors a:focus-visible {
  outline-offset: -4px;
}

/* ------------------------------------------------------------------ phones */

@media (max-width: 760px) {
  body.s {
    --side-w: 100vw;
    --top: 34vh; /* the world's strip across the top */
  }


  .s-header {
    padding: 0 14px;
  }

  .s-header nav {
    gap: 12px;
  }

  /* The world is a strip under the bar, shown only beside its section. */
  .s-world {
    top: var(--bar);
    bottom: auto;
    left: 0;
    z-index: 2;
    width: 100vw;
    height: var(--top);
    border: 0;
    border-bottom: 1px solid var(--ink);
    opacity: 0;
    pointer-events: none;
  }

  body[data-at="architecture"] .s-world,
  body[data-at="photography"] .s-world {
    opacity: 1;
    pointer-events: auto;
  }

  .s-plate {
    display: none;
  }

  .s-sec {
    padding-top: calc(var(--bar) + var(--top));
  }

  .s-head {
    top: calc(var(--bar) + var(--top));
    padding: 8px 14px 10px;
  }

  .s-tower {
    height: 112px;
  }

  .s-tower__title {
    left: 14px;
    font-size: clamp(26px, 8.6vw, 46px);
  }

  .s-tower__num,
  .s-tower__meta {
    left: 14px;
  }

  .s-rail {
    top: auto;
    right: 8px;
    bottom: 8px;
    transform: none;
  }

  .s-rail button span {
    display: none;
  }

  /* About is a page of text the full width: the indicators would lie over it. */
  body[data-at="about"] .s-rail {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--ease), visibility 0s 0.4s;
  }

  .s-panel__in {
    padding: 14px 14px 70px;
  }

  .s-pintro {
    display: block;
  }

  .s-pintro .s-facts {
    margin-top: 22px;
  }

  .s-figs--board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s-about {
    display: block;
    padding: calc(var(--bar) + 16px) 14px 60px;
  }

  .s-about__main,
  .s-about__cv {
    margin-top: 24px;
  }
}