/* kylieverzosa.com — production styles from design handoff (high-fidelity) */

:root {
  --ink: #242424;
  --cream: hsl(35.45, 29.73%, 85.49%); /* ≈ #E4DACB */
  --projects-bg: #E9E2D5;
  --press-bg: #E5DCCF;
  --tan: #D2BB99;
  --white: #FFFFFF;
  --hairline: rgba(36, 36, 36, .3);
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
a:hover { opacity: .55; }
::selection { background: var(--tan); color: var(--ink); }
img { display: block; }
[hidden] { display: none !important; }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

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

/* ---------- scroll progress ---------- */

.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
}

.progress__bar {
  height: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
}

/* ---------- nav ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 2.5vw;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background .4s ease, border-color .4s ease;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
}

.nav.is-on {
  background: rgba(229, 220, 207, .88); /* --cream at 88% */
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(36, 36, 36, .12);
}

.nav__home {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.nav__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink);
  flex: none;
}

.nav__contact { white-space: nowrap; }

/* ---------- hero — the title pins; the card and the projects section scroll up over it ---------- */

.hero {
  position: relative;
  height: 150vh;
  background: var(--cream);
}

.hero__name {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(64px, 8vh, 100px);
  text-align: center;
  pointer-events: none;
}

.hero__title {
  margin: 0;
  width: 100%;
  font-family: 'Anton', 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(52px, 14.5vw, 330px);
  line-height: .92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.hero__mask {
  display: block;
  overflow: hidden;
  padding: .03em 0;
}

.hero__line { display: block; }

.tile {
  position: absolute;
  top: 20vh;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.tile__box {
  position: relative;
  width: var(--w);
  height: var(--h);
  border-radius: 16px;
  overflow: hidden;
  pointer-events: auto;
}

/* floor keeps the card dominant on phones (~77vw at 390px), like the reference */
.tile--1 .tile__box { min-width: 300px; }

.tile__box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* keep the veiled face in the upper third of the crop */
.tile--1 .tile__box img { object-position: 50% 30%; }

/* fixed-size portrait card, centered in the start frame (spans 20–80vh) */
.tile--1 { --w: 34vw; --h: 60vh; }

/* ---------- display headings ---------- */

.display {
  font-family: 'Anton', 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(56px, 11vw, 195px);
  line-height: .9;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

/* ---------- projects ---------- */

.projects {
  background: var(--cream);
  padding: 10vh 5vw 8vh;
}

.projects .display { margin: 1vh 0 6vh; }

.projects__index {
  position: relative;
  border-top: 1px solid var(--hairline);
}

/* hover preview: rounded image floats over the right side of the list */
.projects__img {
  position: absolute;
  right: 0;
  top: 50%;
  width: clamp(180px, 20vw, 300px);
  height: auto; /* beat the height attribute so aspect-ratio applies */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 20px;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 2;
}

.projects__row:hover .projects__img { opacity: 1; }

.projects__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  padding: clamp(20px, 2.6vh, 34px) 4px;
  border-bottom: 1px solid var(--hairline);
}

/* hovered row above its siblings so its preview image tops every line and label */
.projects__row:hover { z-index: 5; }

.projects__row span {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(28px, 4.6vw, 78px);
  line-height: 1;
}

/* small type label, right-aligned; matches the bio text below */
.projects__row .projects__type {
  margin-left: auto;
  font-size: 14.5px;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.65;
  color: rgba(36, 36, 36, .85);
}

/* ---------- press ---------- */

.press {
  /* rides up under the hero card, covering the pinned title as it passes;
     same cream as the hero so the seam is invisible and the letters just get
     swallowed. The swallow line sits 4vh above the card's bottom edge (76vh vs
     80vh) so the card's rounded bottom sticks out past it, and the tall top
     padding keeps the heading below the fold on the start frame (76 + 26 ≈ 102vh). */
  position: relative;
  z-index: 3;
  margin-top: -74vh;
  background: var(--cream);
  padding: 26vh 5vw 8vh;
}

.press .display { margin: 1vh 0 4vh; }

.press__arrows-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  margin: 0 0 2.5vh;
}

.press__arrows { display: flex; gap: 12px; }

.press__arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(36, 36, 36, .4);
  background: transparent;
  color: var(--ink);
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
  transition: background .25s ease, color .25s ease;
}

.press__arrow:hover {
  background: var(--ink);
  color: var(--press-bg);
}

.press__strip {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 6px;
}

.press__strip::-webkit-scrollbar { display: none; }

.press__card {
  margin: 0;
  flex: none;
  width: clamp(230px, 23vw, 330px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.press__cover {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
}

.press__cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.press__cover--high img { object-position: 50% 22%; }

/* ---------- contact ---------- */

.contact {
  padding: 9vh 5vw 8vh;
  display: flex;
  flex-direction: column;
  gap: 7vh;
}

.contact__bio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(36, 36, 36, .85);
}

.contact__col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.contact__col p {
  margin: 0;
  text-wrap: pretty;
}

.contact__dot {
  align-self: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
}

/* ---------- footer ---------- */

.footer {
  background: var(--cream);
  padding: 30px 5vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(36, 36, 36, .75);
}

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  /* full-bleed headline: "Kylie Verzosa" in Anton measures ~79.6% of its font-size
     per 14.5vw, so 18.2vw spans ~99.3vw edge to edge */
  .hero__title { font-size: 18.2vw; }
}

@media (max-width: 560px) {
  .nav__mid { display: none; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { height: 100vh; }
  .press { margin-top: 0; padding-top: 9vh; }
  .progress { display: none; }
  .nav {
    background: rgba(229, 220, 207, .9); /* --cream at 90% */
    border-bottom-color: rgba(36, 36, 36, .12);
  }
}