/* lonelykite.com - company commissioning site
   Shared design system with cameronrichards.co.uk (Anton + same colour language),
   per brief Section 3. Personal-site signature devices (live clock/timecode,
   corner ticks) deliberately NOT reused here. */

:root {
  --bg: #0a0a0b;
  --ink: #f2f0eb;
  --dim: rgba(242, 240, 235, 0.55);
  --faint: rgba(242, 240, 235, 0.22);
  --line: rgba(242, 240, 235, 0.14);
  --accent: #e6a13c;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: "Anton", "Arial Narrow", sans-serif;
  --pad: clamp(1.25rem, 4vw, 3rem);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

img {
  display: block;
  width: 100%;
  height: auto;
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--bg);
  padding: 0.5rem 1rem;
  font-family: var(--mono);
}
.skip:focus { left: 0; }

/* ---- stubs: unresolved content, must be visually unmistakable ---- */

.stub {
  border: 1px dashed var(--accent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 0.75rem 1rem;
  background: rgba(230, 161, 60, 0.06);
}

/* ---- top bar ---- */

.bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem var(--pad);
  background: linear-gradient(to bottom, rgba(10, 10, 11, 0.85), rgba(10, 10, 11, 0));
}

.bar-name {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  /* clip the logo PNG's transparent padding to the link box - without this the
     oversized img (see .bar-logo) left an invisible click strip ~2.5rem above
     and below the bar (quality-pass fix) */
  display: flex;
  align-items: center;
  height: 2.6rem;
  overflow: hidden;
}

/* real logo (Round 5; sized up R6 - the mark read too small). The source PNG
   carries generous transparent padding around the mark (roughly the middle third
   vertically); the oversize height + negative margins cancel it out without
   editing the asset. */
.bar-logo {
  height: 6.5rem;
  width: auto;
  margin: -2.5rem 0;
}

.bar-nav {
  display: flex;
  gap: 1.4rem;
}

.bar-nav a {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dim);
}
.bar-nav a:hover,
.bar-nav a:focus-visible { color: var(--ink); }

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

.hero {
  position: relative;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6);
}

.hero-card {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 var(--pad);
}

/* logo over the reel; oversize width compensates for the source PNG's transparent
   padding (see .bar-logo note) */
.hero-mark {
  margin: 0 auto;
}
.hero-mark img {
  width: clamp(340px, 52vw, 640px);
  height: auto;
  margin: -10% auto -6%;
}

/* working tagline under the logo (reinstated R6) - tasteful, not shouty */
.hero-line {
  margin: 0 auto;
  max-width: 40rem;
  font-family: var(--mono);
  font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.hero-scroll {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--dim);
  text-decoration: none;
  font-size: 0.8rem;
}

/* ---- client strip ---- */

.clients {
  padding: 2.5rem var(--pad);
  border-bottom: 1px solid var(--line);
}

.clients-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem 3.5rem;
}

.clients-strip li { flex: 0 0 auto; }

.clients-strip img {
  width: auto;
  height: clamp(38px, 5vw, 58px);
  /* uniform monochrome: grayscale + invert lifts dark marks to white;
     screen blend drops any solid backgrounds into the dark page
     (same treatment as cameronrichards.co.uk partners strip) */
  filter: grayscale(1) invert(1) brightness(1.45);
  mix-blend-mode: screen;
  opacity: 0.72;
}
/* light-on-colour marks (e.g. Snap's white ghost) must not be inverted */
.clients-strip img.logo-keep { filter: grayscale(1) brightness(1.1); }
/* the YoungMinds mark is visually lighter than its neighbours - size it up alone */
.clients-strip img.logo-lg { height: clamp(52px, 6.5vw, 76px); }

/* ---- sections ---- */

section { scroll-margin-top: 4rem; }

.section-heading {
  font-family: var(--display);
  font-size: clamp(2rem, 6vw, 3.5rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  /* R6: align headings with their centred 80rem content (left-hug fix) */
  max-width: 80rem;
  margin: 0 auto 2rem;
}

.work,
.services,
.about,
.contact {
  padding: clamp(3rem, 8vw, 6rem) var(--pad);
  border-bottom: 1px solid var(--line);
}

/* ---- work grid (homepage): loop thumbnails, "Client | Project" labels ---- */

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 2rem 1.5rem;
  max-width: 80rem;
  margin: 0 auto;
}

.thumb {
  display: block;
  text-decoration: none;
}

/* category filter bar (R5, mechanism rewritten R6): hidden until script.js reveals it */
.work-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  max-width: 80rem;
  margin: 0 auto 2.5rem;
}
.work-filter[hidden] { display: none; }

.filter-btn {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  background: none;
  border: 1px solid var(--line);
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.filter-btn:hover,
.filter-btn:focus-visible { color: var(--ink); border-color: var(--faint); }
.filter-btn.is-active {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}

/* category sub-headings within Work (Round 4) */
.work-category {
  font-family: var(--display);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
  max-width: 80rem;
  margin: 0 auto 1.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
/* spacing between category groups (selector fixed in the quality pass: the old
   `.work-grid + .work-category` never matched after the R6 group wrappers) */
.work-category-group + .work-category-group { margin-top: 3.5rem; }

.thumb-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

/* poster tiles: titles with a still but no video held */
.thumb-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.thumb:hover .thumb-media img,
.thumb:focus-visible .thumb-media img { transform: scale(1.03); }

.thumb-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.thumb:hover .thumb-video,
.thumb:focus-visible .thumb-video { transform: scale(1.03); }

.thumb-label {
  margin: 0.6rem 0 0;
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.thumb-sep { color: var(--faint); padding: 0 0.35em; }

/* (Round 5: .thumb-credit styles removed - tile credit lines stripped, a display
   choice; resolved credits stay recorded in brief Section 7) */

/* ---- case study (detail pages) ---- */

.case { margin: 0 auto 4.5rem; max-width: 60rem; }
.case:last-of-type { margin-bottom: 3rem; }

.case-page {
  padding: calc(4rem + 5vh) var(--pad) 3rem;
  margin-bottom: 0;
}

.case-back { margin: 2.5rem 0 0; }
.case-back a {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dim);
}
.case-back a:hover,
.case-back a:focus-visible { color: var(--ink); }

.case-client {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 0.4rem;
}

.case-title {
  font-family: var(--display);
  font-size: clamp(1.8rem, 5vw, 3rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 0.8rem;
}

.case-hook {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  line-height: 1.4;
  color: var(--accent);
  max-width: 36rem;
  margin: 0 0 1.5rem;
}

.case-media video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
}

.case-credit {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0.8rem 0 0;
}
.case-credit a { color: var(--ink); }

/* ---- services: numbered four-stage pipeline (Section 8) ---- */

.pipeline {
  list-style: none;
  padding: 0;
  display: grid;
  /* R6 left-hug fix: four stages spread across the full row (2x2 when narrow),
     centred - was an uncentred max-width block hugging the left */
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem 2rem;
  max-width: 80rem;
  margin: 0 auto;
}

@media (max-width: 64rem) {
  .pipeline { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 34rem) {
  .pipeline { grid-template-columns: 1fr; }
}

/* (R8: .services-stub removed - the other-services question was answered and the
   stub deleted; capabilities now live in the stage sub-lines) */

.pipeline li {
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
}

/* one real production still per stage (Round 4) - monochrome to sit as one set */
.pipeline-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  margin-bottom: 0.9rem;
}
.pipeline-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.9);
}

.pipeline-num {
  display: block;
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.pipeline-title {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.6vw, 1.8rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.pipeline-sub {
  margin: 0;
  color: var(--dim);
  font-size: 0.92rem;
}

/* (R6: .pipeline-proof removed - the 2M+ stat was dropped from Distribution) */

/* ---- about ---- */

/* R6: copy left, photo(s) right, centred at 80rem - fills the former dead space */
.about-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: flex-start;
  max-width: 80rem;
  margin: 0 auto;
}

.about-copy {
  flex: 1 1 26rem;
  max-width: 42rem;
  font-size: 1.1rem;
}
.about-copy p { margin: 0 0 1.2rem; }

.about-photos {
  flex: 1 1 20rem;
  display: grid;
  gap: 1.5rem;
}
.about-photos img { width: 100%; height: auto; }

/* ---- contact ---- */

.contact { text-align: center; border-bottom: 0; }

.contact-cta-line {
  font-size: 1.1rem;
  color: var(--dim);
  margin: 0 0 1rem;
}

.contact-cta {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bg);
  background: var(--ink);
  padding: 0.6em 1.2em;
}
.contact-cta:hover,
.contact-cta:focus-visible { background: var(--accent); }

.contact-row { margin: 1.5rem 0 0; }

.contact-email {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--dim);
  text-decoration: none;
}
.contact-email:hover,
.contact-email:focus-visible { color: var(--ink); }

.contact-links {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.contact-links a {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.contact-links a:hover,
.contact-links a:focus-visible { color: var(--ink); }

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

.footer {
  display: flex;
  justify-content: center;
  padding: 1.5rem var(--pad) 2rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--faint);
}

/* ---- small screens ---- */

@media (max-width: 600px) {
  .bar-nav { gap: 0.9rem; }
  .bar-nav a { font-size: 0.7rem; }
  .clients-strip { gap: 1.5rem 2rem; }
  .clients-strip img { height: 1.5rem; }
  /* higher-specificity .logo-lg rule was overriding the shrink above, leaving
     the YoungMinds mark 2-3x its neighbours on phones (quality-pass fix) */
  .clients-strip img.logo-lg { height: 2rem; }
}