/* ============================================================
   DEE ECHEVARRIA — PORTFOLIO
   ============================================================ */


/* ── CUSTOM PROPERTIES ────────────────────────────────────── */

:root {
  --color-bg:         #FFFFFF;
  --color-bg-muted:   #F2F0EE;
  --color-text:       #1A1A1A;
  --color-text-muted: #6B6B6B;
  --color-accent:     #B05A4A;
  --color-accent-h:   #C47060;
  --color-border:     #E0DDD9;

  --serif: 'Faculty Glyphic', Georgia, serif;
  --sans:  'DM Sans', system-ui, sans-serif;

  --max-width:   1280px;
  --pad-desktop: 100px;
  --pad-mobile:  24px;
}


/* ── RESET ────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}


/* ── BODY ─────────────────────────────────────────────────── */

body {
  background:             var(--color-bg);
  color:                  var(--color-text);
  font-family:            var(--sans);
  font-size:              16px;
  line-height:            1.7;
  font-weight:            400;
  -webkit-font-smoothing: antialiased;
  overflow-x:             hidden;
}

/* Hide system cursor on interactive + browser mockup; children inherit */
a, a *,
button, button *,
.browser-screen, .browser-screen * {
  cursor: none;
}


/* ── NAV ──────────────────────────────────────────────────── */

nav {
  position:        sticky;
  top:             0;
  z-index:         100;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:    20px var(--pad-desktop);
  background: var(--color-bg);
}

.nav-name {
  font-family:     var(--serif);
  font-size:       18px;
  color:           var(--color-text);
  text-decoration: none;
  transition:      color 0.2s ease;
}

.nav-name:hover {
  color: var(--color-accent);
}

.nav-links {
  display:     flex;
  align-items: center;
  gap:         32px;
}

.nav-links a {
  font-family:     var(--sans);
  font-weight:     400;
  font-size:       15px;
  color:           var(--color-text-muted);
  text-decoration: none;
  transition:      color 0.2s ease;
}

.nav-links a:hover {
  color: var(--color-text);
}

.nav-linkedin {
  display:     flex;
  align-items: center;
}

.nav-linkedin svg {
  width:      18px;
  height:     18px;
  fill:       var(--color-text-muted);
  transition: fill 0.2s ease;
}

.nav-linkedin:hover svg {
  fill: var(--color-text);
}

@media (max-width: 768px) {
  nav {
    padding: 16px var(--pad-mobile);
  }

  .nav-links {
    gap: 20px;
  }

  .nav-links a {
    font-size: 13px;
  }
}


/* ── HOME — INTRO ────────────────────────────────────────── */

.home-intro {
  padding:    96px var(--pad-desktop);
  text-align: center;
  background: #fff;
}

.home-intro-sub {
  font-family:   var(--serif);
  font-style:    normal;
  font-size:     clamp(32px, 4.6vw, 68px);
  font-weight:   300;
  color:         #000;
  line-height:   1.1;
  margin-bottom: 16px;
}

.home-intro-heading {
  font-family:    var(--sans);
  font-size:      clamp(14px, 1.1vw, 16px);
  font-weight:    400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color:          #000;
}

@media (max-width: 768px) {
  .home-intro {
    padding: 72px var(--pad-mobile) 64px;
  }
}


/* ── HOME — WORK LIST ────────────────────────────────────── */

.work-list {
  padding:    120px 72px 160px;
  background: var(--color-bg-muted);
}

.work-item {
  display:         block;
  text-decoration: none;
  margin-bottom:   120px;
}

.work-item:last-child {
  margin-bottom: 0;
}

.work-item-img {
  width:        100%;
  aspect-ratio: 19/8;
  overflow:     hidden;
  position:     relative;
}

.work-item-img img {
  width:      100%;
  height:     100%;
  display:    block;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.work-item:hover .work-item-img img {
  transform: scale(1.08);
}

.work-item-overlay {
  position:        absolute;
  inset:           0;
  background:      transparent;
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  transition:      opacity 0.35s ease;
}

.work-item:hover .work-item-overlay {
  opacity: 1;
}

.work-item--aig       .work-item-overlay { background: rgba(0,   24,  113, 0.85); }
.work-item--aigwo     .work-item-overlay { background: rgba(28,  29,  74,  0.85); }
.work-item--marsh     .work-item-overlay { background: rgba(46,  100, 120, 0.85); }
.work-item--savant    .work-item-overlay { background: rgba(96,  89,  89,  0.85); }
.work-item--rayoga    .work-item-overlay { background: rgba(63,  75,  48,  0.85); }
.work-item--lettering .work-item-overlay { background: rgba(205, 81,  71,  0.85); }

.work-item-overlay-title {
  display: none;
}

.work-item-overlay-sub {
  font-family:     var(--sans);
  font-weight:     400;
  font-size:       11px;
  letter-spacing:  0.22em;
  text-transform:  uppercase;
  color:           #fff;
}

.work-item-label {
  font-family: var(--sans);
  font-weight: 400;
  font-size:   11px;
  letter-spacing:        0.09em;
  text-transform:        uppercase;
  color:                 var(--color-text);
  text-decoration:       underline;
  text-underline-offset: 4px;
  margin-top:            14px;
  width:                 70%;
}

.work-item:nth-child(even) .work-item-label {
  text-align:  right;
  margin-left: auto;
}

@media (max-width: 768px) {
  .work-list {
    padding: 72px var(--pad-mobile) 100px;
  }

  .work-item {
    margin-bottom: 72px;
  }

  .work-item-img,
  .work-item-label {
    width: 100%;
  }

  .work-item:nth-child(even) .work-item-img,
  .work-item:nth-child(even) .work-item-label {
    margin-left: 0;
    text-align:  left;
  }
}


/* ── HOME — PROJECT GRID (legacy) ────────────────────────── */

.home-grid-wrapper {
  background: var(--color-bg-muted);
  padding:    48px var(--pad-desktop) 96px;
}

.project-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   24px;
  max-width:             var(--max-width);
  margin:                0 auto;
}

.project-card {
  display:         block;
  text-decoration: none;
  background:      var(--color-bg);
  transition:      transform 0.25s ease, box-shadow 0.25s ease;
}

.project-card:hover {
  transform:  scale(1.02);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.project-card-thumb {
  width:        100%;
  aspect-ratio: 4 / 3;
  overflow:     hidden;
  background:   var(--color-border);
}

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

.project-card-placeholder {
  width:           100%;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--serif);
  font-style:      normal;
  font-size:       14px;
  color:           var(--color-text-muted);
  padding:         16px;
  text-align:      center;
}

.project-card-info {
  padding: 20px 24px 28px;
}

.project-card-title {
  font-family: var(--serif);
  font-size:   20px;
  font-weight: 400;
  color:       var(--color-text);
}

.project-card-tagline {
  font-family:  var(--sans);
  font-weight:  300;
  font-size:    14px;
  color:        var(--color-text-muted);
  margin-top:   6px;
  line-height:  1.5;
}

@media (max-width: 768px) {
  .home-grid-wrapper {
    padding: 32px var(--pad-mobile) 64px;
  }

  .project-grid {
    grid-template-columns: 1fr;
    gap:                   16px;
  }
}


/* ── PROJECT PAGE ─────────────────────────────────────────── */

.project-page {
  min-height: 100vh;
}

.project-hero {
  width:    100%;
  height:   70vh;
  overflow: hidden;
}

.project-hero img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.project-hero-placeholder {
  width:           100%;
  height:          100%;
  background:      var(--color-bg-muted);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--serif);
  font-style:      normal;
  font-size:       clamp(18px, 2vw, 28px);
  color:           var(--color-text-muted);
}

.project-eyebrow {
  font-family:    var(--sans);
  font-weight:    400;
  font-size:      12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          var(--color-text-muted);
  margin-bottom:  20px;
}

.project-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size:   clamp(32px, 4.5vw, 72px);
  line-height: 1.1;
  color:       var(--color-text);
}

.project-title em {
  font-style: normal;
}

.project-intro {
  display:               grid;
  grid-template-columns: 2fr 3fr;
  gap:                   80px;
  padding:               72px var(--pad-desktop);
  align-items:           start;
}

.project-intro-left {
  display: flex;
  flex-direction: column;
}

.meta-item {
  padding:    18px 0;
  border-top: 1px solid var(--color-border);
}

.meta-item:last-child {
  border-bottom: none;
}

.meta-label {
  font-family:    var(--sans);
  font-weight:    400;
  font-size:      11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--color-text-muted);
  margin-bottom:  4px;
}

.meta-value {
  font-family: var(--sans);
  font-weight: 300;
  font-size:   15px;
  line-height: 1.5;
  color:       var(--color-text);
}

.project-summary {
  font-family: var(--serif);
  font-weight: 400;
  font-style:  normal;
  font-size:   clamp(20px, 2vw, 26px);
  line-height: 1.55;
  color:       var(--color-text);
}

.project-content {
  padding: 0;
}

.project-footer {
  padding: 72px var(--pad-desktop) 96px;
}

.project-nav-label {
  font-family:    var(--sans);
  font-weight:    400;
  font-size:      12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--color-text-muted);
  margin-bottom:  20px;
}

.project-nav-list {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px 32px;
}

.project-nav-item {
  font-family:     'Source Sans 3', var(--sans);
  font-weight:     300;
  font-size:       15px;
  letter-spacing:  0.02em;
  color:           var(--color-text-muted);
  text-decoration: none;
  transition:      color 0.2s ease;
}

.project-nav-item:hover {
  color: var(--color-text);
}

.project-nav-item.is-current {
  color:                var(--color-text);
  text-decoration:      underline;
  text-underline-offset: 4px;
  pointer-events:       none;
}

@media (max-width: 768px) {
  .project-footer {
    padding: 48px var(--pad-mobile) 64px;
  }

  .project-nav-list {
    gap: 8px 24px;
  }

  .project-nav-item {
    font-size: 13px;
  }
}

/* Work sections within project content — alternating backgrounds */
.work-section {
  padding: 96px var(--pad-desktop);
}

.work-section:nth-child(odd) {
  background: var(--color-bg);
}

.work-section:nth-child(even) {
  background: var(--color-bg-muted);
}

/* Blue override for specific sections (AIG Logos, Branding Guidelines) */
.work-section-blue,
.work-section-blue:nth-child(odd),
.work-section-blue:nth-child(even) {
  background: #001871;
}

.work-section.work-section-blue .work-section-label {
  color: rgba(255, 255, 255, 0.55);
}

.work-section.work-section-blue .work-section-title {
  color: #fff;
}

.work-section.work-section-blue p,
.work-section.work-section-blue .img-caption {
  color: rgba(255, 255, 255, 0.70);
}

.work-section-label {
  font-family:    var(--sans);
  font-weight:    400;
  font-size:      12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--color-accent);
  margin-bottom:  8px;
}

.work-section-title {
  font-family:   var(--serif);
  font-size:     clamp(24px, 2.5vw, 38px);
  font-weight:   300;
  color:         var(--color-text);
  margin-bottom: 20px;
}

.work-section p {
  font-family:   var(--sans);
  font-weight:   300;
  font-size:     18px;
  line-height:   1.8;
  color:         #444;
  max-width:     640px;
  margin-bottom: 20px;
}

/* Image grids */
.img-grid-2 {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   40px;
  margin-top:            72px;
}

.img-grid-3 {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   40px;
  margin-top:            72px;
}

.img-full {
  margin-top: 72px;
}

/* Uniform crop for lettering gallery images */
.img-full--uniform img {
  aspect-ratio: 16/9;
  height:       auto;
  width:        100%;
  object-fit:   cover;
}

.img-full img,
.img-grid-2 img,
.img-grid-3 img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* Image placeholders */
.img-placeholder {
  background:      var(--color-bg-muted);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--serif);
  font-style:      normal;
  font-size:       13px;
  color:           var(--color-text-muted);
  text-align:      center;
  padding:         16px;
}

.img-placeholder.med  { height: 320px; }
.img-placeholder.tall { height: 480px; }

.img-caption {
  font-family:   var(--sans);
  font-weight:   300;
  font-size:     12px;
  color:         var(--color-text-muted);
  margin-top:    10px;
  margin-bottom: 64px;
}

/* Mobile — project */
@media (max-width: 768px) {
  .project-hero {
    height: 50vh;
  }

  .project-intro {
    grid-template-columns: 1fr;
    gap:     40px;
    padding: 56px var(--pad-mobile) 64px;
  }

  .project-content {
    padding: 0;
  }

  .work-section {
    padding: 72px var(--pad-mobile);
  }

  .project-footer {
    padding: 56px var(--pad-mobile) 80px;
  }

  .img-grid-2,
  .img-grid-3 {
    grid-template-columns: 1fr;
  }
}


/* ── ABOUT PAGE ───────────────────────────────────────────── */

.about-page {
  min-height: 100vh;
}

/* New two-column layout */
.about-main {
  display:               grid;
  grid-template-columns: 42% 1fr;
  min-height:            calc(100svh - 62px);
}

.about-main-photo {
  position: relative;
  overflow: hidden;
}

.about-main-photo img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: top center;
  display:         block;
}

.about-main-photo .about-photo-placeholder {
  width:           100%;
  height:          100%;
  background:      var(--color-bg-muted);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--serif);
  font-style:      normal;
  color:           var(--color-text-muted);
}

.about-main-content {
  padding:         80px 72px;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  border-left:     1px solid var(--color-border);
}

.about-main-content .about-eyebrow {
  margin-bottom: 28px;
}

.about-bio-text p {
  font-family:   var(--sans);
  font-weight:   300;
  font-size:     15px;
  line-height:   1.8;
  color:         var(--color-text);
  max-width:     520px;
  margin-bottom: 20px;
}

.about-bio-text p:last-child {
  margin-bottom: 0;
}

.about-contact {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin-top:     48px;
  padding-top:    28px;
  border-top:     1px solid var(--color-border);
}

.about-contact-link {
  font-family:     var(--sans);
  font-weight:     300;
  font-size:       14px;
  color:           var(--color-text-muted);
  text-decoration: none;
  transition:      color 0.2s ease;
}

.about-contact-link:hover {
  color: var(--color-accent);
}

@media (max-width: 768px) {
  .about-main {
    grid-template-columns: 1fr;
    min-height:            auto;
  }

  .about-main-photo {
    height: 70vw;
  }

  .about-main-content {
    padding:        48px var(--pad-mobile) 64px;
    border-left:    none;
    border-top:     1px solid var(--color-border);
    justify-content: flex-start;
  }
}

/* ── ABOUT — EXPERIENCE ───────────────────────────────────── */

.about-experience {
  background: #EBEBEB;
  padding:    80px var(--pad-desktop) 96px;
}

.about-exp-eyebrow {
  font-family:    var(--sans);
  font-weight:    400;
  font-size:      11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          #888;
  margin-bottom:  48px;
}

.exp-list {
  max-width: 960px;
  margin:    0 auto;
}

.exp-item {
  display:               grid;
  grid-template-columns: 180px 1fr;
  gap:                   0 72px;
  padding:               36px 0;
  border-top:            1px solid #D0D0D0;
  align-items:           start;
}

.exp-item:last-child {
  border-bottom: 1px solid #D0D0D0;
}

.exp-company {
  font-family:  var(--serif);
  font-size:    18px;
  font-weight:  400;
  color:        #111;
  margin-bottom: 4px;
}

.exp-years {
  font-family: var(--sans);
  font-weight: 300;
  font-size:   13px;
  color:       #888;
}

.exp-role {
  font-family:    var(--sans);
  font-weight:    400;
  font-size:      15px;
  letter-spacing: 0.02em;
  color:          #111;
  margin-bottom:  12px;
}

.exp-bullets {
  list-style: none;
  padding:    0;
  margin:     0;
}

.exp-bullets li {
  font-family:   var(--sans);
  font-weight:   300;
  font-size:     15px;
  line-height:   1.8;
  color:         #333;
  padding-left:  16px;
  position:      relative;
  margin-bottom: 8px;
}

.exp-bullets li::before {
  content:  '—';
  position: absolute;
  left:     0;
  color:    #AAA;
  font-size: 11px;
  top:      2px;
}

.exp-bullets li:last-child {
  margin-bottom: 0;
}

.exp-education {
  display:     flex;
  gap:         72px;
  max-width:   960px;
  margin:      0 auto;
  padding-top: 48px;
  align-items: baseline;
}

.exp-edu-label {
  font-family:    var(--sans);
  font-weight:    400;
  font-size:      11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          #888;
  flex-shrink:    0;
  width:          180px;
}

.exp-edu-value {
  font-family: var(--sans);
  font-weight: 300;
  font-size:   15px;
  color:       #333;
}

@media (max-width: 768px) {
  .about-experience {
    padding: 64px var(--pad-mobile) 80px;
  }

  .exp-item {
    grid-template-columns: 1fr;
    gap:                   12px;
  }

  .exp-education {
    flex-direction: column;
    gap:            8px;
  }

  .exp-edu-label {
    width: auto;
  }
}


/* Legacy about styles below */
.about-intro {
  display:               grid;
  grid-template-columns: 300px 1fr;
  gap:                   80px;
  padding:               80px var(--pad-desktop);
  align-items:           start;
}

.about-intro-photo {
  overflow: hidden;
}

.about-intro-photo img {
  width:      100%;
  display:    block;
  object-fit: cover;
}

.about-intro-photo .about-photo-placeholder {
  width:       100%;
  height:      auto;
  aspect-ratio: 3 / 4;
}

.about-intro-bio p {
  font-family:   var(--sans);
  font-weight:   300;
  font-size:     16px;
  line-height:   1.75;
  color:         var(--color-text);
  max-width:     600px;
  margin-bottom: 24px;
}

.about-intro-bio p:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .about-intro {
    grid-template-columns: 1fr;
    gap:                   36px;
    padding:               48px var(--pad-mobile);
  }
}

.about-hero {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  min-height:            88vh;
}

.about-hero-photo {
  position: relative;
  overflow: hidden;
}

.about-hero-photo img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.about-photo-placeholder {
  width:           100%;
  height:          100%;
  background:      var(--color-bg-muted);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--serif);
  font-style:      normal;
  font-size:       clamp(16px, 1.5vw, 22px);
  color:           var(--color-text-muted);
}

.about-hero-text {
  display:     flex;
  align-items: flex-end;
  padding:     80px var(--pad-desktop);
  background:  var(--color-bg);
}

.about-quote {
  font-family:    var(--serif);
  font-weight:    400;
  font-style:     normal;
  font-size:      clamp(24px, 2.8vw, 44px);
  line-height:    1.3;
  letter-spacing: -0.01em;
  color:          var(--color-text);
}

.about-quote em {
  font-style: normal;
  color:      var(--color-accent);
}

.about-stats {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  border-top:            1px solid var(--color-border);
  border-bottom:         1px solid var(--color-border);
}

.about-stat {
  padding:      48px var(--pad-desktop);
  border-right: 1px solid var(--color-border);
}

.about-stat:last-child {
  border-right: none;
}

.stat-value {
  font-family:   var(--serif);
  font-weight:   400;
  font-style:    normal;
  font-size:     clamp(36px, 4.5vw, 64px);
  line-height:   1;
  color:         var(--color-text);
  margin-bottom: 10px;
}

.stat-label {
  font-family:    var(--sans);
  font-weight:    400;
  font-size:      12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:          var(--color-text-muted);
}

.about-bio {
  display:               grid;
  grid-template-columns: 240px 1fr;
  gap:                   80px;
  padding:               80px var(--pad-desktop);
}

.about-eyebrow {
  font-family:    var(--sans);
  font-weight:    400;
  font-size:      12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--color-text-muted);
  padding-top:    4px;
}

.about-bio-text p {
  font-family:   var(--sans);
  font-weight:   300;
  font-size:     16px;
  line-height:   1.75;
  color:         var(--color-text);
  max-width:     600px;
  margin-bottom: 24px;
}

.about-bio-text p:last-child {
  margin-bottom: 0;
}

/* Mobile — about */
@media (max-width: 768px) {
  .about-hero {
    grid-template-columns: 1fr;
    min-height:            auto;
  }

  .about-hero-photo {
    height: 72vw;
  }

  .about-hero-text {
    padding:     48px var(--pad-mobile);
    align-items: flex-start;
  }

  .about-stats {
    grid-template-columns: 1fr;
  }

  .about-stat {
    padding:       32px var(--pad-mobile);
    border-right:  none;
    border-bottom: 1px solid var(--color-border);
  }

  .about-stat:last-child {
    border-bottom: none;
  }

  .about-bio {
    grid-template-columns: 1fr;
    gap:                   32px;
    padding:               56px var(--pad-mobile);
  }
}


/* ── CONTACT PAGE ─────────────────────────────────────────── */

.contact-page {
  min-height:      calc(100svh - 62px);
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;
  padding:         0 var(--pad-desktop) 80px;
}

.contact-eyebrow {
  font-family:    var(--sans);
  font-weight:    400;
  font-size:      12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--color-text-muted);
  margin-bottom:  56px;
}

.contact-items {
  display:        flex;
  flex-direction: column;
}

.contact-item {
  display:     flex;
  align-items: baseline;
  gap:         40px;
  padding:     24px 0;
  border-top:  1px solid var(--color-border);
}

.contact-item:last-child {
  border-bottom: 1px solid var(--color-border);
}

.contact-label {
  font-family:    var(--sans);
  font-weight:    400;
  font-size:      12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--color-text-muted);
  width:          80px;
  flex-shrink:    0;
}

.contact-value {
  font-family:     var(--serif);
  font-weight:     400;
  font-style:      normal;
  font-size:       clamp(24px, 3.5vw, 48px);
  line-height:     1;
  color:           var(--color-text);
  text-decoration: none;
  transition:      color 0.2s ease;
}

a.contact-value:hover {
  color: var(--color-accent);
}

.contact-value.is-text {
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .contact-page {
    justify-content: flex-start;
    padding:         120px var(--pad-mobile) 64px;
  }

  .contact-item {
    flex-direction: column;
    gap:            8px;
    padding:        20px 0;
  }

  .contact-label {
    width: auto;
  }

  .contact-value {
    font-size: clamp(22px, 7vw, 36px);
  }
}


/* ── IMG LINK ─────────────────────────────────────────────── */

.img-link {
  display: block;
}

.img-link img {
  display:    block;
  transition: opacity 0.2s ease;
}

.img-link:hover img {
  opacity: 0.88;
}


/* ── BROWSER MOCKUP ───────────────────────────────────────── */


.browser-mockup {
  max-width:     none;
  margin:        72px 0 0;
  border:        1px solid #D0D0D0;
  border-radius: 8px;
  overflow:      hidden;
  box-shadow:    0 4px 32px rgba(0, 0, 0, 0.10);
}

.browser-toolbar {
  background:    #F0F0F0;
  padding:       10px 14px;
  display:       flex;
  align-items:   center;
  gap:           12px;
  border-bottom: 1px solid #D0D0D0;
  flex-shrink:   0;
}

.browser-dots {
  display: flex;
  gap:     6px;
}

.browser-dot {
  width:         12px;
  height:        12px;
  border-radius: 50%;
  flex-shrink:   0;
}

.browser-dot.red    { background: #FF5F57; }
.browser-dot.yellow { background: #FEBC2E; }
.browser-dot.green  { background: #28C840; }

.browser-url-bar {
  flex:           1;
  background:     #E2E2E2;
  border-radius:  4px;
  height:         22px;
  max-width:      400px;
  margin:         0 auto;
  display:        flex;
  align-items:    center;
  justify-content: center;
  font-family:    var(--sans);
  font-size:      10px;
  font-weight:    400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          #999;
}

.browser-url-bar::before {
  content: 'Scroll to explore';
}

.browser-screen {
  aspect-ratio:    16/9;
  overflow-y:      auto;
  position:        relative;
  cursor:          none;
  scrollbar-width: none;
}

.browser-screen::-webkit-scrollbar {
  display: none;
}

.browser-screen img {
  width:   100%;
  display: block;
}


/* ── SLIDESHOW ────────────────────────────────────────────── */

.slideshow {
  position:   relative;
  margin-top: 48px;
}

.slideshow-track {
  display:  grid;
  position: relative;
}

.slideshow-slide {
  grid-area:  1 / 1;
  width:      100%;
  display:    block;
  object-fit: cover;
  opacity:    0;
  transition: opacity 0.5s ease;
}

.slideshow-slide.active {
  opacity: 1;
}

.slideshow-prev,
.slideshow-next {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  background:      rgba(255, 255, 255, 0.88);
  border:          none;
  width:           40px;
  height:          40px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  font-size:       16px;
  color:           var(--color-text);
  transition:      background 0.2s ease;
  z-index:         2;
}

.slideshow-prev { left: 12px; }
.slideshow-next { right: 12px; }

.slideshow-prev:hover,
.slideshow-next:hover {
  background: #fff;
}

.slideshow-dots {
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             8px;
  padding:         18px 0 8px;
}

.slideshow-dot {
  width:      7px;
  height:     7px;
  background: #AAAAAA;
  border:     none;
  padding:    0;
  cursor:     pointer;
  transition: background 0.2s ease;
  border-radius: 0;
}

.slideshow-dot.active {
  background: #444;
}


@media (prefers-reduced-motion: reduce) {
  .slideshow-slide {
    transition: none;
  }
}


/* ── VIDEO WRAP ───────────────────────────────────────────── */

.video-wrap {
  position:    relative;
  background:  var(--color-bg-muted);
  aspect-ratio: 16 / 9;
  overflow:    hidden;
}

.video-wrap video {
  width:      100%;
  height:     100%;
  display:    block;
  object-fit: cover;
}


/* ── VIDEO IN IMAGE GRIDS ─────────────────────────────────── */

.img-grid-2 video,
.img-grid-3 video,
.img-full video {
  width:      100%;
  display:    block;
  background: #000;
}


/* ── ABOUT — SPOTIFY ──────────────────────────────────────── */

.about-spotify {
  padding:    72px var(--pad-desktop);
  border-top: 1px solid var(--color-border);
}

.about-spotify .about-eyebrow {
  margin-bottom: 28px;
}

.spotify-embed iframe {
  display:       block;
  max-width:     400px;
  border-radius: 12px;
}

@media (max-width: 768px) {
  .about-spotify {
    padding: 56px var(--pad-mobile);
  }

  .spotify-embed iframe {
    width: 100%;
  }
}


/* ── PASSWORD OVERLAY ─────────────────────────────────────── */

.pw-overlay {
  position:        fixed;
  inset:           0;
  background:      var(--color-bg);
  z-index:         999;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.pw-box {
  width:      100%;
  max-width:  420px;
  padding:    0 var(--pad-mobile);
  text-align: center;
}

.pw-heading {
  font-family:   var(--serif);
  font-weight:   400;
  font-size:     clamp(22px, 3vw, 32px);
  color:         var(--color-text);
  margin-bottom: 10px;
}

.pw-label {
  font-family:   var(--sans);
  font-weight:   300;
  font-size:     14px;
  color:         var(--color-text-muted);
  margin-bottom: 36px;
}

.pw-field {
  display:       flex;
  margin-bottom: 14px;
}

.pw-input {
  flex:        1;
  padding:     12px 16px;
  font-family: var(--sans);
  font-size:   14px;
  border:      1px solid var(--color-border);
  border-right: none;
  outline:     none;
  background:  var(--color-bg);
  color:       var(--color-text);
}

.pw-input:focus {
  border-color: var(--color-text-muted);
}

.pw-submit {
  padding:     12px 24px;
  background:  var(--color-accent);
  color:       #fff;
  border:      none;
  font-family: var(--sans);
  font-size:   14px;
  cursor:      pointer;
  transition:  background 0.2s ease;
}

.pw-submit:hover {
  background: var(--color-accent-h);
}

.pw-error {
  font-family: var(--sans);
  font-size:   12px;
  color:       var(--color-accent);
  min-height:  18px;
}

@keyframes pw-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.pw-shake {
  animation: pw-shake 0.4s ease;
}


/* ── FADE-UP ──────────────────────────────────────────────── */

.fade-up {
  opacity:    0;
  transform:  translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-up.visible {
  opacity:   1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity:    1;
    transform:  translateY(0);
    transition: none;
  }
}


/* ── IMG BORDERED ─────────────────────────────────────────── */

.img-bordered {
  box-shadow: 0 0 0 1px #CCC;
}


/* ── CUSTOM CURSOR ────────────────────────────────────────── */

.cursor {
  position:        fixed;
  top:             0;
  left:            0;
  width:           36px;
  height:          36px;
  border:          1.5px solid #fff;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       14px;
  line-height:     1;
  color:           #fff;
  mix-blend-mode:  difference;
  pointer-events:  none;
  z-index:         9999;
  transform:       translate(-50%, -50%);
  transition:      opacity 0.15s ease;
  opacity:         0;
}

.cursor.visible {
  opacity: 1;
}

/* Nav bar: red circle, no arrow */
.cursor--nav {
  border-color:   #cd5147;
  color:          transparent;
  mix-blend-mode: normal;
}

/* Slideshows: black circle, no arrow */
.cursor--slideshow {
  border-color:   #1a1a1a;
  color:          transparent;
  mix-blend-mode: normal;
}

/* Back-to-top: dark circle, no arrow */
.cursor--back-to-top {
  border-color:   #1a1a1a;
  color:          transparent;
  mix-blend-mode: normal;
}

/* Browser screen: dark circle, ↕, larger */
.cursor--browser {
  border-color:   #1a1a1a;
  color:          #1a1a1a;
  mix-blend-mode: normal;
  font-size:      22px;
}

@media (hover: none) {
  .cursor { display: none; }
  body    { cursor: auto; }
}


/* ── BACK TO TOP ──────────────────────────────────────────── */

.back-to-top {
  position:       fixed;
  bottom:         32px;
  right:          36px;
  z-index:        200;
  background:     none;
  border:         none;
  font-family:    var(--sans);
  font-size:      18px;
  color:          var(--color-text-muted);
  padding:        8px;
  opacity:        0;
  transition:     opacity 0.3s ease, color 0.2s ease;
  pointer-events: none;
  line-height:    1;
}

.back-to-top.visible {
  opacity:        1;
  pointer-events: auto;
}

.back-to-top:hover {
  color: var(--color-text);
}


/* ── PROJECT IMAGE INSET ──────────────────────────────────── */
/* Extra horizontal inset on images vs section text. Adjust    */
/* the single value below to explore.                          */

.work-section .img-grid-2,
.work-section .img-grid-3,
.work-section .img-full:not(.img-flush),
.work-section .slideshow,
.work-section .browser-mockup {
  margin-left:  100px;
  margin-right: 100px;
}

.work-section .img-caption {
  margin-left: 100px;
}

@media (max-width: 768px) {
  .work-section .img-grid-2,
  .work-section .img-grid-3,
  .work-section .img-full:not(.img-flush),
  .work-section .slideshow,
  .work-section .browser-mockup {
    margin-left:  0;
    margin-right: 0;
  }

  .work-section .img-caption {
    margin-left: 0;
  }
}


/* ── IMG FLUSH ────────────────────────────────────────────── */
/* Breaks out of work-section padding — image runs edge to edge */

.img-flush {
  margin-left:  calc(-1 * var(--pad-desktop));
  margin-right: calc(-1 * var(--pad-desktop));
}

@media (max-width: 768px) {
  .img-flush {
    margin-left:  calc(-1 * var(--pad-mobile));
    margin-right: calc(-1 * var(--pad-mobile));
  }
}


/* ── VISUALLY HIDDEN (screen-reader only) ─────────────────── */

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


/* ── SKIP TO MAIN ─────────────────────────────────────────── */

.skip-to-main {
  position:        absolute;
  top:             -100%;
  left:            0;
  z-index:         10000;
  padding:         12px 24px;
  background:      var(--color-text);
  color:           var(--color-bg);
  font-family:     var(--sans);
  font-size:       14px;
  font-weight:     400;
  text-decoration: none;
  transition:      top 0.15s ease;
}

.skip-to-main:focus {
  top: 0;
}


/* ── FOCUS STYLES ─────────────────────────────────────────── */

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

/* Remove default focus ring where custom styles or cursor:none exist */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}


/* ── BROWSER MOCKUP MOBILE CONSTRAINT ─────────────────────── */

@media (max-width: 768px) {
  .browser-mockup {
    overflow: hidden;
  }

  .browser-screen {
    aspect-ratio: 16/9;
  }
}


/* ── FOOTER ──────────────────────────────────────────────── */

.site-footer {
  display:         flex;
  align-items:     center;
  gap:             16px;
  padding:         32px var(--pad-desktop);
  border-top:      1px solid var(--color-border, #e0e0e0);
  font-family:     var(--sans);
  font-size:       12px;
  font-weight:     400;
  letter-spacing:  0.05em;
  text-transform:  uppercase;
  color:           var(--color-text-muted, #888);
}

.site-footer-copy {
  margin-left: auto;
}

.site-footer-link {
  color:           inherit;
  text-decoration: none;
}

.site-footer-link:hover {
  color: var(--color-text);
}

@media (max-width: 768px) {
  .site-footer {
    padding:   24px var(--pad-mobile);
    flex-wrap: wrap;
    gap:       10px;
  }
}