/* ==========================================================================
   Sharvani SP — portfolio
   Built from the Figma frame "Portfolio final 1" (page 2).
   Colours and type live in :root so they're easy to tune.
   ========================================================================== */

:root {
  --paper: #0e0e0e;            /* page background */
  --ink: #ffffff;              /* main text on dark */
  --dark-ink: #000000;         /* text on the paper sheet */
  --muted: rgba(255, 255, 255, 0.75);
  --faint: #8a8a85;
  --line: rgba(255, 255, 255, 0.14);
  --blue: #0086fa;             /* the accent blue used across the frame */
  --mustard: #ebaf36;          /* chips on the about card */
  --tag: #e4e4e4;              /* project tags */
  --ph: #e5ebde;               /* empty project image panel */
  --sheet: #ecebe7;            /* paper colour, for the phone layout */

  --display: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --serif: "Averia Serif Libre", Georgia, serif;   /* the line under the name */

  --gutter: clamp(1rem, 4vw, 3.5rem);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* One Figma pixel: the page is laid out on the 1440px frame and scales down with the window */
  --u: min(1px, calc(100vw / 1440));
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; font-weight: inherit; }
b { font-weight: 500; }

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

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

.skip {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 0.6rem 0.9rem; text-decoration: none;
}
.skip:focus { top: 1rem; }

.noscript { padding: 2rem var(--gutter); }

/* ---------- Frame layout ----------
   A .frame is one band of the Figma frame, 1440 wide and --h tall (in Figma pixels).
   An .at element sits at its Figma position inside it: --x, --y, --w. */

.frame {
  position: relative;
  width: calc(1440 * var(--u));
  height: calc(var(--h) * var(--u));
  margin: 0 auto;
}
.at {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
}

/* ---------- Top nav ---------- */

.top-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; justify-content: center; align-items: center;
  height: calc(105 * var(--u)); min-height: 72px;
  pointer-events: none;
}
.top-nav > * { pointer-events: auto; }
.top-nav::before {
  content: ""; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none;
  background: linear-gradient(#0e0e0e 55%, rgba(14, 14, 14, 0));
  opacity: 0; transition: opacity 0.3s;
}
.top-nav.is-scrolled::before { opacity: 1; }

.logo {
  position: absolute; left: max(var(--gutter), calc(50% - 602 * var(--u)));
  display: flex; align-items: center; gap: 1px; text-decoration: none;
  font-weight: 600; font-size: 16px; letter-spacing: -0.2px; line-height: 24px; color: var(--ink);
}
.logo img { width: 53px; height: 53px; }

.pill {
  display: flex; align-items: center; gap: 12px;
  padding: 4.5px 19px;
  border: 1px solid #2c2c2c; border-radius: 24px;
  background: rgba(14, 14, 14, 0.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pill a {
  padding: 4px 12px; border-radius: 40px;
  font-size: 16px; line-height: 22.1px; color: var(--ink); text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.pill a:hover { color: var(--blue); }
.pill a.is-active { background: rgba(255, 255, 255, 0.1); }

/* ---------- Moving dot grid behind the hero and the statement (js/dot-grid.js) ---------- */

.dots-zone { position: relative; isolation: isolate; }
.dots-bg {
  /* window-tall; js/dot-grid.js slides it down the section as you scroll */
  position: absolute; top: 0; left: 0; z-index: -1;
  width: 100%; height: 100vh;
  pointer-events: none;
}

/* ---------- Hero: the paper sheet ---------- */

.paper { z-index: 0; }
.clip { z-index: 3; }
.hey { z-index: 1; }

.tabs li {
  writing-mode: vertical-rl;
  font-size: calc(16 * var(--u)); line-height: calc(33 * var(--u)); letter-spacing: calc(-0.16 * var(--u));
  color: var(--paper);
}

.hero-name {
  font-weight: 700; font-size: calc(96 * var(--u)); line-height: calc(114.2 * var(--u));
  letter-spacing: calc(-7.68 * var(--u)); text-align: center; white-space: nowrap;
  color: var(--blue);
}
/* the liquid wobble filter lives in index.html; js/liquid-name.js switches it on */
.liquid-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hero-name.is-liquid { filter: url(#liquid); }
.hero-role {
  font-size: calc(24 * var(--u)); line-height: calc(24 * var(--u)); letter-spacing: calc(-0.48 * var(--u));
  text-align: center; white-space: nowrap; color: var(--dark-ink);
}
.hero-line {
  font-family: var(--serif);
  font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u)); letter-spacing: calc(-0.2 * var(--u));
  text-align: center; color: var(--dark-ink);
}
.hero-line b { font-weight: 700; }

/* The two buttons stay centred on the sheet now that they carry arrows */
.hero-ctas {
  left: calc(453 * var(--u)); width: calc(533 * var(--u));
  display: flex; justify-content: center; align-items: center; gap: calc(12 * var(--u));
}
.btn {
  display: inline-flex; align-items: center; gap: calc(8 * var(--u));
  padding: calc(4.8 * var(--u)) calc(14 * var(--u)) calc(4.8 * var(--u)) calc(16.8 * var(--u));
  border: 1px solid rgba(0, 0, 0, 0.8); border-radius: 49px;
  font-size: calc(14 * var(--u)); line-height: 1.5; color: var(--dark-ink); text-decoration: none; white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover { background: var(--dark-ink); border-color: var(--dark-ink); color: #fff; }
.btn-solid { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-solid:hover { background: #006fd0; border-color: #006fd0; }

/* Arrow icons: two copies in a small window, so one can leave as the other arrives */
.btn-icon {
  position: relative; overflow: hidden; flex: none;
  width: max(10px, calc(12 * var(--u))); height: max(10px, calc(12 * var(--u)));
}
.btn-icon svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
/* Explore my work: the arrow keeps slipping downward */
.icon-down svg { animation: arrow-down 1.6s var(--ease) infinite; }
.icon-down svg + svg { translate: 0 -100%; animation-name: arrow-down-in; }
.btn:hover .icon-down svg { animation-duration: 0.8s; }
@keyframes arrow-down    { 0%, 35% { translate: 0 0; }     100% { translate: 0 100%; } }
@keyframes arrow-down-in { 0%, 35% { translate: 0 -100%; } 100% { translate: 0 0; } }
/* Resume: the ↗ flies out of the corner and a new one slides in on hover */
.icon-out svg { transition: translate 0.45s var(--ease); }
.icon-out svg + svg { translate: -100% 100%; }
.btn:hover .icon-out svg { translate: 100% -100%; }
.btn:hover .icon-out svg + svg { translate: 0 0; }

.sticker { z-index: 2; transition: transform 0.4s var(--ease); }
.sticker:hover { transform: rotate(-4deg) scale(1.03); }
.st-star { z-index: 1; pointer-events: none; }

/* ---------- Statement ---------- */

.statement-box { padding: calc(8 * var(--u)) calc(16 * var(--u)); }
.statement p {
  display: grid; gap: calc(22 * var(--u));
  font-weight: 300; font-size: calc(32 * var(--u)); line-height: calc(40.32 * var(--u)); letter-spacing: calc(-0.64 * var(--u));
  text-align: center;
}
.s-line { display: block; }

/* ---------- Selected works ---------- */

.works-title {
  font-weight: 600; font-size: calc(64 * var(--u)); line-height: calc(114.2 * var(--u)); letter-spacing: calc(1.28 * var(--u));
  text-align: center; white-space: nowrap; color: var(--blue);
}
.works-title span { font-weight: 700; font-size: calc(96 * var(--u)); letter-spacing: calc(-4.8 * var(--u)); }

.tape { z-index: 1; }
.tape img { width: 100%; }
.tape p {
  position: absolute; left: calc(45 * var(--u)); top: calc(66 * var(--u)); width: calc(289 * var(--u));
  font-size: calc(16 * var(--u)); line-height: calc(19 * var(--u)); letter-spacing: calc(0.16 * var(--u));
  text-align: center; color: var(--dark-ink); rotate: -2deg;
}

.work-grid {
  position: absolute; left: calc(121 * var(--u)); top: calc(396 * var(--u)); width: calc(1200 * var(--u));
  display: grid; grid-template-columns: 1fr 1fr; align-items: start;
  column-gap: calc(128 * var(--u)); row-gap: calc(141 * var(--u));
}
/* Figma staggers the right-hand column a touch lower */
.project:nth-child(2) { margin-top: calc(12 * var(--u)); }
.project-link { display: block; text-decoration: none; }
.project-media {
  position: relative; overflow: hidden;
  aspect-ratio: 536 / 368; background: #232323; border: 1px solid rgba(22, 22, 22, 0.12);
}
.project-media img, .project-media .ph {
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity 0.5s ease, transform 0.8s var(--ease);
}
.ph { background: var(--ph); }
/* On hover / focus a second image (content.js `hover`) fades in over the cover, with a slow zoom */
.project-hover { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); }
.project-link:hover .project-hover,
.project-link:focus-visible .project-hover { opacity: 1; transform: scale(1); }
.project-link:hover .project-media > :first-child { transform: scale(1.03); }

.project h3 {
  margin-top: calc(17 * var(--u));
  font-weight: 300; font-size: max(20px, calc(35.2 * var(--u))); line-height: max(22px, calc(37 * var(--u))); letter-spacing: calc(-1.1 * var(--u));
  transition: color 0.2s;
}
.project-link:hover h3 { color: var(--blue); }
.project-summary {
  margin-top: calc(4 * var(--u));
  font-weight: 200; font-size: max(13px, calc(17.3 * var(--u))); line-height: max(18px, calc(24.2 * var(--u)));
}
.project-tags {
  display: flex; flex-wrap: wrap; gap: 4px calc(23 * var(--u));
  margin-top: calc(17 * var(--u));
  font-weight: 500; font-size: max(10px, calc(11.8 * var(--u))); line-height: 1.5; letter-spacing: 0.7px;
  color: var(--tag);
}

/* ---------- About ---------- */

.big-label {
  font-weight: 500; font-size: calc(64 * var(--u)); line-height: calc(64 * var(--u)); letter-spacing: calc(-2.56 * var(--u));
  white-space: nowrap;
}
.big-label span { font-weight: 700; }

/* The basket with its stickers. Each piece sits at its Figma spot inside the 550.4 × 715 box (--sx, --sy, --sw). */
.cart { aspect-ratio: 550.4 / 715; }
.cart img {
  position: absolute;
  left: calc(var(--sx) / 550.4 * 100%); top: calc(var(--sy) / 715 * 100%);
  width: calc(var(--sw) / 550.4 * 100%); max-width: none;
  pointer-events: none; user-select: none;
}

/* Scroll story (desktop, set up by js/about-scroll.js): the section stays put while you scroll
   through a taller track, the stickers fall in and the card text is uncovered.
   --u is shrunk here so the part from the title to the bottom of the card (Figma y 60 to 1060)
   fits on screen under the nav bar while it is pinned. */
.js-about-pin .about-track { height: calc(var(--track-h, 1120px) + var(--travel, 240vh)); }
.js-about-pin .about {
  --u: min(1px, calc(100vw / 1440), calc((100svh - 84px) / 1000));
  position: sticky; top: calc(76px - 60 * var(--u));
}
.js-about .cart-item { visibility: hidden; will-change: transform; }
/* once the basket is full the stickers can be picked up and put anywhere */
.cart.is-full { z-index: 3; }
.cart.is-full .cart-item { pointer-events: auto; touch-action: none; cursor: grab; }
.cart .cart-item.is-held { cursor: grabbing; filter: drop-shadow(0 calc(14 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.45)); }
.js-about .uncover { clip-path: inset(0 0 100% 0); will-change: clip-path, transform; }

.receipt {
  height: calc(918 * var(--u));
  padding: calc(136 * var(--u)) calc(30 * var(--u)) 0 calc(52 * var(--u));
  background: var(--blue);
  /* wavy bottom edge, like a torn receipt: a solid body plus a row of round bumps */
  --scallop: calc(24 * var(--u));
  --bump: calc(var(--scallop) * 0.5);
  -webkit-mask:
    linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--bump)) no-repeat,
    radial-gradient(circle at 50% 0, #000 calc(var(--bump) - 0.5px), transparent var(--bump)) 0 100% / var(--scallop) var(--bump) repeat-x;
  mask:
    linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--bump)) no-repeat,
    radial-gradient(circle at 50% 0, #000 calc(var(--bump) - 0.5px), transparent var(--bump)) 0 100% / var(--scallop) var(--bump) repeat-x;
}
.r-hey { font-weight: 500; font-size: calc(48 * var(--u)); line-height: calc(48 * var(--u)); letter-spacing: calc(-0.96 * var(--u)); }
.r-lead {
  width: calc(599 * var(--u)); margin-top: calc(24 * var(--u));
  font-size: calc(32 * var(--u)); line-height: calc(38.4 * var(--u)); letter-spacing: calc(-2 * var(--u));
}
.r-small { width: calc(613 * var(--u)); margin-top: calc(56 * var(--u)); font-weight: 300; font-size: calc(24 * var(--u)); line-height: calc(24 * var(--u)); }
.r-turn { margin-top: calc(55 * var(--u)); font-size: calc(32 * var(--u)); line-height: calc(32 * var(--u)); }
.r-last { width: calc(599 * var(--u)); margin-top: calc(12 * var(--u)); }
.chips {
  display: flex; gap: calc(12 * var(--u));
  /* the dashed line sits 98px under the last paragraph, the chips 59px under the line */
  margin: calc(98 * var(--u)) 0 0 calc(-9 * var(--u));
  padding: calc(59 * var(--u)) 0 0;
  width: calc(631 * var(--u));
  background: repeating-linear-gradient(to right, #000 0 calc(6 * var(--u)), transparent calc(6 * var(--u)) calc(12 * var(--u))) 0 0 / 100% 2px no-repeat;
}
.chips li {
  padding: calc(8 * var(--u)) calc(15 * var(--u));
  background: var(--mustard); border: 1.6px solid #454545; border-radius: 32px;
  font-size: calc(20 * var(--u)); line-height: 1.5; color: var(--dark-ink); white-space: nowrap;
}

/* ---------- Design approach ---------- */

.approach-title { font-weight: 500; font-size: calc(64 * var(--u)); line-height: calc(64 * var(--u)); white-space: nowrap; }
.approach-sub { font-weight: 300; font-size: calc(24 * var(--u)); line-height: calc(24 * var(--u)); white-space: nowrap; }

.big-star { height: auto; overflow: visible; fill: none; stroke: var(--blue); stroke-width: 1; pointer-events: none; }
/* the outlined star turns slowly, all the time */
.big-star .spin { transform-box: fill-box; transform-origin: center; animation: spin 60s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }

/* Three tilted cards, placed by their Figma centre (--cx, --cy) and rotation (--r) */
.card {
  position: absolute;
  left: calc((var(--cx) - 201) * var(--u)); top: calc((var(--cy) - 89) * var(--u));
  width: calc(402 * var(--u)); height: calc(178 * var(--u));
  padding: calc(24 * var(--u)) calc(28 * var(--u)) 0;
  border: 1px solid var(--blue); border-radius: calc(10 * var(--u));
  background: var(--paper);
  rotate: var(--r);
  transition: rotate 0.5s var(--ease), translate 0.5s var(--ease);
}
.card:nth-child(2) { z-index: 1; }
.card:hover { rotate: 0deg; translate: 0 calc(-6 * var(--u)); z-index: 2; }
.card b, .card em { display: block; white-space: nowrap; }
.card b { font-weight: 500; font-size: calc(48 * var(--u)); line-height: calc(65 * var(--u)); letter-spacing: calc(0.48 * var(--u)); }
.card em { font-style: normal; font-size: calc(24 * var(--u)); line-height: calc(65 * var(--u)); letter-spacing: calc(0.48 * var(--u)); color: var(--blue); }
/* Number badge sits on the card's top-right corner */
.badge {
  position: absolute; right: calc(-36.5 * var(--u)); top: calc(-36.5 * var(--u));
  display: grid; place-items: center;
  width: calc(73 * var(--u)); height: calc(73 * var(--u));
  background: url("../assets/final/badge.webp") center / contain no-repeat;
  font-weight: 600; font-size: calc(24 * var(--u)); line-height: 1; color: var(--dark-ink);
}

.closing {
  font-weight: 300; font-size: calc(36 * var(--u)); line-height: calc(36 * var(--u)); letter-spacing: 0;
}

/* ---------- What next ---------- */

.next { background: var(--blue); }
.next-title { font-weight: 500; font-size: calc(64 * var(--u)); line-height: calc(100 * var(--u)); white-space: nowrap; }
.next-line {
  font-weight: 500; font-size: calc(32 * var(--u)); line-height: calc(57 * var(--u)); letter-spacing: calc(0.32 * var(--u));
  white-space: nowrap;
}

/* the contact links under the line: full Gmail, then LinkedIn and Instagram below */
.contact-links { display: flex; flex-direction: column; align-items: flex-start; gap: calc(18 * var(--u)); }
.contact-links a {
  display: inline-flex; gap: 0.35em; align-items: baseline;
  padding-bottom: calc(4 * var(--u)); border-bottom: 1.5px solid rgba(255, 255, 255, 0.6);
  font-weight: 400; font-size: calc(24 * var(--u)); line-height: 1.3; text-decoration: none;
  transition: border-color 0.25s var(--ease);
}
.contact-links a span { display: inline-block; transition: transform 0.25s var(--ease); }
.contact-links a:hover { border-color: #fff; }
.contact-links a:hover span { transform: translate(2px, -2px); }

/* Falling tabs: pill-shaped, thin outline, mono caps. js/falling-tabs.js places each one in the pile.
   They sit behind the heading and links, so the words always stay readable. */
.next { position: relative; overflow: hidden; isolation: isolate; }
.next .frame { z-index: 1; pointer-events: none; }   /* let the pointer reach the tabs underneath */
.next .frame a { pointer-events: auto; }
/* the doodle, big and very light, about three quarters showing in the bottom right corner */
.next-doodle {
  position: absolute; z-index: 0; right: calc(-70 * var(--u)); bottom: 0;
  width: calc(760 * var(--u)); max-width: none; height: auto;
  transform: translateY(25%);
  filter: brightness(0) invert(1); opacity: 0.1;
  pointer-events: none; user-select: none;
}
.tab-pile {
  --tab: calc(52 * var(--u));                 /* tab height */
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
  height: calc(432 * var(--u)); pointer-events: none;
}
.tab-pile span {
  position: absolute; left: 0; bottom: 0;
  height: var(--tab); padding: 0 calc(var(--tab) * 0.52);
  display: flex; align-items: center; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-weight: 500;
  font-size: calc(var(--tab) * 0.36); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92);
  visibility: hidden; will-change: transform;
}
.tab-pile span.is-placed { visibility: visible; pointer-events: auto; cursor: grab; touch-action: none; user-select: none; }
.tab-pile span.is-held { cursor: grabbing; background: rgba(255, 255, 255, 0.22); box-shadow: 0 calc(12 * var(--u)) calc(24 * var(--u)) rgba(0, 40, 90, 0.35); }
.tab-pile span.is-deep { filter: blur(1.6px); color: rgba(255, 255, 255, 0.7); }

/* ---------- Toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 60; transform: translateX(-50%);
  padding: 0.5rem 0.9rem; border-radius: 40px;
  background: var(--ink); color: var(--paper); font-size: 0.85rem;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.toast.is-on { opacity: 1; }

/* ---------- Case study page ---------- */

.case { max-width: 980px; margin: 0 auto; padding: 140px var(--gutter) 4rem; }
.case-back { display: inline-block; margin-bottom: 2.5rem; color: var(--muted); text-decoration: none; }
.case-back:hover { color: var(--blue); }
.case-num { display: block; color: var(--blue); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.06em; }
.case h1 {
  margin-top: 0.6rem;
  font-weight: 600; font-size: clamp(2.8rem, 9vw, 6.5rem); letter-spacing: -0.05em; line-height: 0.95;
}
.case-summary {
  margin-top: 1.4rem; max-width: 36ch;
  font-weight: 300; font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.35; color: var(--muted);
}
.case-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  margin: 2.5rem 0; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 0.82rem;
}
.case-meta dt { color: var(--faint); margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; }
.case-meta dd { margin: 0; }
.case-hero .ph, .case-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); }
.case-block { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; margin-top: 3.5rem; }
.case-block h2 { font-weight: 500; font-size: 1.1rem; }
.case-block p { font-weight: 300; font-size: 1.15rem; line-height: 1.5; color: var(--muted); }
.case-next {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-top: 5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); text-decoration: none;
}
.case-next strong { font-weight: 500; font-size: clamp(1.6rem, 4vw, 2.6rem); letter-spacing: -0.03em; }
.case-next:hover strong { color: var(--blue); }

.site-footer {
  max-width: 980px; margin: 0 auto;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  padding: 1.4rem var(--gutter) 2rem; border-top: 1px solid var(--line); color: var(--faint); font-size: 0.85rem;
}
.site-footer a { text-decoration: none; color: var(--muted); }
.site-footer a:hover { color: var(--blue); }

/* ---------- Custom cursor: an eye that looks where you move ---------- */

html.has-cursor, html.has-cursor * { cursor: none !important; }

.cursor-eye {
  --size: 32px;
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: var(--size); height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  display: grid; place-items: center;
  border: 1.5px solid var(--ink); border-radius: 50%;
  background: rgba(14, 14, 14, 0.6);
  color: var(--ink);
  pointer-events: none;
  transition: width 0.3s var(--ease), height 0.3s var(--ease), margin 0.3s var(--ease),
              background 0.3s, border-color 0.3s, color 0.3s, opacity 0.2s;
  will-change: transform;
}
.cursor-eye svg { width: 68%; height: auto; overflow: visible; transition: transform 0.12s ease-in; }
.cursor-eye .lid { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.cursor-eye .iris { fill: none; stroke: currentColor; stroke-width: 2.6; }
.cursor-eye .pupil { fill: currentColor; }
.cursor-eye .label {
  position: absolute; top: 100%; margin-top: 0.4rem;
  font-size: 0.66rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--blue); color: #fff; padding: 0.15rem 0.4rem;
  opacity: 0; transform: translateY(-4px); transition: opacity 0.2s, transform 0.2s;
  white-space: nowrap;
}
.cursor-eye.is-blinking svg { transform: scaleY(0.08); }

/* Touching anything you can click, or the nav bar: the eye turns blue */
body.cursor-link .cursor-eye { --size: 40px; border-color: var(--blue); color: var(--blue); }
body.cursor-view .cursor-eye { --size: 58px; background: var(--blue); border-color: var(--blue); color: #fff; }
body.cursor-view .cursor-eye .label { opacity: 1; transform: none; }
body.cursor-text .cursor-eye { --size: 24px; }
body.cursor-down .cursor-eye svg { transform: scaleY(0.08); }
body.cursor-out .cursor-eye { opacity: 0; }

/* ---------- Page entrance ---------- */

.reveal { opacity: 0; translate: 0 14px; }
.is-loaded .reveal {
  opacity: 1; translate: none;
  transition: opacity 0.8s var(--ease), translate 0.8s var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}

/* ---------- Tablet and phone: the same content, stacked ---------- */

@media (max-width: 900px) {
  .frame { width: auto; height: auto; }
  .at, .work-grid { position: static; width: auto; left: auto; top: auto; }

  .top-nav { justify-content: flex-end; height: auto; min-height: 0; padding: 12px var(--gutter); }
  .logo { left: var(--gutter); }
  .logo img { width: 44px; height: 44px; }
  .pill { gap: 0; padding: 4px 6px; }
  .pill a { padding: 4px 8px; font-size: 14px; line-height: 20px; }

  /* Hero: the sheet becomes a card on the paper texture; the tabs give way */
  .dots-zone { padding-top: 92px; }
  .hero {
    position: relative; max-width: 560px; margin: 0 16px 40px;
    padding: 64px 20px 150px; text-align: center;
    background: var(--sheet) url("../assets/final/paper.webp") left top / cover;
    border-radius: 3px;
  }
  @media (min-width: 592px) { .hero { margin-inline: auto; } }
  .paper, .tabs { display: none; }
  .clip { position: absolute; top: -18px; left: 10px; width: 46px; }
  .hey { width: 120px; margin: 0 0 4px 6%; }
  .hero-name { font-size: clamp(44px, 14vw, 80px); line-height: 1.15; letter-spacing: -0.07em; }
  .hero-role { margin-top: 4px; font-size: 18px; line-height: 1.4; letter-spacing: 0; }
  .hero-line { margin: 28px auto 0; max-width: 34ch; font-size: 16px; line-height: 1.4; letter-spacing: 0; }
  .hero-line br { display: none; }
  .hero-ctas { position: relative; z-index: 3; justify-content: center; gap: 12px; margin-top: 28px; }
  .btn { gap: 8px; padding: 6px 14px 6px 16px; font-size: 14px; }
  .sticker { position: absolute; }
  .st-currently { left: -10px; bottom: 26px; width: 104px; }
  .st-star { right: -8px; bottom: -40px; width: 150px; }

  .statement { padding: 160px 60px 180px; }   /* room for the box of dots on each side */
  .statement-box { max-width: 640px; margin: 0 auto; padding: 12px 0; }
  .statement p { gap: 14px; font-size: clamp(19px, 4.6vw, 26px); line-height: 1.45; letter-spacing: 0; }

  .works { padding: 96px 16px 40px; text-align: center; }
  .works-title { font-size: clamp(34px, 9vw, 52px); line-height: 1.3; letter-spacing: 0; white-space: normal; }
  .works-title span { font-size: 1.5em; letter-spacing: 0; line-height: 0; }
  .tape { position: relative; width: 280px; margin: -8px auto 0; }
  .tape p { left: 12%; top: 34%; width: 76%; font-size: 13px; line-height: 16px; letter-spacing: 0.2px; }
  .work-grid { grid-template-columns: 1fr; row-gap: 48px; max-width: 560px; margin: 32px auto 0; text-align: left; }
  .project:nth-child(2) { margin-top: 0; }
  .project h3 { margin-top: 14px; font-size: 26px; line-height: 1.2; letter-spacing: -0.5px; }
  .project-summary { margin-top: 4px; font-size: 15px; line-height: 1.4; }
  .project-tags { margin-top: 12px; gap: 4px 16px; font-size: 11px; }

  .about { max-width: 600px; padding: 96px 16px 40px; }
  .big-label { font-size: 40px; line-height: 1.2; letter-spacing: -1px; }
  .cart { width: min(100%, 420px); margin: 28px auto 0; position: relative; }
  .receipt { height: auto; margin-top: 40px; padding: 36px 22px 64px; --scallop: 22px; }
  .r-hey { font-size: 32px; line-height: 1.2; }
  .r-lead, .r-small, .r-last { width: auto; }
  .r-lead { margin-top: 14px; font-size: 22px; line-height: 1.3; }
  .r-small { margin-top: 28px; font-size: 16px; line-height: 1.4; }
  .r-small br, .r-lead br { display: none; }
  .r-turn { margin-top: 28px; font-size: 22px; line-height: 1.3; }
  .r-last { margin-top: 8px; }
  .chips {
    width: auto; flex-wrap: wrap; gap: 10px;
    margin: 32px 0 0; padding: 28px 0 0;
    background-image: repeating-linear-gradient(to right, #000 0 6px, transparent 6px 12px);
  }
  .chips li { padding: 6px 14px; font-size: 15px; }

  .approach { position: relative; overflow: hidden; max-width: 600px; padding: 96px 16px 260px; }
  .approach-title { font-size: clamp(34px, 9vw, 48px); line-height: 1.15; white-space: normal; }
  .approach-sub { margin-top: 10px; font-size: 18px; line-height: 1.3; }
  .steps { margin-top: 56px; display: grid; gap: 52px; padding: 0 28px 0 4px; }
  .card {
    position: relative; left: auto; top: auto; width: 100%; max-width: 360px; height: auto;
    padding: 18px 22px 22px; border-radius: 10px;
    rotate: calc(var(--r) * 0.5);
  }
  .card:nth-child(2) { justify-self: end; }
  .card b { font-size: 34px; line-height: 1.3; letter-spacing: 0.3px; }
  .card em { font-size: 18px; line-height: 1.4; letter-spacing: 0.3px; }
  .badge { right: -26px; top: -26px; width: 52px; height: 52px; font-size: 18px; }
  .big-star { position: absolute; left: 0; bottom: -60px; width: 230px; }
  .closing { position: relative; margin-top: 64px; font-size: clamp(22px, 5.6vw, 30px); line-height: 1.3; letter-spacing: 0.3px; }

  .next .frame { max-width: 600px; padding: 56px 16px 200px; }
  .next-title { font-size: clamp(40px, 11vw, 56px); line-height: 1.2; }
  .next-line { margin-top: 12px; font-size: clamp(18px, 5vw, 26px); line-height: 1.5; letter-spacing: 0.3px; white-space: normal; }
  .next .frame { padding-bottom: 300px; }
  .contact-links { margin-top: 28px; gap: 16px; }
  .contact-links a { font-size: 18px; padding-bottom: 3px; }
  .tab-pile { --tab: 26px; height: 300px; }
  .next-doodle { width: 360px; right: -40px; }

  .case { padding-top: 110px; }
  .case-meta { grid-template-columns: repeat(2, 1fr); }
  .case-block { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .pill a { padding: 4px 6px; font-size: 13px; }
  .logo span { display: none; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .reveal, .is-loaded .reveal { opacity: 1; translate: none; }
  .js-about .cart-item { visibility: visible; }
  .js-about .uncover { clip-path: none; }
}

/* on touch screens a finger on a tab still scrolls the page; tapping a tab pushes it */
@media (hover: none) { .tab-pile span.is-placed { touch-action: auto; } }

/* ---------- Intro (js/preloader.js) ---------- */
/* The black screen with moving dots. The doodle looks left and right, its glasses drop on,
   "sharvani" types in and the screen slides up to open the page. */
.preloader { display: none; }
html.is-preloading, html.is-preloading body { overflow: hidden; }
html.is-preloading .preloader, .preloader.is-open {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--paper);
}
.pl-dots { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl-stage { position: relative; display: grid; justify-items: center; gap: 22px; }
.pl-doodle {
  width: clamp(120px, 14vw, 190px); height: auto; overflow: visible;
  opacity: 0; transform: scale(0.85);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.25, 1.4, 0.4, 1);
}
.preloader.is-in .pl-doodle { opacity: 1; transform: none; }
.pl-eyes { transition: transform 0.35s cubic-bezier(0.5, 0, 0.3, 1); }
.pl-glasses { opacity: 0; transform: translateY(-14px); }
.preloader.has-glasses .pl-glasses {
  opacity: 1; transform: none;
  transition: opacity 0.15s ease, transform 0.55s cubic-bezier(0.3, 1.7, 0.5, 1);
}
.pl-name {
  margin: 0; min-height: 1.2em;
  font: 500 clamp(28px, 3vw, 40px)/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink);
}
.pl-caret {
  display: inline-block; width: 0.08em; height: 0.95em; margin-left: 0.06em;
  vertical-align: -0.12em; background: var(--blue);
  opacity: 0; animation: pl-blink 0.9s steps(1) infinite;
}
.preloader.is-typing .pl-caret { opacity: 1; }
@keyframes pl-blink { 50% { visibility: hidden; } }
.preloader.is-open {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s cubic-bezier(0.7, 0, 0.2, 1);
}

/* ---------- Sections rising in as you scroll (js/sections.js) ---------- */
/* The animation only runs on the way in (fill: backwards), so hover effects that use
   `translate` (like the approach cards) still work afterwards. */
.rise:not(.is-in) { opacity: 0; }
.rise.is-in { animation: rise-in 0.9s var(--ease) var(--d, 0ms) backwards; }
@keyframes rise-in {
  from { opacity: 0; translate: 0 48px; filter: blur(8px); }
}
.hero, .statement, .works, .about-track, .approach { transition: filter 0.2s linear, opacity 0.2s linear; }