/* amitch.design — project pages (WIP, Karly, Früh)
   Desktop is measured from the 1920px mockups: 1 mockup pixel = var(--px).
   Small text never drops below a readable floor; phones get their own
   layout from the mobile mockups (390px frame). */

:root {
  --dark: #1E1D1C;
  --light: #E8E8E8;
  --white: #FFFFFF;
  --bg: var(--dark);
  --fg: var(--white);
  --line: color-mix(in srgb, var(--fg) 38%, transparent);
  --px: calc(100vw / 1920);
  /* Fixed spacing (Amit, Oct 17): images 10px apart and 10px from the window edge, 20px corners,
     40px between text and images. Phones: 6px / 10px / 25px. */
  --edge: 10px;      /* images to the window edge = the gap, so every edge lines up */
  --gap: 10px;       /* between images, including carousel cards */
  --radius: 20px;
  --text-gap: 40px;  /* between text and the image above or below it */
  --air: max(calc(120 * var(--px)), 40px); /* breathing room around cut-out objects */
  --inset: max(calc(53 * var(--px)), 20px);    /* text to the window edge */
  --header-h: max(calc(72 * var(--px)), 52px);
  --ease: cubic-bezier(.22,.61,.36,1);
  color-scheme: dark;
}
/* project pages are always dark (Amit, Oct 17): no light mode, no colour transitions */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); }
body {
  margin: 0;
  font-family: var(--font);
  letter-spacing: -0.02em;  /* Amit, Oct 17: all type 2% tighter */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
  color: var(--fg);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }

/* ---------- Header (hides while scrolling down, returns on scroll up) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(calc(19 * var(--px)), 10px);
  background: var(--bg);
  transition: transform .45s var(--ease);
}
.site-header.is-hidden { transform: translateY(-100%); }
.brand { display: flex; align-items: center; gap: max(calc(24 * var(--px)), 10px); }
.logo, .site-nav a {
  font-size: max(calc(40 * var(--px)), 20px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1;
}
.site-nav { display: flex; gap: max(calc(44 * var(--px)), 16px); }
/* the end of the hover line sits on the image edge below */
.site-nav a:last-child { margin-right: calc(.08em - (max(calc(19 * var(--px)), 10px) - var(--edge))); }




/* ---------- Tiles ---------- */
.content { padding: 0 var(--edge); }
.tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: var(--ar, 1900 / 1060);
  background: color-mix(in srgb, var(--fg) 8%, var(--bg));
}
.tile img, .tile video { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile--empty::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .5;
}
.row { display: grid; gap: var(--gap); margin-top: var(--gap); }
.row--2 { grid-template-columns: 1fr 1fr; }
.hero { margin-top: 0; }

/* ---------- Intro ---------- */
.intro { padding: var(--text-gap) calc(var(--inset) - var(--edge)); }
.intro__head { display: contents; }
.intro__title {
  margin: 0;
  font-size: max(calc(42 * var(--px)), 26px);
  font-weight: 600;
  letter-spacing: -0.050em;
  line-height: 1;
}
.intro__head .intro__tagline { display: none; }
.rule { height: 0; border: 0; border-top: 1px solid var(--line); margin: 0; }
.intro .rule:first-of-type { margin-top: max(calc(40 * var(--px)), 20px); }
.intro__industry {
  display: grid;
  grid-template-columns: calc(245 * var(--px)) 1fr;
  align-items: center;
  padding: max(calc(38 * var(--px)), 18px) 0;
}
.intro__tagline {
  font-size: max(calc(42 * var(--px)), 24px);
  font-weight: 300;
  letter-spacing: -0.040em;
  line-height: 1.1;
}
.label {
  display: block;
  font-size: max(calc(15 * var(--px)), 11px);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: -0.010em;
  line-height: 1.6;
}
.label--strong { font-family: var(--font-label); font-weight: 700; letter-spacing: 0; }
.intro__cols {
  display: grid;
  grid-template-columns: calc(245 * var(--px)) calc(662 * var(--px)) 1fr;
  padding-top: max(calc(36 * var(--px)), 18px);
}
.intro__cols .label--strong { margin-bottom: max(calc(16 * var(--px)), 8px); }
.services { list-style: none; margin: 0; padding: 0; }
.services li { font-size: max(calc(17 * var(--px)), 12px); font-weight: 300; line-height: 1.76; text-transform: uppercase; }
.services__inline { display: none; }
.body, .note p {
  font-size: max(calc(17 * var(--px)), 13px);
  line-height: 1.76;
  letter-spacing: -0.035em;  /* Amit, Oct 17: paragraphs 4% tighter */
  font-weight: 300;
}
.intro__brief .body { max-width: calc(545 * var(--px)); }
.intro__about .body { max-width: calc(730 * var(--px)); }

/* ---------- Notes (CONCEPT, VISUAL LANGUAGE) ---------- */
.note {
  padding: var(--text-gap) calc(var(--inset) - var(--edge));
  max-width: calc(var(--inset) + 680 * var(--px));
  box-sizing: content-box;
}
.note .label { margin-top: 0; margin-bottom: max(calc(14 * var(--px)), 8px); }
.note p { max-width: calc(640 * var(--px)); }
.note + .row, .note + .carousel, .intro + .row, .intro + .carousel { margin-top: 0; }

/* ---------- Objects on the page background (sweatshirts, flyers, six-pack) ---------- */
.object {
  display: flex;
  justify-content: center;
  gap: calc(40 * var(--px));
  padding: 0 0 var(--air);
}
.object img { width: var(--w, 50%); height: auto; margin: 0; }
.row + .object, .carousel + .object { padding-top: var(--air); }

/* ---------- Carousel (creator cards, posters) ---------- */
.carousel {
  --cards: var(--cards-d, 4.06);  /* how many cards fit across the window */
  --card-gap: var(--gap);
  margin: var(--gap) calc(-1 * var(--edge)) 0;
  display: flex;
  gap: var(--card-gap);
  padding: 0 var(--edge);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--edge);
  scrollbar-width: none;
  cursor: grab;
  overscroll-behavior-x: contain;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.carousel .tile {
  flex: 0 0 calc((100vw - var(--edge) - var(--card-gap) * (var(--cards) - 1)) / var(--cards));
  scroll-snap-align: start;
  aspect-ratio: var(--ar, 449 / 815);
}
.carousel img { pointer-events: none; -webkit-user-drag: none; user-select: none; }
.object + .carousel { margin-top: 0; }

/* ---------- Project navigation + outro ---------- */
.project-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 25px 0 0;   /* last image to the buttons (Amit, Oct 17) */
}
.object:has(+ .project-nav) { padding-bottom: 0; }
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(547 * var(--px));
  height: calc(142 * var(--px));
  border-radius: 999px;
  font-size: calc(88 * var(--px));
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  padding-bottom: .04em;
  box-shadow: inset 0 0 0 1px var(--fg);
  transition: background-color .35s ease, color .35s ease;
}
.pill--solid { background: var(--fg); color: var(--bg); }
/* ---------- Colour palette (Pulse): stacked swatches, each tucking under the next one's rounded top ---------- */
.palette {
  position: relative;
  margin-top: var(--gap);
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: var(--ar);
}
.palette__set { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(4, 1fr); }
.palette__set + .palette__set .swatch { transform: translateY(var(--from, 120vh)); }
.swatch {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 0;
  margin-bottom: calc(-1 * var(--radius));
  padding: 0 calc(var(--inset) - var(--edge)) calc(var(--radius) + max(calc(46 * var(--px)), 14px));
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--c);
  color: var(--t);
  font-size: max(calc(17 * var(--px)), 10px);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.swatch:last-child { margin-bottom: 0; padding-bottom: max(calc(46 * var(--px)), 14px); }
.swatch span:first-child { width: max(calc(225 * var(--px)), 72px); }
.tile picture { display: contents; }

@media (hover: hover) {
  .pill:hover { background: var(--fg); color: var(--bg); }
  .pill--solid:hover { background: transparent; color: var(--fg); }
}
.pill__short { display: none; }

.outro {
  margin: 60px 0 0;     /* buttons to the footer text, every page (Amit, Oct 17) */
  padding: 0 max(calc(8 * var(--px)), 0px);
  font-size: calc(80 * var(--px));
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: .98;
}

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 16px;
  padding: calc(40 * var(--px)) max(calc(18 * var(--px)), 10px) max(calc(14 * var(--px)), 12px);
}
.copyright, .clock { font-size: max(calc(15 * var(--px)), 11px); }
.copyright { font-weight: 300; }
.clock { display: flex; gap: calc(18 * var(--px)); font-family: var(--font-label); font-weight: 600; letter-spacing: 0; text-transform: uppercase; font-variant-numeric: tabular-nums; opacity: .85; }
.footer-end { display: flex; align-items: center; justify-content: flex-end; gap: calc(18 * var(--px)); }
.contact-link {
  font-size: max(calc(40 * var(--px)), 20px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1;
}
.social { display: flex; align-items: center; gap: calc(14 * var(--px)); }
.social a { display: block; line-height: 0; transition: opacity .25s ease; }
.social a:hover { opacity: .7; }
.social svg { width: max(calc(36 * var(--px)), 20px); height: max(calc(36 * var(--px)), 20px); }

/* =========================================================
   Tablet / small laptop: same grid, text gets room to breathe
   ========================================================= */
@media (max-width: 1100px) and (min-width: 701px) {
  .intro__industry { grid-template-columns: 180px 1fr; }
  .intro__cols { grid-template-columns: 180px 1fr; row-gap: 32px; column-gap: 40px; }
  .intro__about { grid-column: 2; }
  .intro__brief .body, .intro__about .body { max-width: 640px; }
  .note p { max-width: 520px; }
  .note { max-width: none; }
  .pill { font-size: 40px; height: 72px; width: 280px; }
  .outro { font-size: 48px; margin-top: 140px; }
  .carousel { --cards: 3.2; }
  .site-footer { grid-template-columns: 1fr auto; }
  .clock { display: none; }
}

/* =========================================================
   Phones (from the 390px mobile mockups)
   ========================================================= */
@media (max-width: 700px) {
  :root {
    --edge: 6px;
    --gap: 6px;
    --radius: 10px;
    --text-gap: 25px;
    --inset: 16px;
    --header-h: 40px;
  }
  .site-header { padding: 0 6px 0 7px; }
  .logo { font-size: 21px; }
  .brand { gap: 8px; }
  .site-nav { display: none; }

  .row--2 { grid-template-columns: 1fr; }
  .tile { aspect-ratio: var(--ar-m, var(--ar, 1900 / 1060)); }
  .hero { aspect-ratio: var(--ar-m, 361 / 500); }
  /* WIP: the video's content (x 416–1504, y 154–981 of 1920×1080) is scaled up to just fill the width,
     on the video's own background colour */
  .project--wip .hero { position: relative; background: #EFEFEF; }
  .project--wip .hero video {
    position: absolute; left: 0; top: 50%;
    height: auto; aspect-ratio: 16 / 9;
    transform-origin: 50% 52.5%;
    transform: translateY(-50%) scale(1.74);
  }
  .row--1 .tile { aspect-ratio: var(--ar-m, 378 / 345); }
  .row--2 .tile { aspect-ratio: var(--ar-m, 361 / 420); }
  .row--m-reverse > :first-child { order: 2; }
  .palette { aspect-ratio: var(--ar-m, var(--ar)); }
  .palette__set { grid-template-rows: 1fr 1fr 1fr 1.8fr; }
  .swatch { font-size: 11px; padding-bottom: calc(var(--radius) + 12px); }
  .swatch:last-child { padding-bottom: 12px; }
  .swatch span:first-child { width: 83px; }

  .intro { padding: var(--text-gap) 10px; }
  .intro__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; }
  .intro__head .intro__tagline { display: block; font-size: 20px; font-weight: 300; text-align: right; }
  .intro__title { font-size: 30px; }
  .intro .rule:first-of-type { margin-top: 0; }
  .intro__industry { display: none; }
  .intro .rule + .rule, .intro__industry + .rule { display: none; }
  .intro__cols { display: flex; flex-direction: column; padding-top: 20px; }
  .intro__brief { order: 1; }
  .intro__services { order: 2; margin-top: 26px; }
  .intro__about { order: 3; margin-top: 30px; }
  .intro__brief .label--strong { display: flex; justify-content: space-between; margin-bottom: 18px; }
  .intro__brief .label--strong::after { content: attr(data-industry); font-family: var(--font); font-weight: 300; }
  .intro__services .label--strong, .services { display: none; }
  .services__inline { display: block; font-size: 11.5px; line-height: 1.9; text-transform: uppercase; }
  .intro__about .label--strong { margin-bottom: 18px; }
  .label { font-size: 12.5px; }
  .body, .note p { font-size: 13.5px; line-height: 1.45; }
  .intro__brief .body, .intro__about .body { max-width: none; }

  .note { padding: var(--text-gap) 10px; max-width: none; }
  .note p { max-width: 34em; }
  .note .label { margin-bottom: 10px; }

  .object { flex-direction: column; align-items: center; gap: 24px; }
  :root { --air: 40px; }
  .object img { width: var(--w-m, 92%); }

  .carousel { --cards: var(--cards-m, 1.42); }

  .pill { width: auto; height: auto; padding: .26em .95em .3em; font-size: 28px; }
  .pill__long { display: none; }
  .pill__short { display: inline; }

  .outro { padding: 0 10px; font-size: 38px; }
  .site-footer {
    grid-template-columns: 1fr auto;
    grid-template-areas: "contact contact" "copy social";
    row-gap: 12px;
    padding: 6px 10px max(12px, env(safe-area-inset-bottom));
  }
  .footer-end { display: contents; }
  /* contact sits under the sentence, lined up with its left edge (Amit, Oct 28) */
  .contact-link { grid-area: contact; font-size: 27px; justify-self: start; margin: 14px 0 0 6px; }
  .copyright { grid-area: copy; font-size: 12px; }
  .social { grid-area: social; gap: 10px; }
  .social svg { width: 22px; height: 22px; }
  .clock { display: none; }
}

/* =========================================================
   Entrance motion: pick one with <html data-anim="fade|rise|mask">.
   Elements marked .reveal animate once when they enter the window.
   ========================================================= */
.js .reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js[data-anim="fade"] .reveal:not(.is-in) { opacity: 0; }
.js[data-anim="rise"] .reveal:not(.is-in) { opacity: 0; transform: translateY(32px); }
/* mask (the chosen entrance): images fade up quickly, text follows with a soft rise */
.js[data-anim="mask"] .tile.reveal, .js[data-anim="mask"] .object img.reveal { transition: opacity .35s ease-out, transform .45s var(--ease); transition-delay: var(--delay, 0s); }
.js .reveal.no-anim { transition: none !important; }
.js[data-anim="mask"] .tile.reveal:not(.is-in), .js[data-anim="mask"] .object img.reveal:not(.is-in) { opacity: 0; transform: translateY(16px); }
.js[data-anim="mask"] .reveal:not(.tile):not(img):not(.is-in) { opacity: 0; transform: translateY(14px); }
.js .reveal { transition-delay: var(--delay, 0s); }

/* page load: the header and hero settle in like the opening page */
.js .page-enter { opacity: 0; filter: blur(6px); transition: opacity 1s var(--ease), filter 1s var(--ease); }
.js .page-enter.is-in { opacity: 1; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal img, .js .page-enter { transition: opacity .6s ease !important; transform: none !important; clip-path: none !important; filter: none !important; }
  .js[data-anim="mask"] .tile.reveal:not(.is-in) img { opacity: 0; }
}

/* Preview-only switcher for comparing entrance motion (html[data-preview]) */
.anim-switch {
  position: fixed; z-index: 40; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 92%, transparent); color: var(--bg);
  font: 500 13px/1 var(--font); box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.anim-switch button { border: 0; border-radius: 999px; padding: 9px 14px; background: none; color: inherit; font: inherit; cursor: pointer; }
.anim-switch button[aria-pressed="true"] { background: var(--bg); color: var(--fg); }

/* ---------- Layered images (Pulse): the parts move over a still background ---------- */
/* the stage keeps the image's own proportions and covers the tile like object-fit: cover */
.tile--layers { container-type: size; }
.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 100cqh * var(--sarn));
  aspect-ratio: var(--sar);
  transform: translate(-50%, -50%);
}
.stage .stage__bg { position: absolute; inset: 0; }
.layer { position: absolute; display: block; will-change: transform; }
.tile .layer img { object-fit: contain; }
.layer--card img { filter: drop-shadow(0 .35cqw 1.1cqw rgba(0, 0, 0, .16)); }
.stage--float .layer { animation: layer-float var(--dur) ease-in-out var(--del) infinite alternate; }
.stage--drift .layer { animation: layer-drift var(--dur) ease-in-out var(--del) infinite; }
/* breathe (Pulse hero, Amit Oct 27): each part only swells and settles, no drifting */
.stage--breathe .layer { animation: layer-breathe var(--dur) ease-in-out var(--del) infinite alternate; }
.stage--orbit .layer { transform-origin: var(--ox) var(--oy); animation: layer-orbit 60s linear infinite; }
.stage--orbit .layer img { animation: layer-orbit 60s linear infinite reverse; }
@keyframes layer-float {
  from { transform: translate(0, 0) rotate(0deg); }
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1.035); }
}
@keyframes layer-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(var(--dx), calc(var(--dy) * -1)) rotate(var(--r)); }
  50% { transform: translate(calc(var(--dx) * .4), var(--dy)) rotate(calc(var(--r) * -.5)); }
  75% { transform: translate(calc(var(--dx) * -1), calc(var(--dy) * .3)) rotate(calc(var(--r) * -1)); }
}
@keyframes layer-orbit { to { transform: rotate(360deg); } }
@keyframes layer-breathe { from { transform: scale(1); } to { transform: scale(1.035); } }
/* desktop Pulse hero (Amit, Oct 28): the swell was too faint to notice there, so it breathes deeper */
@media (min-width: 701px) {
  .tile.hero .stage--breathe .layer { animation-name: layer-breathe-deep; }
}
@keyframes layer-breathe-deep { from { transform: scale(1); } to { transform: scale(1.08); } }
.stage video.stage__bg { width: 100%; height: 100%; object-fit: cover; }
.stage .layer.layer--still { animation: none !important; }
/* all the lines write themselves out together, in one smooth stroke (Amit, Oct 29) */
.layer--write img { clip-path: inset(0 100% 0 0); animation: layer-write var(--wd) cubic-bezier(.45, .05, .35, 1) var(--wdl) forwards; }
@keyframes layer-write { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .layer--write img { clip-path: none; animation: none; } }
/* circle (Pulse hero, Amit Oct 29): each object goes slowly round its own small orbit, staying upright */
.stage--circle .layer { animation: layer-circle-s calc(var(--dur) * 2.8) linear var(--del) infinite; }
.stage--circle .layer:nth-child(odd) { animation-direction: reverse; }
@keyframes layer-circle-s {
  from { transform: rotate(0deg) translateX(.9cqw) rotate(0deg); }
  to { transform: rotate(360deg) translateX(.9cqw) rotate(-360deg); }
}
/* off screen the parts stand still (project.js marks the tiles in view) */
.tile--layers:not(.is-live) .layer, .tile--layers:not(.is-live) .layer img { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .layer, .layer img { animation: none !important; } }
/* phones: layered images with a layout of their own (Pulse hero and collage, Amit's mobile mockup) */
@media (max-width: 700px) {
  .stage--m { --sar: var(--sar-m) !important; --sarn: var(--sarn-m) !important; }
  .stage--m .layer { left: var(--xm) !important; top: var(--ym) !important; width: var(--wm) !important; height: var(--hm) !important; }
  .stage--m .layer--m-hide { display: none; }
  /* Pulse hero on phones (Amit, Oct 27): each part goes slowly round its own small orbit, staying upright, and still breathes */
  .stage--breathe.stage--m .layer { animation: layer-circle calc(var(--dur) * 2) linear var(--del) infinite, layer-swell var(--dur) ease-in-out var(--del) infinite alternate; }
}
@keyframes layer-circle {
  from { transform: rotate(0deg) translateX(2.2cqw) rotate(0deg); }
  to { transform: rotate(360deg) translateX(2.2cqw) rotate(-360deg); }
}
/* Pulse hero: a video takes the collage's place on phones */
.tile.hero .hero__m { display: none; }
@media (max-width: 700px) {
  .hero--vm .stage, .row--m-hide { display: none; }
  .tile.hero--vm .hero__m { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}
@keyframes layer-swell { from { scale: 1; } to { scale: 1.035; } }

/* ---------- Cycling tile (Pulse "Your month"): the photos swap in quick cuts ---------- */
.tile--cycle { position: relative; }
.tile--cycle img { position: absolute; inset: 0; opacity: 0; }
.tile--cycle img.is-on { opacity: 1; }

/* a single upright picture on a row of its own: half the width, centred (phones: full width) */
@media (min-width: 701px) { .row--narrow { width: calc(50% - var(--gap) / 2); margin-inline: auto; } }