/* ==========================================================================
   petekimmel.com

   Type and color come from The Forge, not from anything invented here.
   Fonts: /fonts.css is copied verbatim from perception-workshop/shared/fonts.css
   Tokens below mirror perception-workshop/shared/tokens.css exactly.

   Note --p-white is #F5F5F5, not pure white, and muted is #888888. Both are
   documented values. Earlier versions of this page used #FFFFFF and an
   invented #B3B3B3.

   CONTRAST against --p-black, measured:
     white #F5F5F5   17.71  ok
     gray  #888888    5.45  ok
     red   #E5223B    4.25  fails, so red never carries text
     blue  #0359A7    2.75  fails, same
   Red and blue appear only as the cast shadow, which holds no information.
   ========================================================================== */

:root {
  /* Brand colors, PM Brand Guidelines v5, via The Forge tokens.css */
  --p-red: #e5223b;
  --p-blue: #0359a7;
  --p-black: #0e0e0e;
  --p-gray-light: #888888;
  --p-white: #f5f5f5;

  --font-headline: 'Monument Extended', 'Arial Black', sans-serif;
  --font-body: 'HN LT Pro', 'Helvetica Neue', Arial, sans-serif;

  /* How much black sits on the video. Higher hides more. */
  --veil: 0.82;

  /* Cast-shadow offset, em so it tracks the name's size at every breakpoint. */
  --sx: 0.018em;
  --sy: 0.014em;

  --edge: clamp(1.25rem, 4.5vw, 3.5rem);
}

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

html {
  background: var(--p-black);
}

body {
  margin: 0;
  background: var(--p-black);
  color: var(--p-white);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------- background */

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--p-black);
}

.bg__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.6;
}

.bg__veil {
  position: absolute;
  inset: 0;
  background: rgb(14 14 14 / var(--veil));
}

/* ------------------------------------------------------------------ frame */

.frame {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  padding: var(--edge);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(1.5rem, 5vh, 3rem);
}

.bar {
  display: flex;
  align-items: center;
}

.mark {
  display: inline-flex;
  line-height: 0;
}
.mark img {
  width: clamp(38px, 5vw, 52px);
  height: auto;
  display: block;
}

/* ----------------------------------------------------------------- stage */

.stage {
  align-self: center;
  justify-self: center;
  width: 100%;
  text-align: center;
}

/* The name throws a red shadow and a blue shadow in opposite directions from
   one light source. Move the light and they separate; centre it and they
   collapse and the name reads clean. Held to a thin chromatic edge here
   rather than a hard offset, so it reads as an artifact of light. */
.name {
  margin: 0;
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: clamp(2.5rem, 11vw, 8.5rem);
  line-height: 0.9;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-shadow:
    var(--sx) var(--sy) 0 var(--p-red),
    calc(var(--sx) * -1) calc(var(--sy) * -1) 0 var(--p-blue);
}

.name__line {
  display: block;
}

/* HN LT Pro 300. The hairline weights are the point of this stack, and the
   contrast against Monument 900 is where the type system lives. */
.role {
  margin: clamp(1.25rem, 3.5vh, 2rem) 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.875rem, 1.2vw, 1.0625rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--p-gray-light);
}

/* ---------------------------------------------------------------- footer */

.foot {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  text-align: right;
}

.link {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--p-white);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.18s ease;
}
.link:hover,
.link:focus-visible {
  border-bottom-color: var(--p-white);
}

/* ------------------------------------------------------------------- a11y */

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

@media (prefers-reduced-motion: reduce) {
  .link {
    transition: none;
  }
}

/* Coarse pointers have no cursor to drive the light. */
@media (hover: none) {
  .name {
    --sx: 0.016em;
    --sy: 0.012em;
  }
}