/* Subtle ambient pointer light: keeps the native cursor unobstructed. */
.site-skip-link {
  position: fixed;
  z-index: 10000;
  inset-block-start: .75rem;
  inset-inline-start: .75rem;
  padding: .7rem 1rem;
  color: #fff;
  background: #174b7c;
  border: 2px solid #fff;
  border-radius: .35rem;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform .18s ease;
}

.site-skip-link:focus { transform: translateY(0); }

.techfolio-shell .interactive-cursor-dot {
  display: none !important;
}

/* Keep the hero title inside its text column at every desktop width. */
.techfolio-shell .main-hero-title {
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: normal;
  text-wrap: balance;
  line-height: 1.28 !important;
}

@media (min-width: 769px) and (max-width: 1500px) {
  .techfolio-shell .main-hero-title {
    font-size: clamp(2.4rem, 4.1vw, 3.55rem) !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  .techfolio-shell .interactive-cursor-ring {
    display: block !important;
    z-index: 0 !important;
    width: 15rem !important;
    height: 15rem !important;
    border: 0 !important;
    background: radial-gradient(
      circle,
      rgba(96, 165, 250, .10) 0%,
      rgba(59, 130, 246, .055) 34%,
      rgba(59, 130, 246, 0) 72%
    ) !important;
    filter: blur(10px);
    box-shadow: none !important;
    opacity: var(--cursor-opacity, 1) !important;
    transform: translate(-50%, -50%) !important;
    transition:
      left 110ms ease-out,
      top 110ms ease-out,
      opacity 260ms ease !important;
    mix-blend-mode: screen;
  }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .techfolio-shell .interactive-cursor-ring,
  .techfolio-shell .interactive-cursor-dot {
    display: none !important;
  }
}

/* Long Arabic titles must wrap instead of being clipped on narrow screens. */
@media (max-width: 768px) {
  .techfolio-shell .main-hero-title,
  .techfolio-shell .main-section-title {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    text-wrap: balance;
    line-height: 1.42 !important;
  }

  .techfolio-shell .main-hero-title {
    font-size: clamp(1.55rem, 8vw, 2.15rem) !important;
  }
}

/* Keep frequently used labels readable across the dark portfolio sections. */
@media screen {
  .techfolio-shell .text-xs,
  .techfolio-shell [class*="text-[10px]"],
  .techfolio-shell [class*="text-[11px]"] {
    font-size: .875rem !important;
    line-height: 1.6 !important;
  }
}

@media print {
  .techfolio-shell .interactive-cursor-ring,
  .techfolio-shell .interactive-cursor-dot {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Institutional header layout — keeps the existing identity, colors and links
   while giving the header a content-driven height at every breakpoint.
══════════════════════════════════════════════════════════════════════════════ */
.techfolio-nav,
.techfolio-nav > div {
  overflow: visible !important;
}

.techfolio-nav > div.absolute.inset-x-0.bottom-0 {
  pointer-events: none !important;
}

.techfolio-nav > div {
  height: auto !important;
  min-height: 5.25rem;
  padding-block: .65rem !important;
  align-items: center !important;
}

.techfolio-nav #nav-logo-link {
  min-width: 0;
  flex: 0 1 auto;
  align-items: center !important;
  gap: .75rem !important;
  overflow: visible !important;
}

.techfolio-nav #nav-logo-link > div:first-child {
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 3.5rem;
}

.techfolio-nav #nav-logo-link > div:nth-child(2) {
  min-width: 0;
  max-width: 17rem;
  justify-content: center;
}

.techfolio-nav #nav-logo-link > div:nth-child(2) > span:first-child {
  display: block;
  color: #f2f4f7 !important;
  font-size: 1rem !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: break-word;
}

.techfolio-nav #nav-logo-link > div:nth-child(2) > span:nth-child(2) {
  display: block;
  color: #878e99 !important;
  font-size: .72rem !important;
  line-height: 1.35 !important;
  letter-spacing: .03em !important;
  white-space: normal !important;
}

.techfolio-nav nav {
  align-items: center !important;
  gap: .15rem !important;
  flex: 0 1 auto;
  min-width: 0;
}

.techfolio-nav nav > a {
  display: inline-flex !important;
  align-items: center;
  min-height: 2.5rem;
  line-height: 1.35 !important;
  white-space: nowrap !important;
}

.techfolio-nav > div > div:last-child {
  align-items: center !important;
  flex: 0 0 auto;
  gap: .55rem !important;
}

.techfolio-nav #print-portfolio-btn,
.techfolio-nav #print-portfolio-btn span,
.techfolio-nav [class*="rounded-lg"] button {
  line-height: 1.35 !important;
}

@media (min-width: 1280px) {
  .techfolio-nav > div { min-height: 5.25rem; }
  .techfolio-nav #nav-logo-link > div:nth-child(2) { width: 16rem; max-width: 16rem; }
}

@media (min-width: 640px) and (max-width: 1279px) {
  .techfolio-nav > div { min-height: 4.75rem; }
  .techfolio-nav #nav-logo-link > div:nth-child(2) > span:first-child { font-size: .95rem !important; }
}

@media (max-width: 639px) {
  .techfolio-nav > div {
    min-height: 4.5rem;
    padding-inline: 1rem !important;
    padding-block: .5rem !important;
  }

  /* The mobile header keeps the logo and festival name; the association line
     moves out of the compact row to prevent crowding. */
  .techfolio-nav #nav-logo-link > div.hidden {
    display: flex !important;
    width: min(12.5rem, calc(100vw - 9rem));
    max-width: min(12.5rem, calc(100vw - 9rem));
    min-width: 0;
  }

  .techfolio-nav #nav-logo-link > div.hidden > span:first-child {
    font-size: .86rem !important;
    line-height: 1.25 !important;
  }

  .techfolio-nav #nav-logo-link > div.hidden > span:nth-child(2) {
    display: none !important;
  }

  .techfolio-nav #nav-logo-link > div:first-child {
    width: 3rem;
    height: 3rem;
    flex-basis: 3rem;
  }

  .techfolio-nav #nav-logo-link { gap: .5rem !important; }
  .techfolio-nav > div > div:last-child { gap: .25rem !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Header identity: three balanced rows with a true viewport-centred title.
   The existing links, labels, colors and handlers remain untouched.
══════════════════════════════════════════════════════════════════════════════ */
.techfolio-nav > div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  direction: ltr;
  column-gap: 1rem;
  row-gap: .35rem;
  align-items: center !important;
  min-height: 8.35rem;
  padding-block: .75rem !important;
}

.techfolio-nav #nav-logo-link {
  display: contents !important;
}

.techfolio-nav #nav-logo-link > div:first-child {
  grid-column: 3;
  grid-row: 1 / 4;
  justify-self: end;
  align-self: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0;
}

.techfolio-nav #nav-logo-link > div:nth-child(2) {
  display: contents !important;
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
}

.techfolio-nav #nav-logo-link > div:nth-child(2) > span:first-child {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: end;
  width: 100%;
  color: #f2f4f7 !important;
  font-size: clamp(1rem, 1.6vw, 1.25rem) !important;
  line-height: 1.25 !important;
  text-align: center;
  direction: rtl;
  white-space: normal !important;
}

.techfolio-nav #nav-logo-link > div:nth-child(2) > span:nth-child(2) {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  align-self: start;
  width: 100%;
  color: #878e99 !important;
  font-size: .75rem !important;
  line-height: 1.3 !important;
  letter-spacing: .035em !important;
  text-align: center;
  direction: rtl;
  white-space: normal !important;
}

.techfolio-nav nav {
  grid-column: 2;
  grid-row: 3;
  justify-self: center;
  align-self: center;
  width: max-content;
  max-width: 100%;
  margin: 0;
  direction: rtl;
}

.techfolio-nav > div > div:first-of-type {
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
  align-self: auto;
  margin: 0;
}

.techfolio-nav > div > div:has(#print-portfolio-btn),
.techfolio-nav > div > div:has([aria-controls="mobile-navigation"]) {
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
  align-self: center;
  direction: rtl;
  margin: 0;
}

.techfolio-nav > div > div.absolute.inset-x-0.bottom-0 {
  grid-column: 1 / -1;
  grid-row: 4;
  width: 100%;
  align-self: end;
}

@media (min-width: 640px) and (max-width: 1279px) {
  .techfolio-nav > div {
    min-height: 8.1rem;
    row-gap: .3rem;
  }
  .techfolio-nav #nav-logo-link > div:first-child { width: 3.25rem; height: 3.25rem; }
  .techfolio-nav #nav-logo-link > div:nth-child(2) > span:first-child { font-size: 1.05rem !important; }
}

@media (max-width: 639px) {
  .techfolio-nav > div {
    min-height: 8.75rem;
    padding-block: .65rem !important;
    column-gap: .5rem;
    row-gap: .3rem;
  }

  .techfolio-nav #nav-logo-link > div:first-child {
    width: 3rem;
    height: 3rem;
    grid-column: 3;
  }

  .techfolio-nav #nav-logo-link > div:nth-child(2) {
    display: contents !important;
  }

  .techfolio-nav #nav-logo-link > div:nth-child(2) > span:first-child {
    grid-column: 2;
    font-size: .9rem !important;
    line-height: 1.28 !important;
  }

  .techfolio-nav #nav-logo-link > div:nth-child(2) > span:nth-child(2) {
    display: block !important;
    grid-column: 2;
    font-size: .67rem !important;
    line-height: 1.3 !important;
  }

  .techfolio-nav > div > div:first-of-type {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
  }
}

/* Final header spacing refinement: keep the title centred while tightening
   the identity stack and bringing the mark closer to it. */
.techfolio-nav > div {
  row-gap: 0;
  min-height: 7.8rem;
}

.techfolio-nav #nav-logo-link > div:first-child {
  justify-self: center;
}

.techfolio-nav #nav-logo-link > div:nth-child(2) > span:nth-child(2) {
  margin-top: 5px;
  color: #aab4c1 !important;
  font-size: .82rem !important;
  line-height: 1.25 !important;
}

@media (min-width: 640px) and (max-width: 1279px) {
  .techfolio-nav > div { min-height: 7.6rem; }
}

@media (max-width: 639px) {
  .techfolio-nav > div { min-height: 8.5rem; }
  .techfolio-nav #nav-logo-link > div:nth-child(2) > span:nth-child(2) {
    font-size: .72rem !important;
  }
}

/* Keep the identity mathematically centred across the complete header width. */
@media (min-width: 640px) {
  .techfolio-nav #nav-logo-link > div:nth-child(2) > span:first-child,
  .techfolio-nav #nav-logo-link > div:nth-child(2) > span:nth-child(2) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(70%, 48rem);
  }

  .techfolio-nav #nav-logo-link > div:first-child {
    width: 4.25rem;
    height: 4.25rem;
    z-index: 1;
  }
}

@media (min-width: 640px) and (max-width: 1279px) {
  .techfolio-nav #nav-logo-link > div:first-child {
    width: 3.9rem;
    height: 3.9rem;
  }
}

@media (max-width: 639px) {
  .techfolio-nav #nav-logo-link > div:first-child {
    width: 3.5rem;
    height: 3.5rem;
  }
}

/* Remove the technical resolution badge from the image surface while keeping
   the image, caption, zoom control and source actions unchanged. */
.hero-visual > div.relative > div.absolute.top-3.left-3 {
  display: none !important;
}

/* The official-file CTA is intentionally omitted from the public page. */
.footer-cta,
.techfolio-nav #print-portfolio-btn {
  display: none !important;
}

@font-face {
  font-family: "Arabswell";
  src: url("/assets/fonts/Arabswell.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Use the supplied Arabic typeface consistently across the existing interface. */
.techfolio-shell,
.techfolio-shell * {
  font-family: "Arabswell", Cairo, sans-serif !important;
}

html,
body {
  font-family: "Arabswell", Cairo, sans-serif !important;
}

@font-face {
  font-family: "CrashNumberingGothic";
  src: url("/assets/fonts/Crashnumberinggothic.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "CrashNumberingSerif";
  src: url("/assets/fonts/Crashnumberingserif.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Number-only treatments: prominent counters use Gothic; year markers use Serif. */
.techfolio-shell span[class*="text-3xl"][class*="font-black"][class*="font-display"],
.techfolio-shell span[class*="text-4xl"][class*="font-black"][class*="font-display"],
.techfolio-shell span[class*="text-5xl"][class*="font-black"][class*="font-display"],
.techfolio-shell span[class*="text-6xl"][class*="font-black"][class*="font-display"] {
  font-family: "CrashNumberingGothic", Arabswell, sans-serif !important;
  font-variant-numeric: tabular-nums;
}

.techfolio-shell span[class*="text-2xl"][class*="font-black"][class*="font-display"],
.techfolio-shell span[class*="text-xs"][class*="font-black"][class*="font-display"] {
  font-family: "CrashNumberingSerif", Arabswell, sans-serif !important;
  font-variant-numeric: tabular-nums;
}

@font-face {
  font-family: "TiltWarpLatin";
  src: url("/assets/fonts/TiltWarp.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Applied by the small text classifier to pure Latin labels only. */
.techfolio-shell .latin-font {
  font-family: "TiltWarpLatin", Arial, sans-serif !important;
}