/* ==========================================================================
   Aldana Elena Dabija — portfolio
   Built from the Figma "Desktop" frame (1280px wide).

   Sizes are in rem so the whole layout can scale: 1rem = 16px up to a
   1440px-wide screen, then the root size grows with the screen (see "Large
   screens" below), so HD / 2K / 4K monitors show the same design, bigger.
   ========================================================================== */

/* Fonts (self-hosted DM Sans, variable 400–700) ---------------------------- */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/dm-sans-latin.woff2") format("woff2");
  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: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/dm-sans-latin-ext.woff2") format("woff2");
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Tokens ------------------------------------------------------------------- */
:root {
  color-scheme: light;
  --ink: #1b1b1b;
  --muted: #555;
  --sup: #757575;
  --accent: #9b4e53;
  --line: #e6e6e6;
  --bg: #fff;

  --sidebar-w: 15.625rem;   /* 250 */
  --header-h: 0rem;         /* height of the mobile top bar; 0 on desktop */
  --gutter: 2rem;           /* 32 */
  --wrap-max: 77.5rem;      /* 1240 */

  --fs-display: clamp(2.125rem, 1.583rem + 2.708vw, 3.75rem); /* 34 → 60 */
  --fs-lg: clamp(1.375rem, 1.14rem + 0.99vw, 1.9375rem);      /* 22 → 31 */
  --fs-md: clamp(1.25rem, 1.2rem + 0.22vw, 1.375rem);         /* 20 → 22 */
  --fs-body: clamp(1rem, 0.97rem + 0.11vw, 1.0625rem);        /* 16 → 17 */
  --fs-label: 0.875rem;                                        /* 14 */
  --fs-nav: 0.9375rem;                                         /* 15 */
  --lh-body: 1.375rem;                                         /* 22 */

  --space-section: 7.5rem;  /* 120 */
}

/* Large screens: grow everything proportionally above 1440px
   (1920 → ×1.33, 2560 → ×1.78, 3840 → ×2.67) */
@media (min-width: 1440px) {
  html { font-size: max(100%, 1.1111vw); }
}

/* Reset -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Base --------------------------------------------------------------------- */
body {
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.3;
  color: var(--ink);
  background: var(--bg);
  font-optical-sizing: none;   /* match Figma: DM Sans at its default optical size */
}

strong { font-weight: 600; color: var(--ink); }

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

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -6rem;
  z-index: 100;
  padding: 0.625rem 0.875rem;
  background: var(--ink);
  color: #fff;
}
.skip-link:focus { top: 0.75rem; }

.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

[id] { scroll-margin-top: var(--header-h); }

/* Type --------------------------------------------------------------------- */
.display {
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1.08;
}
.title-lg {
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: 1.48;
}
.title-md {
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.accent { color: var(--accent); }

/* Sidebar (desktop) -------------------------------------------------------- */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: var(--sidebar-w);
  background: var(--bg);
  border-right: 1px solid var(--line);
}
.sidebar__logo {
  display: block;
  padding: 1.875rem 0 1.85rem 2.0625rem;
  border-bottom: 1px solid var(--line);
}
.sidebar__logo img { width: 12.375rem; max-width: none; }

.sidebar__nav {
  --nav-pad: 2rem;
  padding: 1.125rem var(--nav-pad) 1.5625rem;
  border-bottom: 1px solid var(--line);
}
.sidebar__nav a {
  display: inline-block;
  font-size: var(--fs-nav);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.75rem;
  transition: color .2s;
}
.sidebar__nav a:hover,
.sidebar__nav a[aria-current] { color: var(--accent); }

.sidebar__nav sup {
  position: relative;
  top: -0.55em;
  margin-left: 1px;
  font-size: 0.65em;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0;
  vertical-align: baseline;
  color: var(--sup);
}

.menu-toggle { display: none; }

.page { margin-left: var(--sidebar-w); }

/* LinkedIn link (menu + Experience) */
.linkedin {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-weight: 500;
  color: var(--ink);
  transition: color .2s;
}
.linkedin:hover { color: var(--accent); }
.linkedin__icon {
  flex: none;
  width: 1.125em;
  height: 1.125em;
  margin-top: 0.08em;
  fill: currentColor;
}
.sidebar__nav .linkedin {
  display: flex;
  margin: 1.25rem calc(-1 * var(--nav-pad)) 0;
  padding: 1.125rem var(--nav-pad) 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-label);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.prose > .prose__cta { margin-top: 2.25rem; }

/* text for screen readers only */
.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;
}

/* Hero --------------------------------------------------------------------- */
.hero {
  position: relative;
  aspect-ratio: 1030 / 658;
  min-height: 26.25rem;
  min-height: min(26.25rem, 75svh);
  max-height: 88vh;
  max-height: 88svh;
  width: 100%;
  overflow: hidden;
  background: #1b1b1b;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 69%;   /* reproduces the design's framing */
}
/* soft shade behind the headline */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 0% 100%, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0));
}
.hero__inner {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding-bottom: 1.375rem;
}
.hero__title {
  color: #fff;
  text-transform: uppercase;
  line-height: 1.1;
}
/* very wide, short screens (21:9): keep the eyes in frame */
@media (min-aspect-ratio: 2/1) {
  .hero__img { object-position: 50% 42%; }
}

/* Blocks ------------------------------------------------------------------- */
.block {
  border-top: 1px solid var(--line);
  padding: 2rem 0 var(--space-section);
}
.block--first { border-top: 0; }
.block--tight { padding-bottom: 1.6875rem; }
.block--roomy { padding-bottom: 10.25rem; }
.block--contact { padding-top: 1.25rem; padding-bottom: 0; }

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
.row--intro { grid-template-columns: 2fr 3fr; }
/* title column hugs "Most Recent Project" when there is room, text gets the rest */
.row--project { grid-template-columns: minmax(0, max-content) minmax(18.75rem, 1fr); }

.section-title__num,
.section-title__name { display: block; }
.section-title__num { color: var(--accent); }

/* Running text */
.prose { color: var(--muted); line-height: var(--lh-body); }
.prose > * + * { margin-top: var(--lh-body); }
.prose--ink { color: var(--ink); }

.prose > .prose__media { margin-block: 2.125rem 2.25rem; }
.prose__media img { width: 100%; }

.dash-list li::before { content: "- "; }
.dot-list { list-style: disc; padding-left: 1.6875rem; }

.big-list { font-size: var(--fs-lg); line-height: 1.48; }
.big-list a { transition: color .2s; }
.big-list a:hover { color: var(--accent); }

/* 02 Responsibilities ------------------------------------------------------ */
.sub-block { margin-top: 6rem; }

.feature + .feature { margin-top: 2.5rem; }
.feature p,
.col p { color: var(--muted); line-height: var(--lh-body); margin-top: 0.25rem; }

.values { margin-top: 3.75rem; }
.values img { width: 100%; margin-top: 1.5rem; }

.divider {
  margin: 1.875rem 0 1.5rem;
  border: 0;
  border-top: 1px solid var(--line);
}

.cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 4rem;
  margin-bottom: 6rem;
}
.col p { margin-top: var(--lh-body); }

/* 03 General Stats --------------------------------------------------------- */
.case { margin-top: 1rem; }
.case--first { margin-top: 4.5rem; }
.case img { width: 100%; margin-top: 0.625rem; }
.case__caption { font-size: 1.125rem; line-height: var(--lh-body); }

/* 04 Most Recent Project --------------------------------------------------- */
/* uniform gallery: every tile 4:3, the full image opens in the viewer */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 5rem;
}
.gallery .zoom { aspect-ratio: 4 / 3; }
.gallery .zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery .tile--left { object-position: 30% 50%; }   /* keep the "Color Palette" title in frame */

/* Clickable thumbnails ------------------------------------------------------ */
.zoom {
  display: block;
  overflow: hidden;
  cursor: zoom-in;
  background: #f3f1ee;
}
.zoom img { width: 100%; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .zoom img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
  .zoom:hover img { transform: scale(1.025); }
}

/* Image viewer (lightbox) --------------------------------------------------- */
html.lightbox-open { overflow: hidden; }

.lightbox {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  overflow: hidden;
}
.lightbox[open] {
  display: grid;
  place-items: center;
}
.lightbox::backdrop { background: rgba(17, 17, 17, .94); }

/* one calm, consistent frame for every image; JS adds --cap-w/--cap-h so an
   image is never blown up much past its real resolution */
.lightbox {
  --frame-w: min(88vw, 60rem);
  --frame-h: 80vh;
}
.lightbox__img {
  max-width: min(var(--frame-w), var(--cap-w, 100vw));
  max-height: min(var(--frame-h), var(--cap-h, 100vh));
  width: auto;
  height: auto;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .45);
  user-select: none;
}

.lightbox__btn {
  position: fixed;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
  transition: background .2s;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .22); }
.lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lightbox__btn svg { width: 1.5rem; height: 1.5rem; }
.lightbox__btn[hidden] { display: none; }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev,
.lightbox__next { top: 50%; transform: translateY(-50%); }
.lightbox__prev { left: 1rem; }
.lightbox__next { right: 1rem; }

.lightbox__count {
  position: fixed;
  bottom: 1rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--fs-label);
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .7);
}

@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] .lightbox__img { animation: lightbox-in .3s ease-out; }
  .lightbox[open]::backdrop { animation: lightbox-fade .3s ease-out; }
}
@keyframes lightbox-in { from { opacity: 0; transform: scale(.97); } }
@keyframes lightbox-fade { from { opacity: 0; } }

/* 05 Contact --------------------------------------------------------------- */
.email {
  font-weight: 600;
  color: var(--ink);
  transition: color .2s;
  overflow-wrap: anywhere;
}
.email:hover { color: var(--accent); }

/* Footer ------------------------------------------------------------------- */
.footer__top {
  align-items: end;
  align-items: last baseline;   /* "Back to the top" sits on the logo's bottom edge */
  padding-top: 7.75rem;
  padding-bottom: 1.75rem;
}
.footer__logo { width: 19.6875rem; }
.footer__back {
  justify-self: start;
  font-size: var(--fs-nav);
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: color .2s;
}
.footer__back:hover { color: var(--accent); }

.footer__bottom {
  border-top: 1px solid var(--line);
  padding: 2.375rem 0 3.25rem;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1199px) {
  .cols { grid-template-columns: repeat(2, 1fr); row-gap: 3rem; }
  .row--intro,
  .row--project { grid-template-columns: 1fr 1fr; }
}

/* Sidebar becomes a top bar */
@media (max-width: 959px) {
  :root { --header-h: 4rem; }

  .sidebar {
    position: sticky;
    top: 0;
    inset: auto;
    width: auto;
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--gutter);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .sidebar__logo { padding: 0; border: 0; }
  .sidebar__logo img { width: auto; height: 1.75rem; }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;     /* comfortable tap target */
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--fs-nav);
    cursor: pointer;
  }
  .menu-toggle::after {
    content: "";
    width: 1.125rem;
    height: 0.4375rem;
    border-block: 1.5px solid currentColor;
  }

  .sidebar__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
    --nav-pad: var(--gutter);
    padding: 0.75rem var(--nav-pad) 1.25rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px -16px rgba(0, 0, 0, .25);
  }
  .nav-open .sidebar__nav { display: block; }
  .sidebar__nav a { font-size: 1.125rem; line-height: 2.75rem; }
  .sidebar__nav .linkedin { font-size: 1rem; margin-top: 0.75rem; padding-top: 1rem; }

  .page { margin-left: 0; }
}

/* Phones */
@media (max-width: 767px) {
  :root {
    --gutter: 1.25rem;
    --space-section: 4.5rem;
  }

  .row,
  .row--intro,
  .row--project { grid-template-columns: 1fr; gap: 1.5rem; }

  .hero { aspect-ratio: auto; height: min(78vh, 38.75rem); height: min(78svh, 38.75rem); min-height: 27.5rem; }
  .hero__img { object-position: 76% 50%; }   /* keep the face in the narrow frame */
  .hero::after { background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 55%); }
  .hero__inner { padding-bottom: 1.5rem; }

  .block--roomy { padding-bottom: 6rem; }
  .sub-block { margin-top: 4rem; }
  .values { margin-top: 3.5rem; }
  .values img { margin-top: 1rem; }
  .cols { margin-bottom: 1.5rem; }
  .case--first { margin-top: 3rem; }
  .case + .case { margin-top: 2rem; }
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 0.625rem; margin-top: 3rem; }
  .lightbox { --frame-w: 100vw; --frame-h: 76vh; }
  .lightbox__prev,
  .lightbox__next { top: auto; bottom: 0.75rem; transform: none; }
  .lightbox__count { bottom: 1.75rem; }

  .footer__top { padding-top: 4.5rem; gap: 2rem; }
  .footer__logo { width: 13.375rem; }
  .footer__bottom { padding: 1.75rem 0 2.25rem; }
}

@media (max-width: 559px) {
  .cols { grid-template-columns: 1fr; row-gap: 2.25rem; }
  .col p { margin-top: 0.625rem; }
}

/* Phones held sideways: don't let the hero swallow the whole screen */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 0; height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); max-height: none; aspect-ratio: auto; }
}

/* 404 page ------------------------------------------------------------------ */
.not-found__main {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
}
.not-found__logo { width: 12.375rem; }