/* ==========================================================================
   Zahin Sultan portfolio v3 : base.css  (shared design system)
   Page authors: read this block, then use the tokens and classes below.
   Do not redefine them in page CSS. Put page-only rules in css/<page>.css.

   TOKENS (:root)
   Colour
     --white       #ffffff  page background, text on blue
     --black       #0a0a0a  body text, solid buttons
     --blue        #1f3dff  accent: links on hover, key words, focus, blue bands (white on blue = 6:1)
     --ink         #101010  dark neutral for dark panels
     --line        #e6e6e6  hairlines and card borders
     --mute        #5c5c5c  secondary text (4.5:1+ on white; NOT for use on blue-soft below 16px)
     --blue-soft   #eef1ff  very light blue tint for subtle panels (blue and black text pass AA on it)
     --blue-deep   #1530d6  pressed state of blue buttons
   Type
     --font        Regesto Grotesk, Arial, sans-serif   (the only text face)
     --mono        Geist Mono (the receipt only)
     --fs-xs  12-13px   --fs-sm  14-15px   --fs-md  16-18px (body)   --fs-lg  20-28px
     --fs-xl  28-48px   --fs-2xl 40-88px   --fs-mega 52px up to 200px (about 12vw)
   Spacing
     --s-1 4px  --s-2 8px  --s-3 12px  --s-4 16px  --s-5 24px  --s-6 32px  --s-7 48px
     --s-8 64px  --s-9 64-112px (fluid)  --s-10 96-176px (fluid)
   Shape and layout
     --r-pill 999px   --r-card 20px   --wrap 1320px (max content width)
     --gutter fluid side padding   --header-h header height   --ease motion curve
     --dur 280ms default duration

   SHARED CLASSES
     .wrap            centred container, max 1320px, fluid side gutters
     .section         vertical rhythm block (fluid padding top and bottom)
     .section--blue   solid blue band, white text (links, focus rings and .rule adapt)
     .eyebrow         small uppercase label above a heading
     .display         mega headline (use once per page, hero only)
     .h1 .h2 .h3      heading sizes, independent of the element used (keep real h1..h6 order)
     .lede            large intro paragraph
     .btn             base pill button (min 44px high). Combine with one variant:
       .btn--solid    black pill, white text, hover turns blue
       .btn--line     outlined pill, hover fills black
       .btn--blue     blue pill, white text, hover turns black (header CV button)
       .btn--white    white pill for use on blue sections, hover turns black
     .tag             small outlined pill label (non-interactive); .tag--blue = soft blue fill
     .link-arrow      text link with an arrow that nudges right on hover
     .card            hairline-bordered rounded panel; .card--soft = blue-soft fill;
                      works on <a> too (border darkens on hover)
     .grid-2 .grid-3  responsive grids (1 col mobile, 2 at 720px, 3 at 1024px for grid-3)
     .rule            1px hairline divider (hr or div)
     .reveal          fades up when scrolled into view; js/site.js adds .is-in.
                      Only hidden when <html class="js"> and motion is allowed
     .sr-only         visually hidden, still read by screen readers
     .skip            skip-to-content link (first element in body)
     .stack           utility: vertical flow with --stack-gap (default --s-4)

   SITE CHROME (injected by js/site.js into [data-site-header] / [data-site-footer])
     .site-header, .site-footer and their __children. Page CSS must not restyle these.

   RULES OF THE SYSTEM
     Blue text under 16px only on white or blue-soft. No gradients, no shadows,
     no glass. Motion = transform/opacity, 250-300ms. Sentence case. No em dashes.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --white: #ffffff;
  --black: #0a0a0a;
  --blue: #1f3dff;
  --blue-deep: #1530d6;
  --ink: #101010;
  --line: #e6e6e6;
  --mute: #5c5c5c;
  --blue-soft: #eef1ff;

  --font: "Regesto Grotesk", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;

  --fs-xs: clamp(0.8125rem, 0.79rem + 0.08vw, 0.875rem);
  --fs-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --fs-md: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --fs-lg: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --fs-xl: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  --fs-2xl: clamp(2.5rem, 1.5rem + 4.6vw, 5.5rem);
  --fs-mega: clamp(3.25rem, 12vw, 12.5rem);

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: clamp(64px, 8vw, 112px);
  --s-10: clamp(96px, 12vw, 176px);

  --r-pill: 0;
  --r-card: 0;
  --wrap: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --sai-t: env(safe-area-inset-top, 0px);
  --sai-b: env(safe-area-inset-bottom, 0px);
  --sai-l: env(safe-area-inset-left, 0px);
  --sai-r: env(safe-area-inset-right, 0px);
  --header-h: 56px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 280ms;
}

@media (min-width: 1024px) {
  :root { --header-h: 64px; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
hr { border: 0; }
[hidden] { display: none !important; }

/* ---------- Base ---------- */
html, body { max-width: 100%; overflow-x: clip; }
body {
  padding-top: calc(var(--header-h) + var(--sai-t));
  background: var(--white);
  color: var(--black);
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--fs-md);
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  min-width: 320px;
}
main { display: block; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

::selection { background: var(--blue); color: var(--white); }

/* Focus: blue ring on light, white ring on blue */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}
.section--blue :focus-visible,
.site-footer :focus-visible { outline-color: var(--white); }
:focus:not(:focus-visible) { outline: none; }

/* Skip link */
.skip {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--black);
  color: var(--white);
  border-radius: var(--r-pill);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}
.skip:focus, .skip:focus-visible { transform: none; outline: 3px solid var(--blue); outline-offset: 3px; }

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

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--s-9); }
.section--blue {
  background: var(--blue);
  color: var(--white);
}
.section--blue .eyebrow { color: var(--white); }
.section--blue .rule { border-top-color: rgba(255, 255, 255, 0.45); }

.stack > * + * { margin-top: var(--stack-gap, var(--s-4)); }

.grid-2, .grid-3 { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
.grid-2 > *, .grid-3 > * { min-width: 0; }
@media (min-width: 720px) {
  .grid-2, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rule { display: block; height: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- Type classes ---------- */
.eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--mute);
}
.display {
  font-size: var(--fs-mega);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.055em;
}
.h1 { font-size: var(--fs-2xl); font-weight: 600; line-height: 0.92; letter-spacing: -0.045em; }
.h2 { font-size: var(--fs-xl);  font-weight: 600; line-height: 0.98; letter-spacing: -0.04em; }
.h3 { font-size: var(--fs-lg);  font-weight: 600; line-height: 1.08; letter-spacing: -0.03em; }
.lede {
  font-size: var(--fs-lg);
  line-height: 1.28;
  letter-spacing: -0.015em;
  max-width: 40ch;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-5);
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn--solid { background: var(--black); border-color: var(--black); color: var(--white); }
.btn--solid:hover { background: var(--blue); border-color: var(--blue); }
.btn--solid:active { background: var(--blue-deep); border-color: var(--blue-deep); }

.btn--line { background: transparent; border-color: var(--black); color: var(--black); }
.btn--line:hover { background: var(--black); color: var(--white); }
.btn--line:active { background: var(--ink); color: var(--white); }

.btn--blue { background: var(--blue); border-color: var(--blue); color: var(--white); }
.btn--blue:hover { background: var(--black); border-color: var(--black); }
.btn--blue:active { background: var(--ink); border-color: var(--ink); }

.btn--white { background: var(--white); border-color: var(--white); color: var(--black); }
.btn--white:hover { background: var(--black); border-color: var(--black); color: var(--white); }
.btn--white:active { background: var(--ink); border-color: var(--ink); color: var(--white); }
.section--blue .btn--white:hover, .site-footer .btn--white:hover { border-color: var(--white); }

.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--line);
  border-color: var(--line);
  color: var(--mute);
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- Tag ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--black);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.tag--blue { background: var(--blue-soft); border-color: var(--blue-soft); color: var(--blue); }

/* ---------- Link with arrow ---------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--black);
  transition: color var(--dur) var(--ease);
}
.link-arrow::after {
  content: "\2192";
  display: inline-block;
  transition: transform var(--dur) var(--ease);
}
.link-arrow:hover { color: var(--blue); }
.link-arrow:hover::after, .link-arrow:focus-visible::after { transform: translateX(6px); }
.link-arrow:active { color: var(--blue-deep); }
.section--blue .link-arrow, .site-footer .link-arrow { color: var(--white); }
.section--blue .link-arrow:hover, .site-footer .link-arrow:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Card ---------- */
.card {
  display: block;
  padding: var(--s-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.card--soft { background: var(--blue-soft); border-color: var(--blue-soft); }
a.card:hover { border-color: var(--black); transform: translateY(-3px); }
a.card:active { transform: translateY(0); }
@media (min-width: 720px) { .card { padding: var(--s-6); } }

/* ---------- Reveal ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   SITE HEADER : plain-text fixed navigation (no bar, no pills)
   Desktop: two text blocks (top-left, top-right). Mobile: [MENU] / [START PROJECT]
   and a full-screen black sheet. Colour flips via html.nav-on-dark (site.js).
   ========================================================================== */
.site-header {
  --nav-c: var(--black);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 0;
  pointer-events: none;
  color: var(--nav-c);
  font-size: 14px;
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: color 0.25s ease;
}
html.nav-on-dark .site-header,
html.menu-open .site-header { --nav-c: var(--white); }
.site-header :focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 2px; }
html.nav-on-dark .site-header :focus-visible,
html.menu-open .site-header :focus-visible { outline-color: var(--white); }

.site-header a,
.site-header button { pointer-events: auto; color: inherit; font: inherit; text-transform: inherit; line-height: inherit; letter-spacing: inherit; }
.site-header button { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0; border-radius: 0; text-align: left; cursor: pointer; }

/* 44px touch target that does not move the text */
.site-nav__link, .site-header__logo, .site-header__toggle, .site-copy, .site-start { position: relative; display: inline-block; }
.site-nav__link::before, .site-header__logo::before, .site-header__toggle::before, .site-copy::before, .site-start::before {
  content: ""; position: absolute; inset: -16px -10px;
}
.site-nav__link[aria-current="page"]::after,
.site-nav__link[aria-current="location"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor;
}

/* Desktop blocks */
.site-left, .site-right { display: none; position: fixed; top: 16px; }
.site-left { left: var(--gutter); }
.site-right { right: 6.39%; }
.site-brand { display: block; margin-bottom: 0.92em; }
.site-nav__list, .site-aside {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 1rem;
}
.site-nav__list > li, .site-aside > li {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 5.6em max-content;
  column-gap: 1rem;
  align-items: baseline;
  transition: opacity 0.25s ease;
}
.site-aside > li { grid-template-columns: 4.6em max-content; }
@supports (grid-template-columns: subgrid) {
  .site-nav__list > li, .site-aside > li { grid-template-columns: subgrid; }
}
.site-mark { white-space: nowrap; }
.site-mark__wm { width: 14px; height: 14px; display: inline-block; vertical-align: -3px; border-radius: 23%; }
.rc-mark { width: 11px; height: 11px; display: inline-block; vertical-align: -1px; }
.site-dot {
  position: relative; display: inline-block; width: 7px; height: 7px; margin: 0 1px;
  border-radius: 50%; background: var(--blue); vertical-align: 0.08em;
  transition: background-color 0.25s ease;
}
.site-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit;
  animation: site-pulse 1.8s ease-out infinite;
}
html.nav-on-dark .site-dot { background: var(--white); }
@keyframes site-pulse { from { transform: scale(1); opacity: 0.55; } to { transform: scale(3.2); opacity: 0; } }

/* Hover / focus quiets siblings (per block) */
@media (hover: hover) {
  .site-left:has(li:is(:hover, :has(:focus-visible))) li:not(:is(:hover, :has(:focus-visible))),
  .site-right:has(li:is(:hover, :has(:focus-visible))) li:not(:is(:hover, :has(:focus-visible))),
  .site-left:has(li:is(:hover, :has(:focus-visible))) .site-brand:not(:hover):not(:focus-visible) { opacity: 0.25; }
  .site-brand { transition: opacity 0.25s ease; }
  .site-left:has(.site-brand:is(:hover, :focus-visible)) li { opacity: 0.25; }
}

/* Mobile bar */
.site-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 32px 16px 0;
}
.site-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Full-screen mobile sheet */
.site-menu {
  position: fixed; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
  padding: 88px 16px 24px;
  background: var(--black); color: var(--white);
  overflow-y: auto; overscroll-behavior: contain;
  pointer-events: auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.5s ease;
}
.site-menu.is-open { clip-path: inset(0); }
.site-menu__list { display: flex; flex-direction: column; align-items: center; margin-bottom: 32px; }
.site-menu__list li {
  display: flex; align-items: flex-start; justify-content: center; gap: 0.5rem;
  opacity: 0; transform: translateY(32px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(0.12s + var(--i, 0) * 0.05s);
}
.site-menu.is-open .site-menu__list li { opacity: 1; transform: none; }
.site-menu__link {
  position: relative; display: inline-block;
  min-height: 44px; padding-block: 2px;
  font-size: clamp(2.4rem, 10.5vw, 3.4rem); font-weight: 500; line-height: 0.95; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--white);
}
.site-menu__link[aria-current="page"]::after,
.site-menu__link[aria-current="location"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: currentColor;
}
.site-menu__count { margin-top: 0.7rem; font-size: 14px; font-weight: 500; line-height: 0.92; }
.site-menu__cta {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 64px; padding: 20px 18px;
  background: var(--white); color: var(--black);
  font-weight: 500; line-height: 1;
}
.site-menu__cta .site-dot { margin-right: 6px; }
.site-menu .site-dot { background: var(--blue); }
.site-menu__cta:focus-visible { outline-color: var(--white); outline-offset: 3px; }
html.menu-open .site-start { visibility: hidden; }
html.menu-open, html.menu-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .site-menu, .site-menu__list li, .site-header, .site-aside > li, .site-nav__list > li { transition: none !important; }
  .site-dot::after { animation: none; }
  .site-menu__list li { opacity: 1; transform: none; }
}

@media (min-width: 1024px) {
  .site-left, .site-right { display: flex; }
  .site-bar, .site-menu { display: none !important; }
}

/* ==========================================================================
   SITE FOOTER (solid blue band)
   ========================================================================== */
.site-footer {
  background: var(--blue);
  color: var(--white);
  padding-block: var(--s-9) var(--s-6);
  overflow: hidden;
}
.site-footer__cta {
  font-size: var(--fs-mega);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.055em;
  text-wrap: balance;
  max-width: 12ch;
}
.site-footer__action { margin-top: var(--s-6); }
.site-footer__action .btn { min-height: 56px; padding-inline: var(--s-6); font-size: 1.125rem; }

.site-footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  margin-top: var(--s-9);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(255, 255, 255, 0.45);
}
.site-footer__title {
  margin-bottom: var(--s-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.3;
}
.site-footer__list li { margin: 0; }
.site-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  transition: text-decoration-color var(--dur) var(--ease);
  overflow-wrap: anywhere;
}
.site-footer__list a:hover { text-decoration-color: var(--white); }
.site-footer__place { font-size: var(--fs-md); font-weight: 600; line-height: 1.5; }

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-7);
  font-size: var(--fs-sm);
  font-weight: 600;
}

@media (min-width: 640px) {
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .site-footer__cols { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: var(--s-6); }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  a.card:hover, .btn:active { transform: none; }
}