/* ============================================================
   Human Services — thisishuman.services v2
   White-ground redesign: bg #F5F5F5 · red #DC353B · ink #0C0C0C
   ============================================================ */

/* ---------- Webfonts ---------- */

@font-face {
  font-family: 'Nimbus Sans L';
  src: url('../fonts/nimbus-sans-l/NimbusSanL-Reg.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nimbus Sans L';
  src: url('../fonts/nimbus-sans-l/NimbusSanL-RegIta.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Nimbus Sans L';
  src: url('../fonts/nimbus-sans-l/NimbusSanL-Bol.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nimbus Sans L';
  src: url('../fonts/nimbus-sans-l/NimbusSanL-BolIta.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Garton — not used on the homepage; ready for project sub-pages. */
@font-face {
  font-family: 'Garton';
  src: url('../fonts/garton/Garton-Regular.woff2') format('woff2'),
       url('../fonts/garton/Garton-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Garton';
  src: url('../fonts/garton/Garton-Bold.woff2') format('woff2'),
       url('../fonts/garton/Garton-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Base ---------- */

:root {
  --bg: #F5F5F5;
  --red: #DC353B;
  --ink: #0C0C0C;
  --white: #FFFFFF;
  --gutter: 51px;
  --text-inset: 100px; /* left edge of type on desktop */
}

/* Cross-fade between pages (homepage ↔ project). Falls back to a
   normal jump in browsers without View Transitions. */
@view-transition { navigation: auto; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--bg); }

body {
  position: relative;
  background: var(--bg);
  color: var(--red);
  font-family: 'Nimbus Sans L', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main { position: relative; z-index: 1; }

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

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

/* ---------- 1. Numbered project list ---------- */

.projects {
  list-style: none;
  padding: 100px var(--gutter) 0 var(--text-inset);
}

.projects li + li { margin-top: 22px; }

.projects .row { display: block; }

.projects .num {
  display: block;
  font-size: 12px;
  line-height: 16px;
  margin-left: 4px;
}

.projects .line { display: block; margin-top: -4px; }

.projects .title {
  font-weight: 700;
  font-size: clamp(34px, 4.1vw, 59px);
  line-height: 1.17;
  letter-spacing: 0;
}

.projects .sub {
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 23px);
  margin-left: 22px;
  white-space: nowrap;
}

/* Rollover: title + subline fade to ink, and fade back on rollout. */
.projects .title,
.projects .sub {
  transition: color 400ms ease;
}
.projects .row:hover .title,
.projects .row:hover .sub {
  color: var(--ink);
}

/* Load-in: staggered fade, each row drops down into position, 001 first. */
@keyframes row-fade-drop {
  from { opacity: 0; transform: translateY(-25px); }
  to   { opacity: 1; transform: translateY(0); }
}
.projects li {
  opacity: 0;
  animation: row-fade-drop 700ms ease forwards;
}
.projects li:nth-child(1) { animation-delay: 0ms; }
.projects li:nth-child(2) { animation-delay: 120ms; }
.projects li:nth-child(3) { animation-delay: 240ms; }
.projects li:nth-child(4) { animation-delay: 360ms; }
.projects li:nth-child(5) { animation-delay: 480ms; }
.projects li:nth-child(6) { animation-delay: 600ms; }
.projects li:nth-child(7) { animation-delay: 720ms; }

/* ---------- 2. About block ---------- */

.about {
  margin: 97px var(--gutter) 0;
  background: var(--red);
  color: var(--white);
  padding: 60px 49px 60px;
}

.about p {
  font-size: clamp(24px, 4.1vw, 59px);
  line-height: 1.0;
  letter-spacing: -0.05em;
}

.about p + p { margin-top: 1em; }

/* ---------- 3. Client tattoos ---------- */

.clients-intro {
  margin: 112px var(--gutter) 0;
  padding: 0 49px;
}

.clients-intro p {
  font-size: clamp(24px, 4.1vw, 59px);
  line-height: 1.0;
  letter-spacing: -0.05em;
  color: var(--red);
}

.clients-grid {
  margin: 112px var(--gutter) 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 9px;
}

/* Red monotone by default, true colour on hover.
   Technique: the photo itself is grayscale; a solid red layer sits
   over it with mix-blend-mode:color, which imposes that colour's hue
   and saturation onto the image's existing luminance — shadows read
   as deep red, highlights as light red/pink, and the overall tone
   locks to the exact red (#DC353B) rather than drifting warm/pink at
   different brightness levels the way a plain CSS filter chain does.
   Tried the filter-chain approach first (grayscale+sepia+hue-rotate+
   saturate) — it can't hold one hue across the tonal range and reads
   as blown-out pink in the highlights. This blend-mode approach holds
   the hue everywhere, checked against the target hex programmatically. */
.tattoo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: block;
}
.tattoo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  filter: grayscale(100%);
  transition: filter 450ms ease, transform 600ms ease;
}
.tattoo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--red);
  mix-blend-mode: color;
  transition: opacity 450ms ease;
}

/* Warm into colour + slight zoom, as per the live site. */
.tattoo-frame:hover {
  z-index: 1;
}
.tattoo-frame:hover img {
  filter: none;
  transform: scale(1.05);
}
.tattoo-frame:hover::after {
  opacity: 0;
}

/* ---------- Scroll reveals (fade-in-once; gated on .js-motion) ---------- */

html.js-motion .reveal {
  transition: opacity 400ms ease, transform 400ms ease;
}
/* About: the red block stays at 100% — only the text reveals.
   Each paragraph starts at 25% and fades up individually as it
   scrolls into view. */
html.js-motion .reveal-about {
  opacity: 0.25;
  transform: translateY(35px);
  transition: opacity 1200ms ease, transform 1200ms ease;
}
/* Clients intro: fade + drop. */
html.js-motion .reveal-drop { opacity: 0; transform: translateY(-36px); }
/* Grid (images): slow, plain fade. */
html.js-motion .reveal-fade { opacity: 0; transition-duration: 1400ms; }

html.js-motion .reveal.revealed {
  opacity: 1;
  transform: none;
}

/* ---------- 4. Contact / footer ---------- */

.contact {
  margin-top: 112px;
  padding-bottom: 74px;
  text-align: center;
}

.contact .contact-link {
  position: relative;
  display: inline-block;
}

.contact .gif-frame {
  display: block;
  width: 288px;
  height: 288px;
  border: 30px solid var(--ink);
}

.contact .gif-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Desktop: CTA sits over the gif, centred both ways, wider than the frame. */
.contact .cta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 442px;
  font-weight: 700;
  font-size: 69px;
  line-height: 69px;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--red);
  transition: color 200ms ease;
}

.contact .contact-link:hover .cta { color: var(--ink); }

.footer-logo {
  display: block;
  margin: 66px auto 0;
  width: 288px;
  height: auto;
}

.contact .disclaimer {
  margin: 66px var(--gutter) 0;
  text-align: center;
  font-family: 'Nimbus Sans L', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--red);
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  :root { --gutter: 20px; --text-inset: 20px; }

  .projects { padding-top: 54px; }
  .projects li + li { margin-top: 30px; }
  .projects .num { margin-left: 2px; }
  .projects .line { margin-top: 0; }
  .projects .title { font-size: 29px; line-height: 29px; }
  .projects .sub {
    display: block;
    font-size: 16px;
    margin-left: 0;
    margin-top: 6px;
    white-space: normal;
  }

  .about {
    margin: 66px 0 0;
    padding: 24px 20px 32px;
  }
  .about p { font-size: 29px; line-height: 29px; letter-spacing: -0.05em; }

  .clients-intro { margin: 79px 0 0; padding: 0 20px; }
  .clients-intro p { font-size: 29px; line-height: 29px; }

  .clients-grid {
    margin: 79px 0 0;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }
  /* No hover on touch — tattoos stay red-monotone on mobile. */
  .tattoo-frame:hover img { filter: grayscale(100%); transform: none; }
  .tattoo-frame:hover::after { opacity: 1; }

  .contact { margin-top: 110px; padding-bottom: 60px; }
  .contact .contact-link:hover .cta { color: var(--red); } /* no hover on touch */
  .contact .gif-frame { width: 239px; height: 239px; }
  /* Mobile: CTA back under the gif, per the mobile frame. */
  .contact .cta {
    position: static;
    transform: none;
    display: block;
    width: auto;
    margin-top: 14px;
    font-size: 18px;
    line-height: 29px;
  }
  .footer-logo { margin-top: 60px; width: 272px; }
}

/* ---------- Reduced motion: no fades, everything at full opacity ---------- */

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .projects li {
    animation: none;
    opacity: 1;
  }
  .projects .title,
  .projects .sub,
  .tattoo-frame img,
  .tattoo-frame::after,
  .contact .cta,
  html.js-motion .reveal {
    transition: none;
  }
  html.js-motion .reveal-about,
  html.js-motion .reveal-drop,
  html.js-motion .reveal-fade {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Cookie notice ---------- */

@keyframes notice-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cookie-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 18px 51px;
  background: var(--ink);
  color: var(--white);
  animation: notice-in 400ms ease both;
}
.cookie-notice p {
  flex: 1 1 auto;
  font-family: 'Nimbus Sans L', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
}
.cookie-actions { flex: 0 0 auto; display: flex; gap: 10px; }
.cookie-actions button {
  font-family: 'Nimbus Sans L', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 9px 16px;
  border: 2px solid var(--white);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.cookie-actions button:hover { background: var(--white); color: var(--ink); }
@media (max-width: 767px) {
  .cookie-notice { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-notice { animation: none; }
  .cookie-actions button { transition: none; }
}