/* ============================================================
   Erick Ramirez — portfolio v1
   Palette (fixed):  #F2F2F2  #EAE4D5  #B6B09F  #000000
   #B6B09F is ~1.9:1 on #F2F2F2, so it is used for rules and
   marks only. Secondary text uses #5C574A — the same hue at a
   lower value — for ~6:1 contrast.
   ============================================================ */

:root {
  --paper:    #F2F2F2;
  --linen:    #EAE4D5;
  --stone:    #B6B09F;
  --ink:      #000000;
  --ink-soft: #5C574A;

  --rule:       rgba(182, 176, 159, .55);
  --rule-firm:  rgba(182, 176, 159, .9);

  --font-display: "Cormorant", Perpetua, "Palatino Linotype", Palatino, Georgia, serif;
  --font-body:    "Archivo", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 1180px;

  --bay: clamp(5rem, 12vw, 11rem);   /* vertical rhythm between sections */
  --ease: cubic-bezier(.2, .7, .3, 1);

  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2 { margin: 0; font-weight: 400; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

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

.wrap {
  width: min(var(--measure), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: .8rem;
}
.skip:focus { left: 1rem; top: 1rem; }

.label {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.mark {
  display: inline-block;
  font-family: var(--font-mono);
  transition: transform .45s var(--ease);
}

/* ---------------------------------------------------------- masthead */

.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgba(242, 242, 242, .82);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--rule);
}

.masthead__inner {
  width: min(var(--measure), 100%);
  margin-inline: auto;
  padding: .95rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3.2vw, 2.25rem);
  font-size: .9rem;
}

.nav a {
  position: relative;
  padding-block: .2rem;
  color: var(--ink-soft);
  transition: color .3s var(--ease);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}

.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.nav__ext:hover .mark { transform: translate(2px, -2px); }

/* ---------------------------------------------------------- hero */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  padding-block: clamp(8rem, 18vh, 12rem) var(--bay);
}

/* Poster sits on the media layer itself, so there is never a frame of
   black: the still is painted before the video element does anything. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;   /* clip the video, never the type */
  background: var(--paper) url("assets/video/hero-poster.jpg") center / cover no-repeat;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 1.4s ease;
}

/* only revealed once the video is actually playing */
.hero__video.is-playing { opacity: 1; }

/* Footage averages ~123/255 luma, so the scrim is heavy where the type
   sits and lighter up top where there is nothing to read. The last stop
   is opaque paper, so the hero dissolves into the page with no seam. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(0deg, rgba(234, 228, 213, .38) 0%, rgba(234, 228, 213, 0) 55%),
    linear-gradient(180deg,
      rgba(242, 242, 242, .56) 0%,
      rgba(242, 242, 242, .74) 45%,
      rgba(242, 242, 242, .90) 82%,
      rgba(242, 242, 242, 1) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
}

.hero__name {
  font-family: var(--font-display);
  font-weight: 600;
  /* Cormorant has a small x-height, so it needs more px than a
     grotesque to read at the same optical size. */
  font-size: clamp(3.5rem, 13vw, 9.75rem);
  /* Never below the font's own ascent+descent box — 1.21em for
     Cormorant — or the extenders spill out of their line box. */
  line-height: 1.22;
  letter-spacing: -.01em;
}

.hero__bio {
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--rule-firm);
  max-width: 30ch;
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------- projects */

.projects {
  padding-block: var(--bay);
  scroll-margin-top: clamp(5.5rem, 10vh, 7.5rem);
}

.work { border-top: 1px solid var(--rule); }

.work__item { border-bottom: 1px solid var(--rule); }

.work__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .85rem 2.5rem;
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  transition: padding-inline .5s var(--ease), background-color .5s var(--ease);
}

.work__title {
  grid-column: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.15rem, 1.3rem + 3.5vw, 3.75rem);
  /* Was 1.05 — shorter than the font box, which crowded the dot on the
     "j" and the tail on the "g" against the rule above and the note
     below. Keep this above ~1.2 for any display face used here. */
  line-height: 1.32;
  letter-spacing: 0;
  /* The "J" hook inks ~.05em left of its box. Safari doesn't repaint ink
     outside the box when the row's padding animates, leaving a ghost dot.
     Widen the box over the hook; the negative margin keeps the glyph put. */
  padding-left: .1em;
  margin-left: -.1em;
}

.work__meta {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.work__note {
  grid-column: 1 / -1;
  font-size: .9rem;
  color: var(--ink-soft);
  font-style: italic;
}

.work__link:hover,
.work__link:focus-visible {
  background-color: var(--linen);
  padding-inline: clamp(1rem, 2.5vw, 1.75rem);
}
.work__link:hover .mark,
.work__link:focus-visible .mark { transform: translate(3px, -3px); }

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

.foot {
  border-top: 1px solid var(--rule);
  padding-block: 2.5rem 3rem;
}

.foot__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--ink-soft);
}

.foot a { transition: color .3s var(--ease); }
.foot a:hover { color: var(--ink); }
.foot a:hover .mark { transform: translate(2px, -2px); }

/* ---------------------------------------------------------- breakpoints */

@media (max-width: 640px) {
  .masthead__inner { padding-block: .8rem; }
  .nav { gap: 1.25rem; font-size: .85rem; }
  .brand { font-size: .68rem; letter-spacing: .14em; }

  .hero {
    min-height: 80svh;
    padding-block: 7rem 4.5rem;
  }

  .work__link {
    grid-template-columns: 1fr;
    gap: .5rem;
  }
  .work__title,
  .work__meta,
  .work__note { grid-column: 1; }
  .work__meta {
    white-space: normal;
    overflow-wrap: anywhere;
    order: 3;
  }
  .work__note { order: 2; }
}

@media (max-width: 380px) {
  .nav { gap: .9rem; }
  .nav__ext .mark { display: none; }
}

/* ---------------------------------------------------------- motion */

.load {
  opacity: 0;
  transform: translateY(14px);
  animation: rise .9s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}

@keyframes rise {
  to { opacity: 1; transform: none; }
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .load,
  .reveal {
    opacity: 1;
    transform: none;
  }

  /* the poster on .hero__media stays; the video never loads */
  .hero__video { display: none; }
}