/* ==========================================================================
   danhinton.com
   One-page static site. Design: Figma "danhinton.com wireframe",
   page "Direction E: Trail", frame "E. Trail / Desktop / Draft 2".
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts
   Display: Denim INK, self-hosted from assets/fonts/.
   Sans: Neue Haas Grotesk Display, served by Adobe Fonts (kit kez0rxq,
   linked in index.html). Adobe maps its weights as 55 Roman = 500,
   65 Medium = 600, 75 Bold = 700, so the weight tokens below follow that.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "DH Display";
  src: local("Denim INK WD-TRIAL SemiBold"), local("DenimINKWD-TRIAL-SemiBold"),
       local("Denim INK WD SemiBold"), local("DenimINKWD-SemiBold"),
       url("../fonts/denim-ink-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens (match the Figma colour and text styles)
   -------------------------------------------------------------------------- */
:root {
  /* Colour */
  --c-white: #ffffff;
  --c-cream: #f5f5ed;
  --c-ink: #1d3840;          /* body text, Torr block */
  --c-ink-dark: #242422;     /* Pixelfish block text */
  --c-teal-deep: #122f35;    /* nav pills */
  --c-green: #24b296;        /* Pixelfish block */
  --c-lime: #d7ff38;         /* Torr heading */
  --c-orange: #ff6a00;       /* route line, trail pills */

  /* Type */
  --f-display: "DH Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-sans: "neue-haas-grotesk-display-1", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fw-regular: 500;  /* 55 Roman */
  --fw-medium: 600;   /* 65 Medium */
  --fw-bold: 700;     /* 75 Bold */

  --fs-hero: min(13.9vw, 17rem);                    /* 200px @ 1440 */
  --fs-display: clamp(3.25rem, 6.95vw, 8.5rem);     /* 100px @ 1440 */
  --fs-route: clamp(2.5rem, 6.95vw, 8.5rem);
  --fs-lead: clamp(1.375rem, 1.95vw, 1.75rem);      /* 28px */
  --fs-body: clamp(1.0625rem, 1.32vw, 1.1875rem);   /* 19px */
  --fs-pill: 0.875rem;                               /* 14px */
  --fs-pill-md: 0.9375rem;                           /* 15px */
  --fs-button: 1rem;                                 /* 16px */
  --fs-pill-lg: clamp(1.125rem, 1.53vw, 1.375rem);   /* 22px */
  --fs-small: 0.875rem;                              /* 14px */

  /* Layout */
  --gutter: clamp(20px, 3.34vw, 48px);
  --max: 1440px;
  --max-wide: 1920px;
  --section-top: clamp(64px, 7.8vw, 112px);
  --section-bottom: clamp(72px, 8.9vw, 128px);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-sans);
  font-weight: var(--fw-regular);
  color: var(--c-ink);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
p, h1, h2, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--max-wide); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .75rem 1rem; border-radius: 999px;
  background: var(--c-orange); color: var(--c-white);
  font-weight: var(--fw-medium); text-decoration: none;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

/* --------------------------------------------------------------------------
   Pills
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 8px 16px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--f-sans);
  font-size: var(--fs-pill);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.pill--solid {
  background: var(--c-teal-deep);
  border-color: var(--c-teal-deep);
  color: var(--c-white);
}
.pill--solid:hover { background: var(--c-orange); border-color: var(--c-orange); }

.pill--accent { color: var(--c-orange); font-size: var(--fs-pill-md); }
.pill--accent:hover { background: var(--c-orange); color: var(--c-white); border-color: var(--c-orange); }

.pill--outline { font-size: var(--fs-button); }
.pill--outline:hover {
  background: var(--pill-hover-bg);
  border-color: var(--pill-hover-bg);
  color: var(--pill-hover-text);
}

.pill--lg { font-size: var(--fs-pill-lg); }
.pill--static { pointer-events: none; }
.pill--icon { min-width: 45px; min-height: 35px; justify-content: center; padding-block: 0; }
.pill--icon .icon { width: 16px; height: 16px; flex: none; }

.pill-list { display: flex; flex-wrap: wrap; gap: 6px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  height: min(62.5vw, 100svh);
  min-height: 560px;
  background: linear-gradient(180deg, #9e998c 0%, #737066 100%);
  color: var(--c-white);
}
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}
.hero__nav {
  position: absolute;
  top: clamp(20px, 3.05vw, 44px);
  left: var(--gutter);
  right: var(--gutter);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.hero__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-hero);
  line-height: .8;
  text-transform: uppercase;
  letter-spacing: 0;
}
.hero__title span {
  position: absolute;
  z-index: 1;
  white-space: nowrap;
}
.hero__first { left: 7.7%; bottom: .66em; }
.hero__last  { left: 40%;  bottom: -.11em; }

/* Parallax: main.js sets --p (0 to 1) as the hero scrolls away.
   DAN drifts down, HINTON drifts up. They sit side by side, so they never collide. */
.hero__first,
.hero__last { will-change: transform; }
.hero__first { transform: translate3d(0, calc(var(--p, 0) * .55em), 0); }
.hero__last  { transform: translate3d(0, calc(var(--p, 0) * -.55em), 0); }

/* --------------------------------------------------------------------------
   Intro
   -------------------------------------------------------------------------- */
.intro { padding-block: clamp(64px, 8.9vw, 128px) clamp(56px, 6.7vw, 96px); }
.intro__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(40px, 8.3vw, 120px);
  row-gap: 24px;
}
.intro__lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  line-height: 1.3;
}
.intro__body {
  font-size: var(--fs-body);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   The desk / the dirt route
   -------------------------------------------------------------------------- */
.route {
  padding-block: 24px var(--section-bottom);
  background: linear-gradient(180deg, var(--c-white) 0%, var(--c-cream) 100%);
}
.route__words {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;            /* always one row: The Desk left, The Dirt right */
  column-gap: .5em;
  white-space: nowrap;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-route);
  line-height: .84;
  text-transform: uppercase;
  color: var(--c-ink);
}
.route__trail {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 48px;
}
.route__line {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--c-orange);
}
.route__svg { width: 100%; height: auto; overflow: visible; }

/* Route draw-in: marks appear in sequence once the section is in view */
.js .route__line .m {
  opacity: 0;
  transition: opacity .25s ease;
  transition-delay: calc(var(--i, 0) * 28ms);
}
.js .route__line.is-drawn .m { opacity: 1; }

/* --------------------------------------------------------------------------
   Business blocks
   -------------------------------------------------------------------------- */
.block { padding-block: var(--section-top) var(--section-bottom); }
.block__inner {
  display: grid;
  grid-template-columns: minmax(0, 780fr) minmax(0, 516fr);
  column-gap: 48px;
  row-gap: 40px;
  align-items: start;
}
.block__head { container-type: inline-size; min-width: 0; }
.block__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: min(var(--fs-display), 14.2cqi);
  line-height: .84;
  text-transform: uppercase;
}
.block__detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.block__strong {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1.45;
}
.block__body {
  margin-top: 10px;
  font-size: var(--fs-body);
  line-height: 1.45;
  opacity: .8;
}
.block__label {
  margin-top: 40px;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.block__logo { margin-top: 40px; }
.block__logo--pixelfish svg { width: 163px; height: auto; }
.block__logo--torr svg { width: 100px; height: auto; opacity: .95; }
.block .pill { margin-top: 40px; }

.block--pixelfish { background: var(--c-green); color: var(--c-ink-dark); --pill-hover-bg: var(--c-ink-dark); --pill-hover-text: var(--c-green); }
.block--torr { background: var(--c-ink); color: var(--c-white); --pill-hover-bg: var(--c-white); --pill-hover-text: var(--c-ink); }
.block--torr .block__title { color: var(--c-lime); }
.block--pixelfish .block__body { opacity: 1; }  /* 0.8 failed contrast on the green */

/* Founder titles: each word fades up in turn when the heading scrolls into view */
.js .reveal-word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, .18em, 0);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--w, 0) * 220ms);
}
.js [data-reveal].is-visible .reveal-word {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  padding-block: var(--section-top) 40px;
  background: var(--c-cream);
  color: var(--c-ink);
  --pill-hover-bg: var(--c-ink);
  --pill-hover-text: var(--c-cream);
}
.footer__row {
  display: flex;
  align-items: center;
  gap: 48px;
}
.footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.footer__socials {
  display: flex;
  align-items: center;
  gap: 6px;
}
.footer__socials .pill--solid { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-cream); }
.footer__socials .pill--solid:hover { background: var(--c-orange); border-color: var(--c-orange); color: var(--c-white); }
.footer__line {
  flex: 1 1 auto;
  height: 15px;
  background: url("../img/route-tile.svg") left center / auto 15px repeat-x;
  background-repeat: round no-repeat;
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 56px;
  font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .block__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  .hero { height: 100svh; min-height: 600px; max-height: 860px; }
  .hero__img { object-position: 47% 62%; }
  .hero::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%);
    pointer-events: none;
  }
  .hero__nav .pill-list li:first-child { display: none; }
  .hero__title { font-size: 22vw; }
  .hero__first { left: var(--gutter); bottom: .76em; }
  /* Stacked on mobile, so the words would cross: keep them still here */
  .hero__first, .hero__last { transform: none; }
  .hero__last  { left: auto; right: var(--gutter); bottom: -.1em; }

  .intro__cols { grid-template-columns: 1fr; }

  /* Both phrases (about 9.3em together in Denim INK) share one row and scale to fit */
  .route__words { font-size: min(calc((100vw - 2 * var(--gutter)) / 12.5), 2.75rem); }
  .route__trail {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: 16px 12px;
    margin-top: 32px;
  }
  .route__line { grid-column: 1 / -1; grid-row: 1; }
  .route__pill--start { grid-row: 2; justify-self: start; }
  .route__pill--end { grid-row: 2; justify-self: end; }

  .block__inner { grid-template-columns: 1fr; }

  .footer__row { flex-direction: column; align-items: stretch; gap: 32px; }
  .footer__contact { align-items: flex-start; }
  .footer__line { flex: none; }
  .footer__bottom { margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .route__line .m { opacity: 1; transition: none; }
  .hero__first, .hero__last { transform: none; }
  .pill { transition: none; }
  .js .reveal-word { opacity: 1; transform: none; transition: none; }
}