/* Fidelity-preserving responsive fixes layered over the original portfolio. */

:where(h1, h2, h3, h4, h5, h6, strong, b, a, button, .project-title, .software-name) {
  hyphens: none;
  word-break: normal;
}

.mega {
  overflow-wrap: normal;
  white-space: nowrap;
}

.work > .mega {
  font-size: clamp(30px, 10.25vw, 190px);
  line-height: 0.78;
}

.mega .inline-mark,
.brand-note .note-mark,
.copy-confirmation .button-mark,
.marquee-item .marquee-mark {
  break-before: avoid;
  white-space: nowrap;
}

.project-cta,
.project-number,
.poster-index,
.language-switch,
.socials a,
.case-nav button,
.modal-top button,
footer a {
  white-space: nowrap;
}

.project-image img,
.popup-slide img,
.tag-project-card img {
  image-rendering: auto;
}

.project-grid > .project {
  border: 1px solid var(--white) !important;
  transition: border-color 180ms ease;
}

.project-grid > .project:is(:hover, :focus-within) {
  border-color: var(--acid) !important;
}

.project-grid > .project:is(:hover, :focus-within) .project-info {
  background: var(--acid) !important;
  color: var(--ink) !important;
}

.project-grid > .project:is(:hover, :focus-within) .project-tags {
  color: var(--ink) !important;
}

.project-grid > .project:is(:hover, :focus-within) .project-image img {
  filter: saturate(1.08) !important;
  transform: scale(1.06) !important;
}

.project-grid > .project .project-image[role="button"] {
  cursor: pointer;
}

.project-grid > .project .project-image[role="button"]:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: -3px;
}

@media (max-width: 760px) {
  :is(
      .work > .mega,
      .about .mega,
      .experience > .mega,
      .contact > .mega,
      .courses article h3,
      .timeline h3,
      .software-name,
      .project-title,
      .contact-option strong,
      .case header h2,
      .case-intro h3,
      .tag-popup-header h2
    ) {
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  :is(.work > .mega, .about .mega, .experience > .mega, .contact > .mega) {
    white-space: nowrap !important;
  }

  .work > .mega {
    margin-block: 22vw;
    font-size: clamp(30px, 10.25vw, 78px);
  }

  .about .mega {
    font-size: 18vw;
  }

  .experience .mega {
    overflow-wrap: normal;
    white-space: nowrap;
    font-size: 10.5vw;
  }

  .experience .mega em {
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .contact .mega {
    overflow-wrap: normal;
    white-space: nowrap;
    font-size: 10.8vw;
  }

  :is(
      .courses article h3,
      .timeline h3,
      .software-name,
      .project-title,
      .contact-option strong,
      .case header h2,
      .case-intro h3,
      .tag-popup-header h2
    ) {
    overflow-wrap: normal;
    word-break: normal;
  }

  .timeline h3 {
    font-size: clamp(23px, 6.8vw, 34px);
  }

  .project-grid .project-info > .project-title,
  .project-grid .project:hover .project-info > .project-title {
    font-size: clamp(20px, 5.9vw, 31px);
    text-wrap: balance;
  }

  .case header h2 {
    font-size: clamp(38px, 10.5vw, 66px);
    text-wrap: balance;
  }

  .case-intro h3 {
    font-size: clamp(27px, 7.5vw, 44px);
    text-wrap: balance;
  }

  .tag-popup-header h2 {
    font-size: clamp(31px, 8.5vw, 52px);
    text-wrap: balance;
  }

  .contact-option strong {
    font-size: clamp(30px, 9vw, 44px);
    text-wrap: balance;
  }

  .contact-option small {
    overflow-wrap: normal;
    white-space: nowrap;
    font-size: clamp(8px, 2.65vw, 10px);
  }

  .section-label {
    gap: 14px;
    font-size: clamp(8px, 2.4vw, 10px);
  }

  .section-label > span,
  .hero-kicker > span {
    flex: none;
    white-space: nowrap;
  }

  .education h2 {
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (max-width: 390px) {
  .work > .mega {
    font-size: 9.8vw;
  }

  .about .mega {
    font-size: 17vw;
  }

  .contact .mega {
    font-size: 10.2vw;
  }

  .section-label {
    letter-spacing: 0.07em;
  }
}

/* The two ticker bands framing the About section share one treatment. */
.about + .marquee {
  background: var(--ink) !important;
  color: var(--acid) !important;
  border-top-color: var(--acid) !important;
  border-bottom-color: var(--acid) !important;
}

.about + .marquee > .marquee-track,
.about + .marquee .marquee-item,
.about + .marquee .marquee-mark,
.about + .marquee .mark-alt {
  color: var(--acid) !important;
}

/* Account for the portfolio's intentional outer gutter inside the declared
   width, so the work section is centered instead of extending to the right. */
.work {
  width: calc(100% - var(--work-outer) - var(--work-outer)) !important;
  max-width: calc(100% - var(--work-outer) - var(--work-outer)) !important;
}

/* Project archive: a persistent editorial index gives the grid a sense of
   direction without competing with the artwork. */
.work-projects-shell {
  align-items: start;
  display: grid;
  grid-template-columns: minmax(150px, 13vw) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 76px);
}

.project-rail {
  position: sticky;
  top: 94px;
  max-height: calc(100svh - 118px);
  overflow: auto;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 11px 0 13px;
  scrollbar-width: none;
}

.project-rail::-webkit-scrollbar { display: none; }

.project-rail__heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.3;
}

.project-rail__count { color: var(--violet); }

.project-rail__list { display: grid; }

.project-rail__item {
  width: 100%;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 10px;
  gap: 7px;
  align-items: baseline;
  cursor: pointer;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  padding: 9px 0;
  color: var(--ink);
  text-align: left;
  transition: background-color .22s ease, color .22s ease, padding .22s ease;
}

.project-rail__item:first-child { border-top: 0; }
.project-rail__number, .project-rail__arrow { font-size: 8px; letter-spacing: .08em; }
.project-rail__name { overflow: hidden; font-size: 10px; font-weight: 700; letter-spacing: .035em; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.project-rail__arrow { color: var(--violet); opacity: 0; transform: translateX(-4px); transition: opacity .22s ease, transform .22s ease; }

.project-rail__item:is(:hover, :focus-visible), .project-rail__item[aria-current="true"] {
  background: var(--ink);
  color: var(--paper);
  padding-inline: 8px;
  outline: 0;
}

.project-rail__item:is(:hover, :focus-visible) .project-rail__arrow,
.project-rail__item[aria-current="true"] .project-rail__arrow { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .work-projects-shell .project {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .65s cubic-bezier(.2,.75,.2,1), transform .65s cubic-bezier(.2,.75,.2,1);
    transition-delay: min(calc(var(--project-order, 0) * 55ms), 220ms);
  }
  .work-projects-shell .project.is-in-view { opacity: 1; transform: none; }
}

/* Desktop projects sit in balanced pairs. This removes the asymmetric spans
   and offsets from the original masonry layout while preserving each image. */
@media (min-width: 901px) {
  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    align-items: start !important;
    column-gap: clamp(28px, 3.5vw, 72px) !important;
    row-gap: clamp(56px, 7vw, 128px) !important;
  }

  .project-grid > .project,
  .project-grid > .project:nth-child(n) {
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: start !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 900px) {
  .work-projects-shell { display: block; }
  .project-rail { display: none; }
}

@media (max-width: 760px) {
  .work-projects-shell .project { opacity: 1; transform: none; }
}

/* The archive turns into a two-part editorial spread on wide screens: the
   fixed black spine carries context while the work itself reads one image at
   a time. The sticky boundary is the projects shell, so it releases before
   the About section begins. */
@media (min-width: 901px) {
  .work-projects-shell {
    grid-template-columns: clamp(250px, 22vw, 360px) minmax(0, 1fr);
    gap: clamp(36px, 4.5vw, 82px);
  }

  .work-projects-shell .project-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: clamp(70px, 10vw, 180px) !important;
  }

  .work-projects-shell .project-grid > .project,
  .work-projects-shell .project-grid > .project:nth-child(n) {
    grid-column: 1 !important;
    justify-self: center;
    width: min(100%, calc((100svh - 230px) * 1.3333)) !important;
    max-width: 1040px;
    scroll-margin-top: 104px;
    --project-info-height: clamp(128px, 8vw, 150px);
  }

  .project-rail {
    align-self: stretch;
    top: 78px;
    max-height: calc(100svh - 94px);
    min-height: min(620px, calc(100svh - 94px));
    overflow: hidden;
    background: var(--ink);
    border: 0;
    color: var(--paper);
    padding: clamp(24px, 2.4vw, 42px);
  }

  .project-rail__masthead { display: flex; flex-direction: column; gap: clamp(24px, 3.5vh, 42px); height: 100%; }
  .project-rail__vertical { color: var(--acid); font-family: Archivo Black, var(--font-idv), sans-serif !important; font-size: clamp(23px, 1.9vw, 30px); letter-spacing: -.055em; line-height: .9; order: 2; writing-mode: horizontal-tb; transform: none; white-space: nowrap; }
  .project-rail__context { align-content: start; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 13px 20px; font-size: 10px; font-weight: 700; letter-spacing: .11em; line-height: 1.35; }
  .project-rail__context > span:first-child { color: var(--acid); }
  .project-rail__current { font-family: Archivo Black, var(--font-idv), sans-serif !important; font-size: clamp(48px, 5vw, 82px); font-weight: 400; letter-spacing: -.08em; line-height: .76; grid-column: 1 / -1; }
  .project-rail__total { align-self: end; color: #ffffff90; }
  .project-rail__context p { border-top: 1px solid #ffffff45; grid-column: 1 / -1; margin: 2px 0 0; padding-top: 13px; }
}

@media (max-width: 900px) {
  .project-rail__masthead { display: none; }
}

/* Brand-level selection and scroll treatments. Touch devices keep their native
   scrollbar for a familiar, reliable gesture experience. */
::selection {
  background: var(--acid);
  color: var(--ink);
  text-shadow: none;
}

::-moz-selection {
  background: var(--acid);
  color: var(--ink);
  text-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  html, body, .project-popup {
    scrollbar-color: var(--acid) var(--ink);
    scrollbar-width: thin;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  .project-popup::-webkit-scrollbar { width: 14px; height: 14px; }

  html::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track,
  .project-popup::-webkit-scrollbar-track {
    background: var(--ink);
    border-left: 1px solid #ffffff38;
  }

  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb,
  .project-popup::-webkit-scrollbar-thumb {
    background: var(--acid);
    border: 3px solid var(--ink);
    border-radius: 0;
    box-shadow: inset 0 0 0 1px #00000044;
  }

  html::-webkit-scrollbar-thumb:hover,
  body::-webkit-scrollbar-thumb:hover,
  .project-popup::-webkit-scrollbar-thumb:hover { background: #d9ff9d; }
}