/* VisChess homepage.
   Colours come only from css/tokens.css. Mobile-first; breakpoints 720 / 960 / 1280. */

:root {
  --vc-text-3xl: 3.5rem;   /* 56 */
  --vc-text-4xl: 6rem;     /* 96 */
  --gutter: 16px;
  --max: 1320px;
  --keyline: 2px;
  --font-latin: "Anek Latin", system-ui, sans-serif;
  --font-tamil: "Anek Tamil", "Anek Latin", system-ui, sans-serif;
  color-scheme: light;
}
@media (min-width: 720px) { :root { --gutter: 32px; } }
@media (min-width: 1280px) { :root { --gutter: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--vc-canvas);
  color: var(--vc-ink);
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, p { margin: 0; }
[lang="ta"] { font-family: var(--font-tamil); }
a { color: inherit; }
address { font-style: normal; }

:focus-visible { outline: 2px solid var(--vc-focus); outline-offset: 2px; }
.hero :focus-visible, .careers :focus-visible { outline-color: var(--vc-mustard-text); }

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  background: var(--vc-mustard); color: var(--vc-ink); padding: 8px 14px; font-weight: 500;
}
.skip:focus { top: 8px; }

/* ── shared pieces ─────────────────────────────────────────── */

/* paper grain over cream */
.paper { position: relative; isolation: isolate; }
.paper::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../assets/img/paper-texture-800.webp") center / cover;
  mix-blend-mode: multiply; opacity: .28;
}

.display {
  font-weight: 700;
  font-size: clamp(2.75rem, 9vw, var(--vc-text-4xl));
  line-height: .95;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.display--mustard { color: var(--vc-mustard-text); }

.kicker {
  font-weight: 500; font-size: var(--vc-text-sm); letter-spacing: .14em;
  color: var(--vc-ink-soft); margin-bottom: 14px;
  display: flex; align-items: center; gap: 12px;
}
.kicker::after { content: ""; height: var(--keyline); width: 48px; background: currentColor; }
.kicker--mustard { color: var(--vc-mustard-text); }

.lede { font-size: clamp(1.125rem, 2.1vw, 1.375rem); line-height: 1.5; max-width: 34ch; margin-top: 24px; }
.lede--strong { font-weight: 500; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px;
  font-weight: 500; font-size: 1.0625rem; text-decoration: none;
  border: var(--keyline) solid transparent; border-radius: 0;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn--mustard { background: var(--vc-mustard); color: var(--vc-ink); }
.btn--mustard:hover { background: var(--vc-canvas); }
.btn--line { border-color: var(--vc-mustard-text); color: var(--vc-mustard-text); }
.btn--line:hover { background: var(--vc-mustard); color: var(--vc-ink); border-color: var(--vc-mustard); }
.btn--olive { background: var(--vc-olive); color: var(--vc-cream-text); }
.btn--olive:hover { background: var(--vc-olive-deep); }

/* photo in a cream paper frame */
.frame--cream {
  background: var(--vc-canvas) url("../assets/img/paper-texture-800.webp") center / cover;
  padding: 8px;
  outline: 1px solid var(--vc-mustard-text);
  outline-offset: 5px;
}

/* mustard corner ticks */
.ticks { position: relative; }
.ticks::before {
  content: ""; position: absolute; inset: -9px; pointer-events: none;
  --t: 14px; --w: 2px; --c: var(--vc-mustard-text);
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--t) var(--w),
    linear-gradient(var(--c), var(--c)) top left / var(--w) var(--t),
    linear-gradient(var(--c), var(--c)) top right / var(--t) var(--w),
    linear-gradient(var(--c), var(--c)) top right / var(--w) var(--t),
    linear-gradient(var(--c), var(--c)) bottom left / var(--t) var(--w),
    linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--t),
    linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--w),
    linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--t);
  background-repeat: no-repeat;
}

/* component placeholders: fixed boxes so nothing jumps when modules load */
vc-woven-mark, vc-live-board { display: block; }
vc-glyph { display: inline-block; vertical-align: middle; flex: none; width: 36px; height: 36px; }
vc-glyph[size="72"] { width: 72px; height: 72px; }
vc-glyph[size="36"] { width: 36px; height: 36px; }
vc-madras { display: block; width: 100%; }
vc-madras[height="32"] { height: 32px; }
vc-madras[height="16"] { height: 16px; }

/* ── 1 · hero ──────────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--vc-olive);
  color: var(--vc-cream-text);
  padding: 0 calc(var(--gutter) + 30px) 56px var(--gutter);
}
.hero::before { /* paper grain on olive */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../assets/img/paper-texture-800.webp") center / cover;
  mix-blend-mode: multiply; opacity: .35;
}

/* vertical wordmark lockup, right edge (mask lets us colour the brick SVG mustard) */
.hero__lockup {
  position: absolute; right: 12px; top: 96px; z-index: 3;
  width: 16px; aspect-ratio: 37.984 / 533.447;
  background: var(--vc-mustard-text);
  -webkit-mask: url("../assets/logo/lockup-vertical.svg") center / contain no-repeat;
          mask: url("../assets/logo/lockup-vertical.svg") center / contain no-repeat;
}
/* vertical bitmap ornament strip, left edge (desktop only) */
.hero__strip { display: none; }

.topbar {
  position: relative; z-index: 4;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0;
  max-width: var(--max); margin: 0 auto;
  border-bottom: 1px solid color-mix(in srgb, var(--vc-mustard-text) 45%, transparent);
}
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--vc-mustard-text); }
.brand img { width: 28px; height: auto; align-self: center; }
.brand__latin { font-weight: 500; font-size: 1.25rem; letter-spacing: .01em; }
.brand__tamil { font-size: .95rem; color: var(--vc-cream-text); opacity: .85; }
.topbar__links { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; font-weight: 500; font-size: var(--vc-text-md); }
.topbar__links a { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
@media (max-width: 479px) { .topbar__links li:last-child { display: none; } }
.topbar__links a:hover { border-color: var(--vc-mustard-text); color: var(--vc-mustard-text); }

.hero__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 40px; }
.hero__title {
  color: var(--vc-mustard-text);
  font-weight: 700;
  font-size: clamp(2.75rem, 12.5vw, var(--vc-text-4xl));
  line-height: .93; letter-spacing: -0.025em;
  text-wrap: balance;
}
.hero__tamil {
  margin-top: 18px;
  font-weight: 700; font-size: clamp(1.5rem, 5.4vw, 2.5rem); line-height: 1.25;
  color: var(--vc-cream-text);
}
.hero__sub { margin-top: 24px; max-width: 38ch; font-size: clamp(1.0625rem, 1.8vw, 1.25rem); }

/* collage: absolute layers inside a ratio box, so it scales from 375 to 1440 */
.collage { position: relative; aspect-ratio: 1 / 1.02; width: 100%; max-width: 620px; justify-self: center; }
.layer { position: absolute; will-change: transform; }
.layer--teak  { right: 0; top: 0; width: 40%; height: 64%; }
.teak-scrap {
  width: 100%; height: 100%;
  background: url("../assets/img/teak-texture-800.webp") center / cover;
  outline: 1px solid var(--vc-mustard-text); outline-offset: -8px;
}
.layer--inset { left: 3%; top: 7%; width: 64%; }
.inset {
  background: var(--vc-red); aspect-ratio: 1;
  display: grid; place-items: center;
}
.inset vc-woven-mark { width: 62%; aspect-ratio: 1; }
.layer--chairs { left: 0; bottom: 2%; width: 60%; transform-origin: center; }
.layer--chairs .frame { transform: rotate(-3deg); }
.layer--knight { right: 1%; bottom: 0; width: 38%; }
.knight {
  width: 100%;
  clip-path: inset(0 0 0 13%);
  filter:
    drop-shadow(2px 0 0 var(--vc-mustard-text)) drop-shadow(-2px 0 0 var(--vc-mustard-text))
    drop-shadow(0 2px 0 var(--vc-mustard-text)) drop-shadow(0 -2px 0 var(--vc-mustard-text));
}
.layer--pixel { right: 44%; top: 0; width: 7%; }

/* glyph band */
.glyph-band { background: var(--vc-mustard); color: var(--vc-brick); overflow: hidden; }
.glyph-band__row {
  max-width: var(--max); margin: 0 auto;
  display: flex; gap: 36px; padding: 28px var(--gutter);
}
.glyph-band__border {
  height: 20px;
  background: url("../assets/logo/pixel-border-brick.svg") left center / auto 100% repeat-x;
  opacity: .9;
}

/* ── 2 · every move counts ─────────────────────────────────── */
.moves { padding: 72px var(--gutter) 80px; }
.moves__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.moves__visual { position: relative; margin-top: 28px; }
.teak-panel {
  position: relative;
  background: url("../assets/img/teak-texture-800.webp") center / cover;
  padding: 110px 18px 22px;
  outline: 1px solid var(--vc-mustard-text); outline-offset: -10px;
}
.checkmate { position: absolute; top: 14px; right: 22px; width: 92px; height: auto; }
.board-slot { width: 100%; max-width: 420px; margin: 0 auto; container-type: inline-size; }
/* reserve the board box (size + 32px caption) before live-board.js upgrades it */
.board-slot vc-live-board { width: 100cqw; height: calc(100cqw + 32px); }
.clock {
  position: absolute; left: -6px; top: -28px; width: 40%; max-width: 250px;
  transform: rotate(-2.5deg);
}

/* ── 3 · what we're building (teak) ────────────────────────── */
.building {
  position: relative;
  background: var(--vc-olive-deep) url("../assets/img/teak-texture-800.webp") center / cover;
  color: var(--vc-cream-text);
  display: grid; grid-template-columns: minmax(0, 1fr);
}
.building__checker { height: 140px; overflow: hidden; border-bottom: 3px solid var(--vc-mustard-text); }
.building__checker img { width: 100%; height: 100%; object-fit: cover; }
.building__inner { padding: 64px var(--gutter) 80px; max-width: var(--max); width: 100%; }
.building__tease { margin-top: 24px; color: var(--vc-cream-text); font-size: clamp(1.25rem, 2.4vw, 1.625rem); }

.slips { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.slip {
  position: relative;
  background: var(--vc-canvas) url("../assets/img/paper-texture-800.webp") center / cover;
  color: var(--vc-ink);
  padding: 24px 22px 26px;
  outline: 1px solid var(--vc-mustard-text); outline-offset: 6px;
}
.slip__glyph {
  display: inline-grid; place-items: center;
  width: 72px; height: 72px; background: var(--vc-mustard);
  margin-bottom: 18px;
}
.slip h3 { font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2rem); line-height: 1.05; letter-spacing: -0.01em; }
.slip p { margin-top: 10px; font-size: 1.0625rem; }
.slip--1 { transform: rotate(-1deg); }
.slip--2 { transform: rotate(.8deg); }
.slip--3 { transform: rotate(-.6deg); }

.more-soon {
  margin-top: 48px; display: flex; align-items: center; gap: 12px;
  font-weight: 500; font-size: 1.25rem; color: var(--vc-mustard-text);
}
.more-soon img { width: 27px; height: 27px; image-rendering: pixelated; }

/* ── 4 · woven together ───────────────────────────────────── */
.madras { position: relative; z-index: 1; }
.woven { padding: 0 0 96px; }
.woven__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.woven__visual { position: relative; padding-bottom: 72px; }
.woven__weave img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.woven__hall {
  position: absolute; right: var(--gutter); bottom: 0; width: 58%;
  transform: rotate(-2deg);
}
.woven__copy { padding: 0 var(--gutter); }

/* ── 5 · careers ──────────────────────────────────────────── */
.careers {
  position: relative; isolation: isolate;
  background: var(--vc-olive); color: var(--vc-cream-text);
  padding: 0 var(--gutter) 88px;
}
.careers::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("../assets/img/paper-texture-800.webp") center / cover;
  mix-blend-mode: multiply; opacity: .35;
}
.careers__border {
  height: 20px; margin: 0 calc(var(--gutter) * -1);
  background: url("../assets/logo/pixel-border-mustard.svg") left center / auto 100% repeat-x;
}
.careers__grid { max-width: var(--max); margin: 0 auto; padding-top: 64px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.careers__title {
  color: var(--vc-mustard-text); font-weight: 700;
  font-size: clamp(3.5rem, 15vw, 10rem); line-height: .88; letter-spacing: -0.03em;
}
.careers__copy p { font-size: clamp(1.125rem, 2.1vw, 1.375rem); max-width: 36ch; }
.careers .actions { gap: 18px; }

/* ── 6 · footer ───────────────────────────────────────────── */
.footer { color: var(--vc-ink); }
.footer__grid {
  max-width: var(--max); margin: 0 auto;
  padding: 48px var(--gutter) 40px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px;
}
.footer__brand { display: flex; align-items: center; gap: 16px; color: var(--vc-brick); }
.footer__mark { width: 52px; height: auto; }
.footer__name { font-size: 1.75rem; font-weight: 400; line-height: 1; }
.footer__tamil { font-size: 1.25rem; line-height: 1.3; color: var(--vc-brick); }
.footer__info { display: flex; flex-direction: column; gap: 4px; font-size: var(--vc-text-md); }
.footer__info a { text-decoration-color: var(--vc-line-strong); text-underline-offset: 3px; }
.footer__info a:hover { color: var(--vc-brick); }

/* ── tablet ───────────────────────────────────────────────── */
@media (min-width: 720px) {
  .hero { padding-right: calc(var(--gutter) + 40px); }
  .hero__lockup { width: 22px; right: 22px; top: 110px; }
  .slips { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 24px; align-items: start; }
  .slip--1 { grid-column: 1 / span 4; }
  .slip--2 { grid-column: 3 / span 4; margin-top: -8px; }
  .slip--3 { grid-column: 1 / span 4; margin-left: 12%; }
  .checkmate { width: 120px; }
}

/* ── desktop ──────────────────────────────────────────────── */
@media (min-width: 960px) {
  .hero { padding-left: calc(var(--gutter) + 36px); padding-bottom: 72px; }
  .hero__strip {
    display: block; position: absolute; z-index: 3;
    left: calc(var(--gutter) - 4px); top: 120px;
    width: 420px; height: 22px;
    transform-origin: top left; transform: rotate(90deg) translateY(-100%);
    background: url("../assets/logo/pixel-border-mustard.svg") left center / auto 100% repeat-x;
  }
  .hero__grid {
    grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center;
    padding-top: 56px; min-height: min(780px, calc(100svh - 160px));
  }
  .hero__copy { grid-column: 1 / span 6; position: relative; z-index: 2; }
  .collage { grid-column: 7 / span 6; max-width: none; }

  .glyph-band { display: grid; grid-template-columns: auto 1fr; align-items: center; }
  .glyph-band__row { padding: 32px 0 32px calc(var(--gutter) + 36px); gap: 54px; margin: 0; }
  .glyph-band__border { height: 30px; margin-left: 56px; }

  .moves { padding: 120px var(--gutter) 128px; }
  .moves__grid { grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
  .moves__copy { grid-column: 1 / span 5; padding-top: 48px; position: sticky; top: 48px; }
  .moves__visual { grid-column: 7 / span 6; margin-top: 40px; }
  .teak-panel { padding: 168px 48px 48px; }
  .checkmate { width: 150px; top: 22px; right: 36px; }
  .clock { left: -88px; top: -40px; width: 36%; }

  .building { grid-template-columns: minmax(200px, 22vw) 1fr; }
  .building__checker { height: auto; border-bottom: 0; border-right: 3px solid var(--vc-mustard-text); }
  .building__inner { padding: 112px var(--gutter) 120px 64px; }
  .slips { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 28px; margin-top: 64px; align-items: start; }
  .slip--1 { grid-column: 1 / span 4; margin: 0; }
  .slip--2 { grid-column: 5 / span 4; margin-top: 88px; }
  .slip--3 { grid-column: 9 / span 4; margin: 176px 0 0; }
  .more-soon { margin-top: 64px; justify-content: flex-end; padding-right: 8%; }

  .woven { padding-bottom: 128px; }
  .woven__grid { grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; }
  .woven__visual { grid-column: 1 / span 7; padding-bottom: 96px; }
  .woven__weave img { aspect-ratio: 5 / 4; }
  .woven__hall { width: 52%; right: -6%; }
  .woven__copy { grid-column: 8 / span 5; padding: 0 var(--gutter) 0 24px; }

  .careers { padding-bottom: 120px; }
  .careers__grid { grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; padding-top: 96px; }
  .careers__title { grid-column: 1 / span 7; }
  .careers__copy { grid-column: 8 / span 5; padding-bottom: 14px; }

  .footer__grid { grid-template-columns: 1fr auto; align-items: end; padding-top: 64px; }
  .footer__info { justify-self: end; text-align: right; }
}

@media (min-width: 1280px) {
  .hero { padding-left: calc(var(--gutter) + 24px); }
  .hero__strip { left: 22px; }
}

/* ── reduced motion: final static state everywhere ───────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .layer { will-change: auto; transform: none !important; }
}

/* email buttons turn into "Email copied ✓" on desktop */
a[href^="mailto:"].btn { transition: width .25s ease, background-color .15s, color .15s, border-color .15s; justify-content: center; white-space: nowrap; overflow: hidden; }
.vc-copied { display: inline-flex; align-items: center; gap: 8px; animation: vc-fade .25s ease; }
.vc-tick { flex: none; }
@keyframes vc-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { a[href^="mailto:"].btn { transition: none; } .vc-copied { animation: none; } }

/* phones: no Madras band on the homepage (2026-11-07) */
@media (max-width: 719px) { vc-madras.madras--brand { display: none !important; } }

/* small labels ("Careers", "Open roles", "For all four roles"): a touch bigger (2026-11-08) */
.kicker { font-size: 0.875rem; }

/* footer: LinkedIn button under the logo on the left; details stacked on the right (2026-11-10) */
.footer__left { display: grid; gap: 22px; justify-items: start; }
.footer__li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--vc-brick); color: var(--vc-brick); font-weight: 700; font-size: var(--vc-text-md); text-decoration: none; }
.footer__li:hover { background: var(--vc-brick); color: var(--vc-canvas); }
.footer__li:hover svg rect { fill: var(--vc-canvas); }
.footer__li:hover svg path { fill: var(--vc-brick); }