html {
  scroll-behavior: smooth;
}

.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

body {
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
}

.project-row-inner {
  transition: transform 300ms ease;
}

.project-row:hover .project-row-inner {
  transform: translateX(8px);
}

.project-title {
  transition: color 300ms ease;
}

.project-row .project-arrow {
  transition: transform 300ms ease;
}

.project-row:hover .project-arrow {
  transform: translateX(6px);
}

.nav-link {
  display: inline-block;
  /* 0.5 put the resting state at 3.4:1, under AA for 16px text */
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 250ms ease, transform 250ms ease;
}

.nav-link:hover {
  opacity: 1;
  transform: translateX(4px);
}

.nav-link.is-active {
  opacity: 1;
}

.social-link {
  cursor: pointer;
  transition: transform 250ms ease, color 250ms ease;
}

.social-link:hover {
  transform: translateX(4px);
}

/* On the responsive top bar the nav sits in a horizontally scrolling row, so a
   sideways hover just gets clipped at the edges. There it presses in instead,
   which reads like a tap. */
@media (max-width: 1023px) {
  .nav-link:hover,
  .social-link:hover {
    transform: scale(0.92);
  }

  .nav-link:active,
  .social-link:active {
    transform: scale(0.88);
  }
}

.lang-option {
  cursor: pointer;
  transition: color 200ms ease;
}

.email-link {
  cursor: pointer;
  text-decoration: none;
  text-underline-offset: 8px;
  text-decoration-thickness: 2px;
}

.email-link:hover {
  text-decoration: underline;
}

.cs-textlink-disabled {
  position: relative;
  cursor: not-allowed;
  opacity: 0.5;
}

.cs-textlink-disabled .cs-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  white-space: nowrap;
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}

.cs-textlink-disabled:hover .cs-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-8px);
}

.reading-time:empty {
  display: none;
}


/* ---- Home, built to the Figma frame (1280 wide) ---- */
:root{
  --ink:#222121;
  --page:#FEFEFE;
}

.hero{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:calc(100vh - 3.5rem); padding:3rem 0 4rem;
}
@media (min-width:1024px){ .hero{ min-height:100vh; } }

.hero-copy{ max-width:837px; padding:0 1rem; text-align:center; }
.hero-greeting{ margin:0 0 12px; font-size:16px; color:#767673; }
.hero-headline{
  margin:0; font-weight:400; color:var(--ink); letter-spacing:-0.01em;
  font-size:clamp(26px,4.2vw,42px); line-height:1.19;
}

/* The pile: every pill is the same width and they overlap, so the group reads
   as one loose stack. Each pill is placed from the centre with its own offset,
   and the pointer push is layered on top of that resting position. */
.hero-pile{
  position:relative; width:min(700px,92vw); height:160px; margin-top:clamp(16px,3vw,28px);
}
.hero-pill{
  position:absolute; top:50%; left:50%; display:block;
  transform:
    translate(-50%,-50%)
    translate(calc(var(--pill-x) * var(--pile-scale,1)), calc(var(--pill-y) * var(--pile-scale,1)))
    translate(var(--push-x,0px), var(--push-y,0px))
    rotate(calc(var(--pill-rotation) + var(--push-rotation,0deg)));
  will-change:transform;
}
.hero-pill-inner{
  display:flex; align-items:center; justify-content:center;
  width:224px; height:38px; border-radius:9999px;
  font-size:16px; font-weight:500; white-space:nowrap;
}

/* The scatter only works while there is room for it. Below that the pile
   becomes a readable stack: no overlap, no absolute positioning, just the
   tilt kept so it still feels hand-placed. */
@media (max-width:1100px){ .hero-pile{ --pile-scale:.82; height:190px; } }

@media (max-width:900px){
  .hero-pile{
    position:static; display:flex; flex-wrap:wrap; justify-content:center;
    gap:12px; width:100%; height:auto; margin-top:32px; padding:0 8px;
  }
  .hero-pill{
    position:static; transform:rotate(var(--pill-rotation));
  }
  .hero-pill-inner{ width:auto; padding:0 22px; }
}

@media (max-width:520px){
  .hero-pile{ gap:10px; }
  .hero-pill{ transform:none; }
  .hero-pill-inner{ font-size:15px; height:34px; padding:0 18px; }
}

/* ---- Work: a 2x2 grid of covers ---- */
.project-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:71px 60px;
  max-width:860px; margin:0 auto;
}
.project-card{ display:block; text-decoration:none; color:inherit; }
.project-cover{
  display:block; overflow:hidden; border-radius:14px; background:#F4F3EF;
  aspect-ratio:400/239;
}
.project-cover img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .45s ease;
}
.project-card:hover .project-cover img{ transform:scale(1.03); }

.project-card-meta{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:12px;
}
.project-title-row{ display:flex; align-items:baseline; gap:10px; min-width:0; }
.project-title{ font-size:16px; color:var(--ink); transition:color .25s ease; }
.project-card:hover .project-title{ color:var(--project-color); }
.project-card .reading-time{ font-size:14px; color:#767676; flex-shrink:0; }
.project-soon{
  font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:#6F6F6F; background:#F1F0EC; border-radius:999px; padding:3px 8px;
}

/* Subtler than .project-soon: a plain label, no pill, just the pulsing dot
   that already means "still moving" in the case studies themselves. */
.project-progress{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; color:#767676; flex-shrink:0;
}
.project-progress::before{
  content:""; width:6px; height:6px; border-radius:999px; flex-shrink:0;
  background:#9B9B98; animation:project-progress-pulse 2s ease-in-out infinite;
}
@keyframes project-progress-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
@media (prefers-reduced-motion: reduce){ .project-progress::before{ animation:none } }
@media (max-width:720px){
  .project-grid{ grid-template-columns:1fr; gap:40px; }
}

/* On touch there is no hover, so the press-in doubles as the feedback */
@media (max-width:1023px){
  .project-card:active .project-cover img{ transform:scale(.97); }
}

/* Colour trail that follows the pointer. The overlay is clipped to the page so
   it can never be what widens it, which is what a visible scrollbar exposed. */
html, body{ max-width:100%; overflow-x:clip; }
.cursor-trail{ position:fixed; top:0; left:0; z-index:50; pointer-events:none; }