/*
 * eric-patton.dev: page layout only.
 *
 * Everything reusable lives in design-system/, because RequestDesk imports those three files
 * unchanged. If a rule in here starts to look like a component, move it up.
 */

/* ---- Brand mark --------------------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ep-space-2xs);
  color: var(--ep-ink);
  text-decoration: none;
}

.brand b {
  font-family: var(--ep-font-display);
  font-size: 1rem;
  font-weight: var(--ep-weight-bold);
  letter-spacing: var(--ep-tracking-tight);
}

.brand__glyph {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 7px;
  background: linear-gradient(140deg, var(--ep-accent), var(--ep-accent-hot) 55%, var(--ep-accent-deep));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ep-accent) 35%, transparent),
    0 6px 18px -6px color-mix(in srgb, var(--ep-accent-hot) 75%, transparent);
}

/* ---- Masthead ------------------------------------------------------------------------------ */

.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  /* Built from the ground token rather than a literal, so the translucent bar follows the theme
     instead of staying dark over a light page. */
  background: color-mix(in srgb, var(--ep-bg) 66%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition:
    border-color var(--ep-duration) var(--ep-ease),
    background-color var(--ep-duration) var(--ep-ease);
}

.masthead.is-stuck {
  background: color-mix(in srgb, var(--ep-bg) 92%, transparent);
  border-bottom-color: var(--ep-line);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ep-space-md);
  padding-block: 0.875rem;
}

.masthead__links {
  display: flex;
  align-items: center;
  gap: var(--ep-space-md);
  font-size: var(--ep-text-small);
}

/* The theme control sits tighter to the GitHub button than the nav links do to each other. */
.masthead__links .ep-theme-toggle {
  margin-left: calc(var(--ep-space-md) * -0.4);
}

.masthead__links > a:not(.ep-btn) {
  color: var(--ep-ink-2);
  text-decoration: none;
  transition: color var(--ep-duration-fast) var(--ep-ease);
}

.masthead__links > a:not(.ep-btn):hover {
  color: var(--ep-ink);
}

/* On a narrow screen the section anchors go and the GitHub button stays, because it is the only
   link that leaves the page. */
@media (max-width: 38rem) {
  .masthead__links > a:not(.ep-btn) {
    display: none;
  }
}

/* ---- Hero ----------------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: 11rem 0 4.5rem;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: -12% -5% auto -5%;
  height: 116%;
  background-image: url("/assets/gen/hero.jpg?v=688254af2e");
  background-size: cover;
  background-position: 50% 42%;
  opacity: var(--ep-art-opacity);
  mix-blend-mode: var(--ep-art-blend);
  will-change: transform;
}

/* Two scrims: a radial one to sink the top-left where the headline sits, and a linear one to
   land the image on the page background before the content below starts. */
.hero__scrim {
  position: absolute;
  inset: 0;
  /* Every stop is the ground colour at a different transparency, so one token change re-tints
     the whole scrim and the artwork lands on the page background in either theme. */
  background:
    radial-gradient(
      120% 85% at 12% 18%,
      color-mix(in srgb, var(--ep-bg) 15%, transparent) 0%,
      color-mix(in srgb, var(--ep-bg) 86%, transparent) 58%,
      var(--ep-bg) 100%
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--ep-bg) 50%, transparent) 0%,
      color-mix(in srgb, var(--ep-bg) 20%, transparent) 40%,
      var(--ep-bg) 96%
    );
}

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

.hero__headline {
  margin-top: var(--ep-space-md);
  max-width: 16ch;
}

.hero__lede {
  margin-top: var(--ep-space-md);
  max-width: 56ch;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ep-space-xs);
  margin-top: var(--ep-space-lg);
}

.stack-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ep-space-xs) var(--ep-space-lg);
  margin-top: var(--ep-space-2xl);
  padding-top: var(--ep-space-md);
  border-top: 1px solid var(--ep-line);
  font-size: var(--ep-text-small);
  font-weight: var(--ep-weight-medium);
  color: var(--ep-ink-2);
}

/* ---- Sections -------------------------------------------------------------------------------- */

/* The stack strip already reads as a divider, so the first section does not need a full
   section's worth of air above it as well. */
#work {
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
}

.section-head {
  margin-bottom: var(--ep-space-2xl);
  max-width: 60ch;
}

.section-head .ep-mono {
  display: block;
  margin-bottom: var(--ep-space-sm);
}

.section-head .ep-lede {
  margin-top: var(--ep-space-sm);
  font-size: var(--ep-text-body);
}

/* ---- Showcase ---------------------------------------------------------------------------------- */

.showcase {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  border: 1px solid var(--ep-line);
  border-radius: var(--ep-radius-lg);
  background:
    radial-gradient(90% 130% at 88% 0%, color-mix(in srgb, var(--ep-ice) 10%, transparent), transparent 62%),
    linear-gradient(160deg, var(--ep-surface), var(--ep-bg-raised));
  overflow: hidden;
}

.showcase__title {
  margin-top: var(--ep-space-2xs);
}

.showcase .ep-prose {
  margin-top: var(--ep-space-sm);
}

/* Tilted just enough to suggest a screen sitting in space, and straightening on hover so the
   detail becomes readable if somebody actually wants to look at it. */
.showcase__frame {
  transform: perspective(1600px) rotateY(-7deg) rotateX(2deg);
  transition: transform var(--ep-duration-slow) var(--ep-ease-out);
}

.showcase:hover .showcase__frame {
  transform: perspective(1600px) rotateY(-3deg) rotateX(1deg) translateY(-6px);
}

/* The second showcase mirrors the first: image on the left, text on the right. Two identical
   blocks stacked read as a repeated template; alternating them reads as a spread. */
.showcase--second {
  margin-top: var(--ep-space-sm);
  direction: rtl;
}

.showcase--second > * {
  direction: ltr;
}

.showcase--second .showcase__frame {
  transform: perspective(1600px) rotateY(7deg) rotateX(2deg);
}

.showcase--second:hover .showcase__frame {
  transform: perspective(1600px) rotateY(3deg) rotateX(1deg) translateY(-6px);
}

@media (max-width: 62rem) {
  .showcase--second {
    direction: ltr;
  }
}

.metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ep-space-md) var(--ep-space-lg);
  margin-top: var(--ep-space-lg);
}

@media (max-width: 62rem) {
  .showcase {
    grid-template-columns: minmax(0, 1fr);
  }

  .showcase__frame,
  .showcase:hover .showcase__frame {
    transform: none;
  }
}

/* ---- Work grid ------------------------------------------------------------------------------------ */

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--ep-space-sm);
  margin-top: var(--ep-space-sm);
}

/* ---- Numbers band ---------------------------------------------------------------------------------- */

.band {
  padding-block: clamp(3rem, 6vw, 4.5rem);
  border-block: 1px solid var(--ep-line);
  background:
    radial-gradient(70% 140% at 50% 0%, color-mix(in srgb, var(--ep-accent) 8%, transparent), transparent 70%),
    var(--ep-bg-raised);
}

.band__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--ep-space-lg);
}

.band__value {
  font-size: clamp(2.4rem, 4.6vw, 3.75rem);
  letter-spacing: -0.04em;
}

/* ---- Services -------------------------------------------------------------------------------------- */

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--ep-space-sm);
}

.service {
  position: relative;
  overflow: hidden;
  padding: var(--ep-space-md) var(--ep-space-md) var(--ep-space-lg);
  border: 1px solid var(--ep-line);
  border-radius: var(--ep-radius-md);
  background: linear-gradient(170deg, var(--ep-surface), var(--ep-bg-raised));
  transition:
    border-color var(--ep-duration) var(--ep-ease),
    transform var(--ep-duration) var(--ep-ease);
}

.service:hover {
  border-color: var(--ep-line-strong);
  transform: translateY(-4px);
}

/* A hairline of accent that wipes in on hover. Cheaper than a glow and it does not smear the
   text underneath. */
.service::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--ep-accent), transparent 70%);
  opacity: 0;
  transition: opacity var(--ep-duration) var(--ep-ease);
}

.service:hover::before {
  opacity: 1;
}

.service__no {
  display: block;
}

.service h3 {
  margin-top: var(--ep-space-xs);
}

.service p {
  margin-top: var(--ep-space-2xs);
  font-size: var(--ep-text-small);
  line-height: var(--ep-leading-relaxed);
  color: var(--ep-ink-2);
  text-wrap: pretty;
}

/* ---- Footer ------------------------------------------------------------------------------------------ */

.footer {
  padding-block: var(--ep-space-xl);
  border-top: 1px solid var(--ep-line);
}

.footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ep-space-md) var(--ep-space-xl);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ep-space-md);
  font-size: var(--ep-text-small);
}

.footer__links a {
  color: var(--ep-ink-2);
  text-decoration: none;
  transition: color var(--ep-duration-fast) var(--ep-ease);
}

.footer__links a:hover {
  color: var(--ep-accent);
}

.footer__colophon {
  max-width: 70ch;
  margin-top: var(--ep-space-md);
  font-size: var(--ep-text-fine);
  line-height: var(--ep-leading-relaxed);
  color: var(--ep-ink-3);
}