/* ==========================================================================
   Base
   ========================================================================== */

body {
  background: var(--color-bg);
  color: var(--color-text-accent);
  font-family: var(--font-primary);
  text-transform: uppercase;
  overflow-x: hidden;
}

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

.wrapper {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */

/* Shared nav + dropdown-panel shell (courier-studio.com pattern): nav and the
   active overlay panel are siblings inside ONE fixed, full-width container
   with a single shared background — the panel grows directly out of the nav,
   not as a separate floating card. A light blur sits behind the nav at all
   times (case-study pages scroll content underneath it), and gets stronger
   once a dropdown panel opens; height is animated via CSS Grid (0fr -> 1fr). */
.nav-shell {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 100vh;
  overflow-y: auto;
  background: rgba(16, 16, 16, 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

.nav-shell[data-open="true"] {
  background: var(--color-overlay-backdrop);
  backdrop-filter: blur(var(--overlay-blur-desktop));
  -webkit-backdrop-filter: blur(var(--overlay-blur-desktop));
}

.nav-shell__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.nav-shell[data-open="true"] .nav-shell__panel {
  grid-template-rows: 1fr;
}

.nav-shell__panel-inner {
  overflow: hidden;
  min-height: 0;
}

.nav {
  padding-top: var(--header-top);
  padding-bottom: 16px;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  font-size: var(--fs-nav);
}

/* Logo height is fixed per breakpoint (not em-based) so it stays compact
   even as --fs-nav grows for readability — the two are sized independently. */
.nav__logo {
  height: 14px;
  width: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.nav__logo img {
  height: 100%;
  width: auto;
}

.nav__left {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav__group {
  display: flex;
  align-items: center;
  gap: 13px;
}

/* Mobile/tablet: unwrap the logo+start and about+contact groupings so all
   four nav items become direct flex children of .nav__inner — with
   justify-content:space-between that spreads them into equal gaps edge to
   edge (matching the hero text/card row's container padding), instead of
   two clusters with one big gap in the middle. Desktop keeps the grouped
   layout (see min-width:1024px below). Placed after the .nav__left/.nav__group
   rules above so it wins the cascade at equal specificity. */
@media (max-width: 1023px) {
  .nav__left,
  .nav__group {
    display: contents;
  }
}

.nav__link {
  position: relative;
  white-space: nowrap;
}

.nav__link[aria-current="true"] {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Desktop nav: edge-anchored within the SAME max-width:1440 + container-padding
   box as .overlay__inner, so the logo lines up with the panel content's left
   edge and Contact lines up with the close button's right edge — instead of
   the whole cluster floating centered in the viewport (which drifted out of
   alignment with the panel content on wide screens). */
@media (min-width: 1024px) {
  .nav__inner {
    justify-content: space-between;
    gap: 0;
    width: 100%;
    max-width: 1440px;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    margin: 0 auto;
  }

  .nav__left {
    gap: 507px;
    width: 745px;
  }

  .nav__group {
    gap: 59px;
  }
}

/* ==========================================================================
   Hero + horizontal project scroll
   ========================================================================== */

.hero {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.hero__text {
  font-size: var(--fs-hero);
  font-weight: 300;
  line-height: 1.35;
  max-width: 40ch;
  color: var(--color-text-inactive);
  padding: 0 var(--container-padding);
  margin: 0 auto;
  margin-top: var(--hero-text-top);
  text-align: center;
}

.hero__text strong {
  font-weight: 400;
  color: var(--color-text-accent);
}

/* Desktop hero text (Figma 191:19): 1261px of 1440px canvas — nearly full width, not a narrow column. */
@media (min-width: 1024px) {
  .hero__text {
    max-width: 1261px;
  }
}

.project-scroll {
  width: 100%;
  flex: 1;
  min-height: 0;
  margin-top: var(--hero-gap);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

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

.project-list {
  display: flex;
  height: 100%;
  gap: var(--card-gap);
  padding: 0 var(--container-padding);
  width: max-content;
}

.project-card {
  scroll-snap-align: start;
  height: 100%;
  aspect-ratio: 466 / 617;
  flex: 0 0 auto;
  border-radius: 0;
  overflow: hidden;
  background: var(--color-placeholder);
  position: relative;
}

.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Overlay panel content (Start a project / About / Contact) — these render
   inside .nav-shell__panel-inner, sharing the nav's own fixed/background/blur
   (see Header / Navigation above). Only one is unhidden at a time.
   ========================================================================== */

.overlay-content {
  width: 100%;
}

.overlay__inner {
  position: relative;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 32px var(--container-padding) 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 1024px) {
  .overlay__inner {
    max-width: 1440px;
    padding: 48px var(--container-padding) 56px;
  }
}

.overlay__close {
  position: absolute;
  top: 16px;
  right: var(--container-padding);
  font-size: 12px;
  opacity: var(--color-close-opacity);
  z-index: 5;
}

@media (min-width: 1024px) {
  .overlay__close {
    top: 24px;
    right: var(--container-padding);
    font-size: 14px;
  }
}

/* Start a project */

.overlay__section {
  max-width: 640px;
}

.overlay__label {
  font-size: 15px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pill {
  border: 1px solid var(--color-pill-border);
  border-radius: var(--radius-pill);
  padding: 0.6em 1.1em;
  font-size: 15px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pill:hover {
  background: var(--color-pill-hover-bg);
  border-color: var(--color-pill-hover-border);
}

.pill[aria-pressed="true"] {
  background: var(--color-text-accent);
  border-color: var(--color-text-accent);
  color: var(--color-bg);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form[hidden] {
  display: none;
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form__label {
  font-size: 13px;
  color: var(--color-form-placeholder);
}

.form__input {
  border: 1px solid var(--color-form-border);
  border-radius: var(--radius-input);
  padding: 0.8em 1em;
  font-size: 15px;
  font-weight: 300;
  width: 100%;
}

.form__input::placeholder {
  color: var(--color-form-placeholder);
}

.form__textarea {
  resize: none;
  height: 100px;
  font-family: inherit;
}

.form__submit {
  align-self: flex-start;
  background: var(--color-text-accent);
  color: var(--color-bg);
  border-radius: var(--radius-submit);
  padding: 0.8em 2em;
  font-size: 15px;
  font-weight: bold;
  margin-top: 4px;
}

.form__status {
  font-size: 13px;
  font-weight: 300;
  text-transform: none;
  line-height: 1.5;
  max-width: 480px;
}

.form__status--error {
  color: var(--color-error);
}

.form__status--error a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.form__status--success {
  font-size: 15px;
  color: var(--color-text-accent);
}

/* About */

.bio {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 1em;
  max-width: 480px;
}

.about__columns {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.about__columns > :last-child {
  padding-top: 0;
}

@media (min-width: 640px) {
  .about__columns > :last-child {
    padding-top: 32px;
  }
}

.services-list {
  display: flex;
  flex-direction: column;
  gap: 0.9em;
}

.service-item {
  position: relative;
  padding: 0;
}

.service-item__name {
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

.service-item:hover .service-item__name,
.service-item[data-expanded="true"] .service-item__name {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.service-item__desc {
  font-size: 13px;
  font-weight: 300;
  text-transform: none;
  color: var(--color-text-inactive);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease, margin-top 0.3s ease;
}

.service-item[data-expanded="true"] .service-item__desc {
  max-height: 200px;
  margin-top: 0.5em;
}

.service-item__tooltip {
  display: none;
  position: absolute;
  top: 0;
  right: 100%;
  margin-right: 16px;
  background: var(--color-tooltip-bg);
  backdrop-filter: blur(var(--tooltip-blur));
  -webkit-backdrop-filter: blur(var(--tooltip-blur));
  padding: 14px 18px;
  font-size: 15px;
  text-transform: none;
  font-weight: 300;
  width: max-content;
  max-width: 28ch;
  border-radius: 4px;
  z-index: 5;
}

@media (min-width: 640px) {
  .about__columns {
    flex-direction: row;
    justify-content: space-between;
  }

  .bio {
    flex: 0 0 auto;
  }

  .about__columns > :last-child {
    flex: 0 0 auto;
  }

  .service-item__desc {
    display: none;
  }

  .service-item:hover .service-item__tooltip {
    display: block;
  }
}

/* Contact */

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 18px;
  font-weight: 400;
  text-transform: none;
}

.contact-columns {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-list__row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.contact-list__label {
  font-size: 13px;
  font-family: var(--font-label);
  font-weight: 400;
  color: var(--color-text-inactive);
}

@media (min-width: 480px) {
  .contact-columns {
    flex-direction: row;
    gap: 48px;
  }
}