/* =========================================================================
   Portfolio 1.1.1 — shared styles
   Tokens mirror DESIGN-SYSTEM-BRIEF.md exactly. Breakpoints: mobile < 768,
   tablet 768–1199, desktop ≥ 1200 (designed at 390 / 768 / 1440).
   ========================================================================= */

/* Inter (SIL Open Font License), self-hosted: one variable file per script covers weights 400–800, so text
   renders without waiting on a third-party font server. Latin Extended (e.g. İ, ş, ə) loads only when used. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-latin.65850a373e25.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-latin-ext.01ba6c2a184b.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Clash Display";
  src: url("../fonts/ClashDisplay-Semibold.7a0dc3a5ab12.woff2") format("woff2"),
       url("../fonts/ClashDisplay-Semibold.89e21201c5df.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --- Primitives -------------------------------------------------------- */
:root {
  --ink-950: #18181A;
  --ink-900: #1A1A1C;
  --ink-850: #1F1F21;
  --ink-700: #3F4042;
  --ink-600: #535353;
  --grey-500: #7E8087;
  --grey-450: #92949F;
  --grey-400: #A0A2A7;
  --grey-350: #BABECA;
  --grey-300: #C4C9D5;
  --grey-200: #D5D3D3;
  --grey-150: #DCDDE5;
  --grey-100: #E3E3E3;
  --grey-50: #F5F5F7;
  --white: #FFFFFF;
  --black: #000000;
  --blue-950: #021371;
  --blue-800: #01199F;
  --blue-600: #0026FF;
  --blue-550: #0154FC;
  --blue-500: #3A5CFF;
  --blue-300: #6E8AFF;
  --blue-50: #E0E7F5;
  --signal-green: #1F9D55;

  --font-display: "Clash Display", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --stroke-hairline: 1px;
  --stroke-frame: 2px;

  /* Responsive layout tokens (mobile first) */
  --layout-margin: 20px;
  --layout-gutter: 16px;
  --layout-section-gap: 60px;
  --layout-block-gap: 24px;
  --layout-stack-gap: 12px;

  /* Responsive type scale: size / line-height */
  --display-xl: 44px;      --display-xl-lh: 48px;
  --display-hero: 30px;    --display-hero-lh: 38px;
  --display-title: 30px;   --display-title-lh: 34px;
  --display-h2: 24px;      --display-h2-lh: 32px;
  --display-h3: 24px;      --display-h3-lh: 30px;
  --display-section: 22px; --display-section-lh: 28px;
  --display-tab: 16px;     --display-tab-lh: 24px;
  --text-body-xl: 18px;    --text-body-xl-lh: 26px;
  --text-body-l: 16px;     --text-body-l-lh: 24px;
  --text-body-m: 16px;     --text-body-m-lh: 22px;

  --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (min-width: 768px) {
  :root {
    --layout-margin: 40px;
    --layout-gutter: 20px;
    --layout-section-gap: 80px;
    --layout-block-gap: 32px;
    --layout-stack-gap: 16px;
    --display-xl: 72px;      --display-xl-lh: 80px;
    --display-hero: 36px;    --display-hero-lh: 48px;
    --display-title: 36px;   --display-title-lh: 40px;
    --display-h2: 28px;      --display-h2-lh: 36px;
    --display-h3: 26px;      --display-h3-lh: 32px;
    --display-section: 24px; --display-section-lh: 32px;
    --display-tab: 20px;     --display-tab-lh: 28px;
    --text-body-xl: 20px;    --text-body-xl-lh: 28px;
    --text-body-l: 18px;     --text-body-l-lh: 26px;
    --text-body-m: 18px;     --text-body-m-lh: 24px;
  }
}

@media (min-width: 1200px) {
  :root {
    --layout-margin: 72px;
    --layout-gutter: 24px;
    --layout-section-gap: 120px;
    --layout-block-gap: 40px;
    --display-xl: 124px;     --display-xl-lh: 140px;
    --display-hero: 40px;    --display-hero-lh: 56px;
    --display-title: 40px;   --display-title-lh: 44px;
    --display-h2: 32px;      --display-h2-lh: 40px;
    --display-h3: 28px;      --display-h3-lh: 36px;
    --display-tab: 24px;     --display-tab-lh: 32px;
  }
}

/* --- Semantic modes (per section, never a runtime theme toggle) --------- */
.mode-dark, :root {
  --bg-canvas: var(--ink-900);
  --bg-raised: var(--ink-850);
  --bg-inverse: var(--white);
  --bg-accent-soft: var(--blue-50);
  --text-primary: var(--white);
  --text-body: var(--grey-200);
  --text-supporting: var(--grey-400);
  --text-muted: var(--grey-450);
  --text-subtle: var(--grey-500);
  --text-accent: var(--blue-300);
  --text-on-inverse: var(--blue-600);
  --border-frame: var(--blue-950);
  --border-strong: var(--blue-800);
  --border-accent: var(--blue-600);
  --border-hairline: var(--grey-200);
  --action-primary-bg: var(--white);
  --action-primary-text: var(--blue-600);
  --action-secondary-bg: var(--ink-900);
  --action-secondary-text: var(--grey-400);
  --status-available: var(--signal-green);
}

.mode-light {
  --bg-canvas: var(--white);
  --bg-raised: var(--grey-50);
  --bg-inverse: var(--ink-900);
  --text-primary: var(--ink-900);
  --text-body: var(--ink-700);
  --text-supporting: var(--ink-700);
  --text-muted: var(--grey-500);
  --text-subtle: var(--grey-350);
  --text-accent: var(--blue-600);
  --text-on-inverse: var(--white);
  --border-frame: var(--grey-200);
  --border-strong: var(--ink-600);
  --action-primary-bg: var(--blue-600);
  --action-primary-text: var(--white);
  --action-secondary-bg: var(--blue-50);
  --action-secondary-text: var(--ink-600);
}

.mode-dark, .mode-light {
  background-color: var(--bg-canvas);
  color: var(--text-primary);
}

/* --- Reset & base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--ink-900);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

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

.page__main:focus { outline: none; }

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

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--blue-600);
  font-weight: 700;
  transform: translateY(-200%);
}

.skip-link:focus { transform: none; }

/* --- Nav Bar ----------------------------------------------------------- */
.page__header { padding: 20px var(--layout-margin) 0; }

@media (min-width: 768px) { .page__header { padding-top: 40px; } }
@media (min-width: 1200px) { .page__header { padding-top: 60px; } }

.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 74px;
  padding: 0 13px 0 16px;
  border: var(--stroke-hairline) solid var(--blue-600);
  border-radius: var(--radius-md);
  background: var(--ink-900);
  color: var(--grey-200);
}

.nav__plus {
  display: grid;
  place-items: center;
  justify-self: start;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
}

.nav__identity {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.nav__role {
  display: none;
  color: var(--grey-400);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.nav__name {
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 28px;
}

.nav__link {
  justify-self: end;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}

.nav__plus:hover, .nav__link:hover { color: var(--white); }

@media (min-width: 768px) {
  /* The design centres the role + name group slightly left of the bar's centre. */
  .nav__identity { transform: translate(-3px, 1px); }
  .nav__role { display: inline; position: relative; top: -1px; }
  .nav__name { font-size: 24px; line-height: 32px; }
}

/* --- Buttons ----------------------------------------------------------- */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: var(--stroke-hairline) solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms var(--ease-standard), color 200ms var(--ease-standard),
    border-color 200ms var(--ease-standard);
}

.button--primary {
  background: var(--action-primary-bg);
  border-color: var(--action-primary-bg);
  color: var(--action-primary-text);
}

.button--primary:hover { background: var(--blue-50); border-color: var(--blue-50); }
.mode-light .button--primary:hover { background: var(--blue-800); border-color: var(--blue-800); }

.button--secondary {
  background: var(--action-secondary-bg);
  border-color: var(--border-frame);
  color: var(--action-secondary-text);
}

.button--secondary:hover { border-color: var(--blue-600); color: var(--white); }

.button--soft,
.button--ghost { border: 0; }

.button--soft {
  background: var(--bg-accent-soft);
  color: var(--blue-600);
}

.button--soft:hover { background: #D3DCF0; }

.button--ghost {
  background: transparent;
  color: var(--action-secondary-text);
}

.button--ghost:hover { color: var(--blue-600); }

.button--unavailable { cursor: not-allowed; }

/* --- Section Header (8px gap everywhere except Works, 16px) ------------- */
.section-header { display: grid; gap: 8px; }

.section-header__title {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--display-section);
  line-height: var(--display-section-lh);
}

.section-header--accent .section-header__title {
  color: var(--blue-600);
  font-size: var(--display-h3);
  line-height: var(--display-h3-lh);
}

.section-header__text {
  color: var(--text-supporting);
  font-size: var(--text-body-m);
  line-height: var(--text-body-m-lh);
  font-weight: 500;
}

/* --- Status Pill ------------------------------------------------------- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: rgb(31 157 85 / 0.15);
  color: var(--signal-green);
  font-size: 14px;
  line-height: 14px;
  font-weight: 700;
}

.status-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* --- Browser Window ---------------------------------------------------- */
.browser-window {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--white);
}

.browser-window__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  background: var(--grey-100);
  color: var(--ink-950);
}

.browser-window__dots {
  position: absolute;
  left: 8px;
  display: flex;
  gap: 4px;
}

.browser-window__dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--grey-350);
}

.browser-window__address {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 800;
}

.browser-window__message {
  display: grid;
  place-items: center;
  padding: 32px;
  color: var(--blue-600);
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  text-align: center;
}

.browser-window__message p { max-width: 300px; }

/* --- Contact block ----------------------------------------------------- */
.contact { padding: 0 var(--layout-margin); }

.contact__inner {
  display: grid;
  gap: 40px;
}


.availability { margin-top: 40px; }

.availability__label {
  margin-bottom: 7px;
  color: var(--grey-400);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}

.contact__actions { margin-top: 43px; }
.contact__window { display: none; }

@media (max-width: 767px) {
  .contact__actions { flex-direction: column; gap: 12px; }
  .contact__actions .button { width: 100%; }
}

@media (min-width: 768px) {
  .availability__label { font-size: 20px; }
  .contact__window { display: grid; order: -1; height: 400px; }
}

@media (min-width: 1200px) {
  .contact__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--layout-gutter);
    align-items: center;
  }
  .contact__window { order: 0; }
  .contact__intro .section-header__text { max-width: 530px; }
}

/* --- Footer ("let's talk") --------------------------------------------- */
.page__footer { padding: 0 var(--layout-margin) 40px; }

@media (min-width: 768px) { .page__footer { padding-bottom: 60px; } }
@media (min-width: 1200px) { .page__footer { padding-bottom: 80px; } }

.footer {
  padding: 32px 28px;
  border: var(--stroke-hairline) solid var(--blue-600);
  border-radius: var(--radius-lg);
}

.footer__title {
  margin-bottom: 66px;
  color: var(--blue-600);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--display-section);
  line-height: var(--display-section-lh);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.footer__links + .footer__links { margin-top: 26px; }

.footer__item { display: grid; gap: 6px; }

.footer__label {
  color: var(--grey-500);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
}

.footer__value {
  color: var(--grey-200);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.footer__value:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 768px) {
  .footer__links { flex-direction: row; flex-wrap: wrap; column-gap: 64px; row-gap: 34.5px; }
  .footer__links + .footer__links { margin-top: 54px; }
}

/* --- Status pages (coming soon, errors) -------------------------------- */
.status-page {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 120px var(--layout-margin) var(--layout-section-gap);
  text-align: center;
}

.status-page__eyebrow {
  color: var(--grey-400);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.status-page__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--display-title);
  line-height: var(--display-title-lh);
}

.status-page__text {
  max-width: 520px;
  color: var(--text-supporting);
  font-size: var(--text-body-m);
  line-height: var(--text-body-m-lh);
}

.status-page__actions { justify-content: center; margin-top: 16px; }
.status-page + .contact { padding-bottom: var(--layout-section-gap); }

/* --- Motion preferences ------------------------------------------------ */
@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;
  }
}