/* ================================================================
   PROJEKT VISYO — Design System
   Tokens: CONTEXT.md §3
   Fonts: Space Grotesk (display/body) · Space Mono (utility/texture)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600&family=Space+Mono&display=swap');

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── Design tokens ──────────────────────────────────────────── */
:root {
  --ink:    #0a0a0a;
  --paper:  #f4f4f2;
  --muted:  rgba(244, 244, 242, .55);
  --hair:   rgba(244, 244, 242, .14);
  --accent: #ff5a1f;

  --f-dis: 'Space Grotesk', 'Inter Tight', system-ui, sans-serif;
  --f-mon: 'Space Mono', 'JetBrains Mono', ui-monospace, monospace;

  --hero-sz: clamp(40px, 6.5vw, 120px);
  --h2-sz:   clamp(28px, 5vw, 64px);
  --body-sz: clamp(16px, 1.4vw, 20px);
  --lbl-sz:  12px;

  --px:   clamp(20px, 4vw, 56px);
  --maxw: 1400px;
}

/* ── Base ───────────────────────────────────────────────────── */
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-dis);
  font-size: var(--body-sz);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: var(--px);
}

/* ASCII canvas host */
#ascii-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  overflow: hidden;
}

/* ── Corner furniture ───────────────────────────────────────── */
.furn {
  position: absolute;
  font-family: var(--f-mon);
  font-size: var(--lbl-sz);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.65;
  z-index: 10; /* always above hero-content so furniture stays clickable */
}

.furn-tl { top: var(--px); left: var(--px); }
.furn-tc { top: var(--px); left: 50%; transform: translateX(-50%); }
.furn-tr { top: var(--px); right: var(--px); text-align: right; }
.furn-bl { bottom: var(--px); left: var(--px); }
.furn-bc {
  bottom: var(--px);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}
.furn-br { bottom: var(--px); right: var(--px); text-align: right; }

/* Vertical nav (top-left) */
.furn-nav { display: flex; flex-direction: column; gap: 5px; }
.furn-nav a { color: var(--muted); transition: color .2s ease; }
.furn-nav a:hover { color: var(--paper); }

/* Wordmark */
.wordmark {
  font-family: var(--f-dis);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--paper);
}
/* accent ® mark — counts as one of the ≤3 accent uses on screen */
.wordmark .r { color: var(--accent); font-size: .6em; vertical-align: super; }

/* Top-right CTA block */
.furn-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.furn-lbl  { color: var(--muted); }

.furn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--hair);
  color: var(--accent); /* second accent use */
  font-size: 13px;
  transition: border-color .2s, background .2s;
}
.furn-arrow:hover { border-color: var(--accent); background: rgba(255, 90, 31, .08); }

/* Service tags (bottom-right) */
.svc-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* ── Hero content (bottom-left anchor) ─────────────────────── */
.hero-content {
  position: absolute;
  bottom: calc(var(--px) + 96px);
  left: var(--px);
  right: var(--px);
  z-index: 2;
  /* Nav sits at z-index 10, so it always renders on top of this text
     and remains clickable regardless of how tall the h1 gets */
}

.hero-h1 {
  font-size: var(--hero-sz);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--paper);
  margin-bottom: clamp(20px, 3vh, 36px);
}

/* Each line wraps a span that animates up — overflow hidden clips the travel */
.h1-line { display: block; overflow: hidden; line-height: .95; }
.h1-line span {
  display: block;
  transform: translateY(110%);
  opacity: 0;
  animation: rise .75s cubic-bezier(.16, 1, .3, 1) forwards;
}
.h1-line:nth-child(1) span { animation-delay: .05s; }
.h1-line:nth-child(2) span { animation-delay: .14s; }
.h1-line:nth-child(3) span { animation-delay: .23s; }

@keyframes rise { to { transform: translateY(0); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .h1-line span { animation: none; transform: none; opacity: 1; }
}

.hero-sub {
  font-size: clamp(15px, 1.3vw, 19px);
  color: var(--muted);
  max-width: 52ch;
  line-height: 1.65;
  margin-bottom: clamp(24px, 4vh, 40px);
  opacity: 0;
  animation: fadein .7s .4s ease forwards;
}
@keyframes fadein { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-sub { animation: none; opacity: 1; } }

.hero-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: fadein .7s .55s ease forwards;
}
@media (prefers-reduced-motion: reduce) { .hero-cta { animation: none; opacity: 1; } }

/* Pill CTA */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-family: var(--f-dis);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--paper);
  transition: border-color .2s;
}
.pill:hover { border-color: rgba(244, 244, 242, .45); }

/* Arrow box CTA — third and final accent use per screen */
.arrow-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hair);
  color: var(--accent);
  font-size: 18px;
  transition: border-color .2s, background .2s, transform .2s;
}
.arrow-box:hover {
  border-color: var(--accent);
  background: rgba(255, 90, 31, .08);
  transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
  .pill, .arrow-box, .furn-arrow, .furn-nav a { transition: none; }
  .arrow-box:hover { transform: none; }
}

/* ── Layout primitives (below hero) ────────────────────────── */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--px);
  padding-right: var(--px);
}

.sec-pad {
  padding-top: clamp(64px, 9vw, 120px);
  padding-bottom: clamp(64px, 9vw, 120px);
}

.hairline { height: 1px; background: var(--hair); }

.sec-tag {
  font-family: var(--f-mon);
  font-size: var(--lbl-sz);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(32px, 4vw, 56px);
}

/* ── Selected Work ──────────────────────────────────────────── */
.work-list { list-style: none; border-top: 1px solid var(--hair); }

.work-item a {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: center;
  column-gap: 24px;
  padding: clamp(18px, 2.5vw, 28px) 0;
  border-bottom: 1px solid var(--hair);
  transition: opacity .18s ease;
}

/* Dim all rows when any is hovered — restored on the active item */
.work-list:hover .work-item a { opacity: .32; }
.work-item:hover a            { opacity: 1 !important; }

.wn {
  font-family: var(--f-mon);
  font-size: var(--lbl-sz);
  color: var(--muted);
  letter-spacing: .06em;
  align-self: start;
  padding-top: .22em;
}

.wtitle {
  font-size: clamp(24px, 3.8vw, 54px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--paper);
}

.wmeta {
  font-family: var(--f-mon);
  font-size: var(--lbl-sz);
  color: var(--muted);
  letter-spacing: .06em;
  text-align: right;
  white-space: nowrap;
  align-self: start;
  padding-top: .22em;
}

@media (prefers-reduced-motion: reduce) {
  .work-item a { transition: none; }
}

/* Floating thumbnail (follows mouse) */
#work-thumb {
  position: fixed;
  pointer-events: none;
  width: 256px;
  aspect-ratio: 4 / 3;
  background: #101010;
  border: 1px solid var(--hair);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transition: opacity .12s ease;
  z-index: 300;
  transform: translate(-50%, -60%);
  overflow: hidden;
}
#work-thumb.on { opacity: 1; }
.thumb-name {
  font-family: var(--f-dis);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--paper);
}
.thumb-disc {
  font-family: var(--f-mon);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (prefers-reduced-motion: reduce) { #work-thumb { transition: none; } }

/* ── Approach ───────────────────────────────────────────────── */
.approach-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  margin-bottom: clamp(40px, 5vw, 72px);
  align-items: end;
}
@media (max-width: 768px) { .approach-head { grid-template-columns: 1fr; } }

.approach-h2 {
  font-size: var(--h2-sz);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.approach-lede {
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--muted);
  line-height: 1.7;
  max-width: 44ch;
}

.approach-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(32px, 4vw, 64px);
}
@media (max-width: 640px) { .approach-grid { grid-template-columns: 1fr; } }

.approach-item { padding: clamp(20px, 2.5vw, 28px) 0; border-top: 1px solid var(--hair); }
.approach-item h3 {
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 500;
  letter-spacing: -.01em;
  margin-bottom: 10px;
}
.approach-item p {
  font-size: clamp(14px, 1.1vw, 16px);
  color: var(--muted);
  line-height: 1.7;
}

/* ── Contact ────────────────────────────────────────────────── */
.contact-block {
  text-align: center;
  padding: clamp(64px, 9vw, 128px) var(--px);
}
.contact-h2 {
  font-size: var(--h2-sz);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.contact-sub {
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--muted);
  max-width: 44ch;
  margin: 0 auto clamp(28px, 3vw, 44px);
  line-height: 1.65;
}
.contact-email {
  font-size: clamp(20px, 2.8vw, 40px);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--paper);
  border-bottom: 1px solid var(--hair);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.contact-email:hover { color: var(--accent); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .contact-email { transition: none; } }

.contact-social {
  margin-top: clamp(24px, 3vw, 40px);
  display: flex;
  justify-content: center;
}
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mon);
  font-size: var(--lbl-sz);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s;
}
.social-link:hover { color: var(--paper); }
@media (prefers-reduced-motion: reduce) { .social-link { transition: none; } }

/* ── Site footer ────────────────────────────────────────────── */
.site-footer {
  padding: clamp(18px, 2.5vw, 28px) var(--px);
  border-top: 1px solid var(--hair);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--f-mon);
  font-size: var(--lbl-sz);
  letter-spacing: .06em;
  color: var(--muted);
  flex-wrap: wrap;
}

/* ── Client page ────────────────────────────────────────────── */
.client-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--px) var(--px) 0;
  max-width: var(--maxw);
  margin: 0 auto;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mon);
  font-size: var(--lbl-sz);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s;
}
.back-link:hover { color: var(--paper); }
@media (prefers-reduced-motion: reduce) { .back-link { transition: none; } }

.client-hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 120px) var(--px) clamp(40px, 5vw, 72px);
}
.c-meta {
  font-family: var(--f-mon);
  font-size: var(--lbl-sz);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}
.c-title {
  font-size: var(--h2-sz);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: 24px;
}
.c-intro {
  font-size: clamp(15px, 1.3vw, 19px);
  color: var(--muted);
  max-width: 58ch;
  line-height: 1.7;
}

.c-image {
  width: 100%;
  aspect-ratio: 16 / 7;
  min-height: 200px;
  background: #0f0f0f;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mon);
  font-size: var(--lbl-sz);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  overflow: hidden;
}
.c-image img { width: 100%; height: 100%; object-fit: cover; }

.c-body {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--px);
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: clamp(32px, 5vw, 96px);
}
@media (max-width: 768px) { .c-body { grid-template-columns: 1fr; } }

.c-col-label {
  font-family: var(--f-mon);
  font-size: var(--lbl-sz);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.c-services { list-style: none; }
.c-services li {
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
  font-size: clamp(14px, 1.1vw, 17px);
  color: var(--muted);
}
.c-services li:first-child { border-top: 1px solid var(--hair); }

.c-prose p {
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 20px;
}
.c-prose p:last-child { margin-bottom: 0; }

/* ── Scroll-reveal animations ───────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
/* Stagger siblings: each .reveal inside a parent gets a sequential delay */
.reveal-group .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-group .reveal:nth-child(2) { transition-delay: .08s; }
.reveal-group .reveal:nth-child(3) { transition-delay: .16s; }
.reveal-group .reveal:nth-child(4) { transition-delay: .24s; }
.reveal-group .reveal:nth-child(5) { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Client page — website link ─────────────────────────────── */
.c-website-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mon);
  font-size: var(--lbl-sz);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--hair);
  padding-bottom: 2px;
  margin-top: 24px;
  transition: color .2s, border-color .2s;
}
.c-website-link:hover { color: var(--paper); border-color: rgba(244,244,242,.4); }
.c-website-link .ext-arrow { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .c-website-link { transition: none; } }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .furn-tl { display: none; }
  .furn-br { display: none; }
  .hero-content { bottom: calc(var(--px) + 88px); }
}

@media (max-width: 640px) {
  .furn-tc { left: var(--px); transform: none; }
  .furn-lbl { display: none; }   /* hide "let's work together" text */
  .furn-bc { display: none; }
  .hero-content { bottom: calc(var(--px) + 48px); }

  .work-item a {
    grid-template-columns: 2.2rem 1fr;
    row-gap: 4px;
  }
  .wmeta { grid-column: 2; grid-row: 2; font-size: 10px; }

  #work-thumb { display: none; }
}