/* ==========================================================
   haritaks.com - layout & components
   Measured from the live Framer site at 1440 / 1000 / 375 widths.
   Desktop numbers in comments are the Framer values at 1440px.
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { overflow-wrap: break-word; overflow-x: clip; padding-bottom: calc(50 * var(--u)); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ul, figure { margin: 0; font: inherit; }
ul { padding: 0; list-style: none; }
b { font-weight: inherit; }
::selection { background: var(--accent); color: var(--text-primary); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

:root {
  /* Sizes are written as N * --u with N the Framer px value. Framer keeps sizes fixed at
     every width, so --u is always 1px. Breakpoints match Framer:
       desktop >= 1200px, tablet 810-1199px, mobile < 810px */
  --u: 1px;
  --page-x: calc(25 * var(--u));      /* side margin: 25 desktop/tablet, 15 mobile */
  --rhythm: calc(70 * var(--u));      /* vertical spacing between every section and rule */
  --nav-h: calc(64 * var(--u));
}


/* ---------- Custom cursor ---------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 1000;
  width: calc(20 * var(--u)); height: calc(20 * var(--u)); margin: calc(-10 * var(--u)) 0 0 calc(-10 * var(--u));
  border-radius: calc(30 * var(--u)); background: var(--accent);
  mix-blend-mode: difference; pointer-events: none;
  opacity: 0; transition: opacity .2s;
}
.cursor.is-on { opacity: 1; }
@media (hover: none) { .cursor { display: none; } }

/* ---------- Horizontal rule (Framer: 1px, color 03) ---------- */
.rule { height: 1px; margin: 0 var(--page-x); border: 0; background: var(--color-cream-30); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h); margin: 0 var(--page-x); padding-left: calc(10 * var(--u));
  background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--nav-line);
}
.logo { font-size: calc(36 * var(--u)); line-height: 1; font-weight: 400; letter-spacing: .05em; }
.logo span { font-weight: 700; color: var(--accent); }

.nav-links { display: flex; align-items: center; height: 100%; padding-right: calc(10 * var(--u)); }
.nav-links a {
  position: relative; display: flex; align-items: center; height: calc(39 * var(--u)); padding: 0 calc(34 * var(--u));   /* Framer: 69px from one label to the next, border included */
  font-size: max(calc(16 * var(--u)), 13px); font-weight: 700; line-height: 1.2; letter-spacing: 1px;
  border-left: 1px solid var(--color-cream-30);
}
.nav-links a:last-child { border-right: 1px solid var(--color-cream-30); }

/* Letter roll: each letter slides up, a copy slides in from below (same color) */
.roll { display: inline-flex; height: 1.2em; overflow: hidden; }
.roll span { display: inline-block; line-height: 1.2; transition: transform .45s cubic-bezier(.65,0,.25,1); transition-delay: calc(var(--i) * 25ms); white-space: pre; }
.roll span::after { content: attr(data-l); display: block; }
[data-roll]:hover .roll span { transform: translateY(-1.2em); }

.nav-toggle { display: none; }

/* ---------- Hero ---------- */
/* Framer: a wrapping row. Title on the left; intro + portrait (856px) as one group on the right.
   Below ~1313px the group no longer fits beside the title and drops to its own line. */
.hero {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  margin: 0 var(--page-x); padding: var(--rhythm) 0;      /* top 134 = 64 nav + 70 */
}
.hero-side { display: flex; align-items: flex-end; column-gap: calc(25 * var(--u)); }
.hero-intro { width: calc(323 * var(--u)); }
.rotator { height: calc(109 * var(--u)); overflow: hidden; }
.rotator-track { animation: words 6s infinite; }
.rotator-track p {
  font-family: var(--font-display); font-size: calc(72 * var(--u)); line-height: calc(108 * var(--u)); font-weight: 400;
  margin-left: -2px;
}
/* 1 word per second: ~0.4s spring move, 0.6s hold. Last "Product" duplicates the first so the loop is seamless. */
@keyframes words {
  0%      { transform: translateY(0); }
  10%     { transform: translateY(calc(-108 * var(--u))); animation-timing-function: ease-out; }
  16.66%  { transform: translateY(calc(-108 * var(--u))); }
  26.66%  { transform: translateY(calc(-216 * var(--u))); }
  33.33%  { transform: translateY(calc(-216 * var(--u))); }
  43.33%  { transform: translateY(calc(-324 * var(--u))); }
  50%     { transform: translateY(calc(-324 * var(--u))); }
  60%     { transform: translateY(calc(-432 * var(--u))); }
  66.66%  { transform: translateY(calc(-432 * var(--u))); }
  76.66%  { transform: translateY(calc(-540 * var(--u))); }
  83.33%  { transform: translateY(calc(-540 * var(--u))); }
  93.33%  { transform: translateY(calc(-648 * var(--u))); }
  100%    { transform: translateY(calc(-648 * var(--u))); }
}
.rotator-track { animation-timing-function: cubic-bezier(.34,1.35,.64,1); }
.designer { font-family: var(--font-display); font-size: calc(96 * var(--u)); line-height: 1.2; color: var(--accent); }

.hero-intro { align-self: end; }
.hello { font-family: var(--font-display); font-size: max(calc(28 * var(--u)), 20px); line-height: 1.2; font-weight: 300; }
.name  { font-family: var(--font-display); font-size: calc(72 * var(--u)); line-height: 1.2; color: var(--accent); margin-bottom: calc(21 * var(--u)); }
.intro { font-size: max(calc(18 * var(--u)), 14px); line-height: 1.3; font-weight: 600; color: var(--color-cream-50); }
.intro b { font-size: max(calc(28 * var(--u)), 20px); line-height: 1.3; color: var(--text-primary); }

.hero-portrait img { width: calc(508 * var(--u)); height: calc(616 * var(--u)); object-fit: contain; filter: grayscale(1); }
/* Framer: the photo slides down inside its frame as the page scrolls (0.6x scroll, clipped by the frame) */
.hero-portrait { display: block; overflow: clip; }
.hero-portrait img { display: block; transform: translateY(var(--py, 0px)); will-change: transform; }

/* ---------- Section title ---------- */
.section-title {
  margin: 0 var(--page-x); padding: var(--rhythm) 0;
  font-family: var(--font-display); font-size: calc(96 * var(--u)); line-height: 1.2; font-weight: 400;
  scroll-margin-top: var(--nav-h);
}
.section-title span { color: var(--accent); }

/* ---------- Project rows ---------- */
.project {
  display: grid; grid-template-columns: 1fr calc(467 * var(--u)); column-gap: calc(25 * var(--u));
  margin: 0 var(--page-x); padding: var(--rhythm) 0;
}
.project--flip { grid-template-columns: calc(467 * var(--u)) 1fr; }
.project--flip .project-media { order: -1; }

.project-text { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.tags { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); margin-bottom: calc(36 * var(--u)); }
.tags li {
  padding: calc(10 * var(--u)) calc(15 * var(--u)); border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--color-cream-30);   /* Framer draws this border inside the box */
  font-size: max(calc(12 * var(--u)), 11px); line-height: 1.2; font-weight: 600;
}
.project-title { font-size: calc(48 * var(--u)); line-height: 1.2; font-weight: 600; margin-bottom: calc(24 * var(--u)); }
.project-desc  { font-size: max(calc(18 * var(--u)), 14px); line-height: 1.45; letter-spacing: calc(1.8 * var(--u)); color: var(--text-secondary); }

.btn {
  display: inline-flex; align-items: center; gap: calc(15 * var(--u));
  padding: calc(10 * var(--u)) calc(15 * var(--u)); border-radius: var(--radius-sm);
  background: var(--button-bg);
  font-size: max(calc(16 * var(--u)), 13px); line-height: 1.2; font-weight: 600;
  transition: background .2s;
}
.btn svg { width: calc(15 * var(--u)); height: calc(11 * var(--u)); overflow: visible; fill: none; stroke: var(--text-secondary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.btn:hover { background: var(--accent); }
.btn:hover svg { transform: translateX(3px); }

.project-media { position: relative; height: calc(var(--h) * var(--u)); display: flex; justify-content: center; overflow: hidden; }
.project-media picture { display: contents; }
.project-media img { width: 100%; height: 100%; object-fit: cover; }
.project-media--contain img { object-fit: contain; }
.project-media--wide img { width: 152%; flex: none; }   /* Framer: 710px image centered in the 467px column */

/* Desktop (Framer): each project row is as tall as its text column and the image fills that
   height (531px at 1440, 473px at 1512 for the first row). The wide image keeps its 3:2 shape. */
@media (min-width: 1200px) {
  .project-text { justify-content: flex-start; }
  .project .tags { margin-bottom: calc(35 * var(--u)); }
  .project-title { margin-bottom: calc(25 * var(--u)); }
  .project .btn { margin-top: calc(172 * var(--u)); }   /* Framer: fixed 172px gap above the button */
  .project-media { height: auto; }
  .project-media img { position: absolute; inset: 0; }
  .project-media--wide img { left: 50%; right: auto; width: auto; aspect-ratio: 710 / 473; translate: -50% 0; }
}

/* ---------- Beyond the Interface ---------- */
.beyond {
  position: relative; margin: var(--rhythm) var(--page-x) 0;
  height: calc(3697 * var(--u));                         /* Framer: fixed 3697px tall at every size */
}
.beyond-bg {
  position: absolute; left: 50%; top: 0; z-index: 0;
  width: 109%; height: calc(924 * var(--u)); margin-left: -54.5%;   /* Framer: 109% of the content width */
  transform: translateY(var(--bg-y, 0px)); will-change: transform;
}
.beyond-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.15); }
.beyond-sticky { position: sticky; top: 0; z-index: 1; height: 100vh; display: flex; align-items: center; }
.beyond-text { position: relative; max-width: 30%; }   /* Framer: 30% of the content width (417 at 1440) */
.beyond-text h2 { font-size: calc(72 * var(--u)); line-height: 0.95; font-weight: 300; margin-bottom: calc(24 * var(--u)); }
.beyond-text p { font-size: max(calc(18 * var(--u)), 14px); line-height: 1.45; letter-spacing: calc(.1 * var(--u)); color: var(--text-secondary); }

.beyond-cards { position: absolute; inset: 0; pointer-events: none; }
.art-card {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  width: calc(var(--card-w) * var(--u)); height: calc(var(--card-h) * var(--u));
  transform: translate(var(--x, 200vw), var(--y, 0px)); will-change: transform;
}
.art-card img { width: 100%; height: 100%; object-fit: cover; }
.beyond { --card-w: 430; --card-h: 560; --card-gap: 507; }

/* ---------- Footer ---------- */
.footer {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  min-height: calc(682 * var(--u)); margin: var(--rhythm) var(--page-x) 0;
}
.logo--footer { font-size: calc(96 * var(--u)); letter-spacing: .05em; display: inline-block; }
.copy-label { font-family: var(--font-footer); font-size: max(calc(16 * var(--u)), 13px); line-height: 1.0; letter-spacing: calc(-.32 * var(--u)); color: var(--color-offwhite); margin-top: calc(10 * var(--u)); }
.copy { font-family: var(--font-footer); font-size: max(calc(16 * var(--u)), 13px); line-height: 1.2; letter-spacing: calc(-.16 * var(--u)); color: var(--color-offwhite-70); margin-top: calc(20 * var(--u)); }
.cta { font-family: var(--font-footer); font-size: max(calc(29 * var(--u)), 21px); line-height: 1.5; letter-spacing: -.02em; color: var(--color-offwhite); }
.cta span { color: var(--accent); }
.socials { display: flex; gap: calc(35 * var(--u)); margin-top: calc(60 * var(--u)); }
.socials a { display: grid; place-items: center; width: calc(35 * var(--u)); height: calc(35 * var(--u)); color: var(--text-primary); transition: transform .2s, color .2s; }
.socials svg { width: calc(35 * var(--u)); height: calc(35 * var(--u)); }
.socials .mail { background: var(--text-primary); border-radius: var(--radius-sm); color: #000; }
.socials .mail svg { width: calc(27 * var(--u)); height: calc(20 * var(--u)); }
.socials a:hover { transform: translateY(-3px); }

/* ==========================================================
   TABLET  calc(810 * var(--u)) - calc(1199 * var(--u))
   ========================================================== */
@media (min-width: 810px) and (max-width: 1199.98px) {
  /* hero: title on its own line, then intro (left) and portrait (right) aligned to the bottom */
  .hero { flex-direction: column; flex-wrap: nowrap; }
  .hero-side { width: 100%; justify-content: space-between; padding-top: calc(50 * var(--u)); }
  .hero-portrait img { width: calc(357 * var(--u)); height: calc(433 * var(--u)); }

  /* projects: text, then the button on the right, then a 450px image window */
  .project, .project--flip { display: flex; flex-direction: column; row-gap: calc(35 * var(--u)); }
  .project--flip .project-media { order: 0; }
  .project-text { align-items: flex-end; row-gap: calc(35 * var(--u)); }
  .project-head { align-self: stretch; }
  .project .tags { margin-bottom: calc(35 * var(--u)); }
  .project-title { margin-bottom: calc(25 * var(--u)); }
  .project-media { height: calc(450 * var(--u)); align-items: center; }
  .project-media img, .project-media--wide img { flex: none; width: 100%; height: auto; object-fit: cover; }
  .project:nth-of-type(1) .project-media img { aspect-ratio: 950 / 637; }
  .project:nth-of-type(2) .project-media img { aspect-ratio: 950 / 433; }
  .project:nth-of-type(3) .project-media img { width: calc(713 * var(--u)); height: calc(821 * var(--u)); object-fit: contain; }
  .project:nth-of-type(4) .project-media img { height: calc(450 * var(--u)); }

  .beyond-bg { width: calc(1198 * var(--u)); margin-left: calc(-599 * var(--u)); }
  .beyond-text { max-width: 40%; }
  .beyond-text h2 { font-size: calc(38 * var(--u)); line-height: 1.2; margin-bottom: calc(10 * var(--u)); }
  .beyond-text p { font-size: calc(16 * var(--u)); line-height: 1.4; }

  .footer { display: flex; justify-content: space-between; align-items: flex-start; min-height: 0; padding: calc(250 * var(--u)) 0; }
  .footer-brand { width: calc(245 * var(--u)); }
  .footer-cta { width: calc(315 * var(--u)); }
  .logo--footer { font-size: calc(82 * var(--u)); letter-spacing: .05em; }
  .cta { font-size: calc(24 * var(--u)); }
}

/* ==========================================================
   MOBILE  below calc(810 * var(--u))
   ========================================================== */
@media (max-width: 809.98px) {
  :root { --page-x: calc(15 * var(--u)); }
  .hero-side { display: contents; }
  .hero-intro { width: auto; }
  .beyond-text p { line-height: 1.4; }
  .footer { min-height: 0; }

  .nav { padding-left: calc(25 * var(--u)); }
  .logo { font-size: calc(24 * var(--u)); }
  .nav .logo { color: var(--color-offwhite); }
  .nav-toggle {
    display: grid; gap: calc(6 * var(--u)); place-content: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); margin-right: calc(6 * var(--u));
    background: none; border: 0; cursor: pointer;
  }
  .nav-toggle span { display: block; width: calc(18 * var(--u)); height: calc(1.5 * var(--u)); background: var(--text-primary); transition: transform .3s; }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(calc(-3.75 * var(--u))) rotate(-45deg); }
  .nav-links {
    position: absolute; top: var(--nav-h); left: 0; right: 0; height: auto; padding: 0;
    flex-direction: column; align-items: stretch; background: var(--surface);
    box-shadow: inset 0 -1px 0 var(--nav-line);
    clip-path: inset(0 0 100% 0); transition: clip-path .4s cubic-bezier(.65,0,.25,1);
  }
  .nav-links.is-open { clip-path: inset(0 0 0 0); }
  .nav-links a, .nav-links a:last-child { height: calc(56 * var(--u)); padding: 0 calc(25 * var(--u)); border: 0; border-top: 1px solid var(--nav-line); }

  .hero { display: flex; flex-direction: column; padding: calc(26 * var(--u)) max(calc(11 * var(--u)), calc((100vw - 2 * var(--page-x) - 323 * var(--u)) / 2)) calc(70 * var(--u)); }   /* Framer: 323px hero column, centered on wider phones */
  .designer { font-size: calc(48 * var(--u)); }
  .hero-portrait { order: 2; margin-top: calc(50 * var(--u)); }
  .hero-portrait img { width: 100%; max-width: calc(323 * var(--u)); height: auto; aspect-ratio: 323 / 334; object-fit: contain; }
  .hero-intro { order: 3; margin-top: calc(50 * var(--u)); }
  .hello, .name { text-align: right; }
  .hello { font-size: max(calc(18 * var(--u)), 14px); }
  .name { font-size: calc(48 * var(--u)); }

  .section-title { font-size: calc(72 * var(--u)); padding: calc(26 * var(--u)) 0 calc(25 * var(--u)); }

  /* Mobile order: title, tags, image, description, button */
  .project, .project--flip { display: flex; flex-direction: column; padding: calc(26 * var(--u)) 0 calc(25 * var(--u)); row-gap: 0; }
  .project-text, .project-head { display: contents; }
  .project-title { order: 1; font-size: max(calc(28 * var(--u)), 20px); line-height: 1.2; margin-bottom: calc(25 * var(--u)); }
  .tags { order: 2; margin-bottom: calc(35 * var(--u)); }
  .project-media, .project--flip .project-media { order: 3; margin-bottom: calc(35 * var(--u)); }
  /* Framer mobile: every image sits in a 162px window, centered and cropped */
  .project-media { height: 20vh; align-items: center; }   /* Framer: 20% of the screen height (162 on an 812-tall phone) */
  .project-media img, .project-media--wide img { flex: none; width: 100%; height: 100%; max-height: none; object-fit: contain; }
  .project:nth-of-type(3) .project-media img { height: calc(343 * var(--u)); object-fit: cover; }
  .project:nth-of-type(4) .project-media { justify-content: flex-start; }
  .project:nth-of-type(4) .project-media img { width: calc(467 * var(--u)); height: calc(311 * var(--u)); object-fit: cover; }
  .project-desc { order: 4; margin-bottom: calc(34 * var(--u)); }
  .btn { order: 5; justify-content: center; align-self: stretch; }

  .beyond { --card-w: 321; --card-h: 487; --card-gap: 28; margin-top: calc(25 * var(--u)); }
  .art-card { height: 60vh; }   /* Framer: 60% of the screen height */
  .beyond-bg { height: calc(739 * var(--u)); width: calc(1198 * var(--u)); margin-left: calc(-599 * var(--u)); }
  .beyond-text { max-width: 60%; }
  .beyond-text h2 { color: var(--color-offwhite); font-family: var(--font-footer); font-size: max(calc(30 * var(--u)), 22px); line-height: 1.25; font-weight: 400; }
  .beyond-text p { font-size: max(calc(14 * var(--u)), 11px); line-height: 1.45; }

  .footer { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-top: calc(25 * var(--u)); padding: calc(100 * var(--u)) 0; }
  .logo--footer { font-size: calc(64 * var(--u)); }
  .cta { font-size: max(calc(20 * var(--u)), 14px); }
  .socials { margin-top: calc(60 * var(--u)); }
  /* Framer: the copyright line is exactly as wide as a 375 phone, so it wraps there, and an empty line sits below it */
  .copy { padding-right: 1px; margin-bottom: calc(39 * var(--u)); }
}


/* ---------- Touch targets: at least 44px hit areas without changing the visuals ---------- */
.logo { position: relative; }
.logo::after { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: max(100%, 44px); translate: 0 -50%; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 44px); translate: 0 -50%; }
.socials a { position: relative; }
.socials a::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); translate: -50% -50%; }
.nav-toggle { min-width: 44px; min-height: 44px; }
.btn { position: relative; }
.btn::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 44px); translate: 0 -50%; }

/* Users who turn off motion get a still page */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rotator-track { animation: none; }
  .roll span { transition: none; }
}