/* Prototype components. All values come from ../../02-design-system/tokens.css. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Header: fixed on every page, always white. Wordmark in the top-left corner (inner pages) and nav in
   the top-right, their cap-tops lined up one page margin from the top. The header lets clicks through its
   empty space. */
.site-header {
  position: fixed;
  z-index: 10;
  inset: 0 0 auto 0;
  pointer-events: none;
}
.site-header a { pointer-events: auto; }

.wordmark {
  display: block;
  margin: 0;
  font-family: var(--font-brand);
  font-weight: var(--weight-wordmark);
  line-height: var(--leading-wordmark);
  letter-spacing: var(--tracking-wordmark);
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}
.wordmark--inner {
  position: absolute;
  top: var(--space-margin);   /* lines up with the nav */
  left: var(--space-margin);
  font-size: var(--text-wordmark-inner);
}
.wordmark--home { font-size: var(--text-wordmark-home); }

.site-nav {
  position: absolute;
  top: var(--space-margin);
  right: var(--space-margin);
  display: flex;
  gap: var(--nav-gap);
  font-size: var(--text-nav);
  font-weight: var(--weight-nav);
  line-height: 1;
}
.site-nav a { text-box: trim-both cap alphabetic; }   /* cap tops sit exactly one margin from the top */

.site-nav a[aria-current="page"] { color: var(--color-text-hover); }   /* hover is grey too (global link rule) */

/* ---- Home: full-viewport reel, wordmark centred (after esdevlin.com) */
.hero {
  position: relative;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;   /* each player fades in once it is actually showing the reel (home.js adds .is-on) */
  transition: opacity 0.5s ease;
}
.hero video.is-on { opacity: 1; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-hero);
}
.hero .wordmark {
  position: relative;
  z-index: 1;
  padding: 0 var(--space-margin);
}

/* ---- Work: masonry of photo carousels and films; three columns (one on phones), wide tiles span two */
.work-page { padding: var(--content-top) var(--space-margin) var(--space-margin); }

.gallery {   /* work.js places the tiles (three columns, one on phones; wide tiles span two) */
  position: relative;
  column-gap: var(--space-gallery-gutter);   /* read by work.js as the gutter, and the step of its height grid */
}
.gallery > .tile { position: absolute; top: 0; left: 0; }

.tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--color-bg);
}
.tile__stage {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  -webkit-tap-highlight-color: transparent;
}
button.tile__stage { cursor: pointer; }

.tile__track {
  display: flex;
  height: 100%;
  transition: transform var(--dur-slide) var(--ease-slide);
}
.tile__track img {
  flex: 0 0 100%;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;   /* hidden until loaded: no broken-image icon or alt text while loading */
  transition: opacity var(--dur-fade) ease;
}
.tile__track img.is-loaded { opacity: 1; }

/* The project's name: white, no tint; shown for 1s when the pointer arrives, on a tap, or on keyboard focus (work.js adds .is-titled) */
.tile__title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12%;
  text-align: center;
  text-wrap: balance;
  font-family: var(--font-brand);
  font-weight: var(--weight-tile-title);
  font-size: var(--text-tile-title);
  line-height: var(--leading-tile-title);
  letter-spacing: var(--tracking-tile-title);
  color: var(--color-text);
  opacity: 0;
  transition: opacity var(--dur-title) ease;
  pointer-events: none;
}
.tile.is-titled .tile__title { opacity: 1; }

.tile__stage:focus-visible { outline: none; }
.tile__stage:focus-visible::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--color-text);
  pointer-events: none;
}

/* ---- Film tile: plays in colour, muted; hover (tap on touch screens) brings in the sound */
.tile--film { cursor: default; }
.tile--film video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tile--film.needs-click { cursor: pointer; }

.tile__hint {   /* only while the browser is still holding back sound */
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: var(--text-caption);
  line-height: 1;
  color: var(--color-text);
  opacity: 0;
  transition: opacity var(--dur-title) ease;
  pointer-events: none;
}
.tile--film.needs-click .tile__hint { opacity: 1; }

.tile--film:focus-visible { outline: none; }
.tile--film:focus-visible::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--color-text);
  pointer-events: none;
}

/* ---- About: one text column at the top of the page, under the wordmark. Its first cap-top sits where the Work
   gallery starts (--content-top) and its left edge one margin in. */
.about {
  padding: var(--content-top) var(--space-margin) var(--space-margin);
}
.about__text {
  max-width: var(--width-about);
  text-wrap: pretty;                     /* no one-word last lines */
  text-box: trim-both cap alphabetic;    /* the first cap-top and the last baseline land exactly on the edges */
}
.about__text p { margin: 0; }
.about__text p + p { margin-top: var(--paragraph-gap); }   /* one blank line, as on the reference */

/* ---- Contact: the address and a big copy button, centred like the home wordmark */
.contact {
  box-sizing: border-box;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--content-top) var(--space-margin);
}
.contact__block {
  display: inline-grid;   /* the button stretches to the width of the address */
  gap: var(--space-gutter);
  text-align: center;
}
.contact__email {
  font-size: var(--text-contact);
  line-height: 1;
  letter-spacing: 0.02em;
  text-box: trim-both cap alphabetic;
}
/* A rounded 3D key: its grey side shows below the white face, and it sinks when pressed */
.contact__copy {
  appearance: none;
  margin: 0 0 var(--depth-button);   /* room for the side, so the block stays centred */
  padding: 1.15em 2em;
  border: 0;
  border-radius: var(--radius-button);
  background: var(--color-text);
  color: var(--color-bg);
  box-shadow: 0 var(--depth-button) 0 var(--color-button-side);
  font: inherit;
  font-size: var(--text-button);
  font-weight: var(--weight-nav);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, background-color var(--dur-link);
}
.contact__copy:hover { background: #e9e9e9; }
.contact__copy:active,
.contact__copy.is-pressed {
  transform: translateY(calc(var(--depth-button) - 0.1em));
  box-shadow: 0 0.1em 0 var(--color-button-side);
}
.contact__copy:focus-visible { outline: 1px solid var(--color-text); outline-offset: 6px; }
/* Instagram: a quiet link under the key, in the nav's voice (grey on hover, like every link) */
.contact__social {
  justify-self: center;
  font-size: var(--text-nav);
  font-weight: var(--weight-nav);
  line-height: 1;
  letter-spacing: 0.06em;
  text-box: trim-both cap alphabetic;
}