/* ============================================================
   CHRISTIAN MARK A. CAGA-ANAN — Portfolio
   "Editorial Ink" — Swiss editorial, asymmetric, monochrome + pop
   ============================================================ */

:root {
  --paper: #F4F2EC;
  --paper-2: #EAE7DE;
  --ink: #14110D;
  --ink-soft: #6B655B;
  --line: rgba(20, 17, 13, .14);
  --line-strong: rgba(20, 17, 13, .30);
  --pop: #FF5436;
  --pop-ink: #14110D;
  --maxw: 1440px;
  --pad: clamp(20px, 5vw, 80px);
  --ff-display: "Bricolage Grotesque", sans-serif;
  --ff-body: "Archivo", sans-serif;
  --ff-mono: "Space Mono", monospace;
  --reveal-y: 34px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--pop); color: var(--pop-ink); }

/* Screen-reader / skip link */
.screen-reader-text {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}
.skip-link:focus {
  clip: auto;
  clip-path: none;
  height: auto;
  width: auto;
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 100000;
  padding: .75rem 1rem;
  background: var(--pop);
  color: var(--ink);
  font-family: var(--ff-mono);
  font-size: 13px;
}

/* ---- shared layout helpers ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2vw, 28px); }
.mono { font-family: var(--ff-mono); font-weight: 400; letter-spacing: .04em; }
.kicker {
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 14px;
}
.kicker::before { content: ""; width: 34px; height: 1px; background: var(--ink-soft); display: inline-block; }
.kicker--plain::before { display: none; }

.section { padding: clamp(64px, 9vw, 150px) 0; position: relative; }
.sec-no { font-family: var(--ff-mono); font-size: 13px; letter-spacing: .1em; color: var(--ink-soft); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--pad);
  mix-blend-mode: difference;
  color: #fff;
}
.nav a, .nav .brand { color: #fff; }
.nav .brand {
  font-family: var(--ff-mono);
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pop);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 84, 54, .6); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 84, 54, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 84, 54, 0); }
}
.nav-links {
  display: flex;
  gap: clamp(14px, 2.4vw, 40px);
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nav-links a { position: relative; padding: 4px 0; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  height: 1px; width: 0;
  background: #fff;
  transition: width .35s ease;
}
.nav-links a:hover::after { width: 100%; }
@media (max-width: 680px) { .nav-links a:not(.nav-cta) { display: none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(40px, 7vh, 90px);
  overflow: hidden;
}
.hero-grid { position: relative; z-index: 3; width: 100%; }
.hero-eyebrow { grid-column: 1 / 7; align-self: start; padding-top: clamp(92px, 12vh, 140px); }
.hero-eyebrow .loc { margin-top: 10px; color: var(--ink-soft); font-size: 13px; }
.hero-title { grid-column: 1 / 13; position: relative; margin-top: clamp(20px, 4vh, 60px); }
.hero-title h1 {
  font-family: var(--ff-display);
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.02em;
  font-size: clamp(44px, 10.2vw, 150px);
  text-transform: uppercase;
}
.hero-title .l2 { margin-left: clamp(30px, 9vw, 190px); }
.hero-title .amp { font-style: normal; color: var(--pop); }
.hero-sub {
  grid-column: 1 / 6;
  margin-top: clamp(24px, 4vh, 46px);
  font-size: clamp(16px, 1.5vw, 21px);
  max-width: 30ch;
  color: var(--ink-soft);
}
.hero-sub strong { color: var(--ink); font-weight: 600; }

.hero-photo {
  position: absolute;
  z-index: 2;
  right: clamp(-30px, -2vw, 0px);
  bottom: 0;
  width: clamp(300px, 42vw, 640px);
  pointer-events: none;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .25));
  will-change: transform;
}
.hero-photo img { width: 100%; height: auto; }

.hero-ghost {
  position: absolute;
  z-index: 1;
  left: 0; bottom: 8%;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(120px, 30vw, 520px);
  line-height: 1;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  text-transform: uppercase;
}
.scroll-cue {
  position: absolute;
  left: var(--pad); bottom: 24px;
  z-index: 4;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 10px;
}
.scroll-cue .bar {
  width: 1px; height: 34px;
  background: var(--ink-soft);
  position: relative;
  overflow: hidden;
}
.scroll-cue .bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(-100%);
  animation: drop 1.8s infinite;
}
@keyframes drop {
  0%   { transform: translateY(-100%); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

@media (max-width: 820px) {
  /* Remove GPU hint — reduces memory pressure and scroll jank on mobile */
  .hero-photo { width: 66vw; right: -8vw; opacity: .78; will-change: auto; }
  .hero-sub { grid-column: 1/13; }
}
@media (max-width: 560px) {
  /* Anchor content to the top so the viewport isn't eaten by empty space */
  .hero { align-items: flex-start; padding-top: clamp(72px, 16vw, 100px); }
  .hero-photo { width: 88vw; right: -14vw; opacity: .32; z-index: 1; }
  .hero-grid { z-index: 3; }
  .hero-title h1 { font-size: clamp(40px, 13vw, 150px); }
  /* padding-top is now on .hero, not the eyebrow */
  .hero-eyebrow { grid-column: 1/13; padding-top: 0; }
  .hero-eyebrow .loc { font-size: 12px; }
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}
.marquee-track {
  display: flex;
  white-space: nowrap;
  will-change: transform;
  animation: marq 32s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--ff-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(22px, 3.4vw, 46px);
  padding: 18px 0;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
}
.marquee-track span i { font-style: normal; color: var(--pop); margin: 0 clamp(20px, 3vw, 44px); font-size: .6em; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ============================================================
   ABOUT
   ============================================================ */
.about-photo { grid-column: 1 / 6; position: relative; }
.about-photo .frame { position: relative; background: var(--paper-2); overflow: hidden; }
.about-photo img { width: 100%; height: auto; mix-blend-mode: multiply; }
.about-photo .tag {
  position: absolute; left: 0; bottom: 0;
  background: var(--pop); color: #14110D;
  font-family: var(--ff-mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 14px;
}
.about-body { grid-column: 7 / 13; }
.about-body h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.02em;
  font-size: clamp(30px, 4.6vw, 70px);
  margin: 22px 0 28px;
  text-wrap: balance;
}
.about-body h2 em { font-style: normal; color: var(--pop); }
.about-body p { font-size: clamp(16px, 1.35vw, 20px); max-width: 52ch; color: var(--ink-soft); margin-bottom: 18px; }
.about-body p strong { color: var(--ink); font-weight: 600; }
.about-stats { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 64px); margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line); }
.stat .n { font-family: var(--ff-display); font-weight: 800; font-size: clamp(36px, 4.5vw, 62px); line-height: 1; }
.stat .l { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-top: 6px; }
@media (max-width: 820px) {
  .about-photo, .about-body { grid-column: 1/13; }
  .about-photo { margin-bottom: 30px; max-width: 420px; }
}

/* ============================================================
   SKILLS
   ============================================================ */
.skills-head {
  grid-column: 1/13;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: clamp(30px, 5vw, 64px);
}
.skills-head h2 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(34px, 6vw, 90px); line-height: .9; letter-spacing: -.02em; text-transform: uppercase; }
.skill-row {
  grid-column: 1/13;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(20px, 2.6vw, 34px) 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
  transition: padding-left .4s ease;
}
.skill-row:last-child { border-bottom: 1px solid var(--line); }
.skill-row:hover { padding-left: clamp(8px, 1.4vw, 22px); }
.skill-row .sn { font-family: var(--ff-mono); font-size: 13px; color: var(--ink-soft); }
.skill-row .body { display: grid; grid-template-columns: minmax(220px, 1fr) 1.4fr; gap: clamp(14px, 2vw, 40px); align-items: baseline; }
.skill-row h3 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(22px, 2.6vw, 40px); line-height: 1; letter-spacing: -.01em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--ff-mono);
  font-size: 12.5px;
  letter-spacing: .02em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 13px;
  color: var(--ink-soft);
  transition: .3s;
}
.skill-row:hover .chip { border-color: var(--ink); color: var(--ink); }
@media (max-width: 720px) { .skill-row .body { grid-template-columns: 1fr; gap: 14px; } }

/* ============================================================
   WORK
   ============================================================ */
.work-head {
  grid-column: 1/13;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: clamp(20px, 3vw, 40px);
}
.work-head h2 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(34px, 6vw, 90px); line-height: .9; letter-spacing: -.02em; text-transform: uppercase; }
.work-list { grid-column: 1/13; border-top: 1px solid var(--ink); }
.proj {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: clamp(14px, 3vw, 40px);
  align-items: center;
  padding: clamp(22px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: padding .45s cubic-bezier(.22, 1, .36, .18);
}
.proj:nth-child(even) { margin-left: clamp(0px, 8vw, 150px); }
.proj:hover { padding-left: clamp(10px, 2vw, 30px); padding-right: clamp(10px, 2vw, 30px); }
.proj .pn { font-family: var(--ff-mono); font-size: 13px; color: var(--ink-soft); }
.proj .main { min-width: 0; }
.proj .domain {
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: .95;
  font-size: clamp(22px, 4.6vw, 60px);
  text-transform: uppercase;
  overflow-wrap: anywhere;
  transition: transform .45s cubic-bezier(.22, 1, .36, .18), color .3s;
  display: inline-block;
}
.proj:hover .domain { transform: translateX(clamp(6px, 1.2vw, 18px)); }
.proj .cat {
  font-family: var(--ff-mono);
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 10px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.proj .cat .build { color: var(--ink); }
.proj .go {
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: var(--ink-soft);
  transition: .3s;
}
.proj .go .arr { display: inline-block; transition: transform .4s; }
.proj:hover .go { color: var(--ink); }
.proj:hover .go .arr { transform: translate(4px, -4px); }

/* ---------- Project hover thumbnails ---------- */
.proj-thumb {
  position: absolute;
  z-index: 30;
  top: 50%;
  right: clamp(0px, 3vw, 40px);
  width: clamp(220px, 22vw, 310px);
  height: clamp(150px, 15vw, 200px);
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .40);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(40px) scale(.84) rotate(4deg);
  transition: opacity .35s ease, transform .5s cubic-bezier(.22, 1, .36, .18);
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  background-color: var(--paper-2);
}
.proj:nth-child(even) .proj-thumb {
  right: auto;
  left: clamp(0px, 3vw, 40px);
  transform: translateY(-50%) translateX(-40px) scale(.84) rotate(-4deg);
}
.proj:hover .proj-thumb {
  opacity: 1;
  transform: translateY(-50%) translateX(0) scale(1) rotate(-2.5deg);
  animation: thumb-scroll 8s ease-in-out 3s infinite alternate both;
}
.proj:nth-child(even):hover .proj-thumb {
  transform: translateY(-50%) translateX(0) scale(1) rotate(2.5deg);
}
@keyframes thumb-scroll {
  from { background-position: top center; }
  to   { background-position: bottom center; }
}
@media (max-width: 980px) { .proj:nth-child(even) { margin-left: 0; } .proj-thumb { display: none; } }
@media (max-width: 820px) {
  .proj { grid-template-columns: 34px 1fr; gap: 14px; }
  .proj .go { grid-column: 2; justify-self: start; margin-top: 4px; }
}

/* ============================================================
   EXPERIENCE
   ============================================================ */
.exp-head { grid-column: 1/5; }
.exp-head h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 72px);
  line-height: .9;
  letter-spacing: -.02em;
  text-transform: uppercase;
  position: sticky;
  top: 120px;
}
.exp-list { grid-column: 5/13; }
.job {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(26px, 3vw, 46px) 0;
  border-top: 1px solid var(--line);
}
.job:first-child { border-top: 0; padding-top: 0; }
.job .yr { font-family: var(--ff-mono); font-size: 13px; color: var(--ink-soft); white-space: nowrap; padding-top: 8px; }
.job h3 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(24px, 3vw, 42px); line-height: 1.02; letter-spacing: -.01em; }
.job .co {
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pop-ink);
  background: var(--pop);
  display: inline-block;
  padding: 4px 10px;
  margin: 12px 0 16px;
}
.job ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.job li { position: relative; padding-left: 22px; color: var(--ink-soft); font-size: clamp(15px, 1.2vw, 18px); max-width: 56ch; }
.job li::before { content: "—"; position: absolute; left: 0; color: var(--ink); }
@media (max-width: 820px) {
  .exp-head, .exp-list { grid-column: 1/13; }
  .exp-head h2 { position: static; margin-bottom: 30px; }
  .job { grid-template-columns: 1fr; }
  .job .yr { padding-top: 0; }
}

/* ============================================================
   EDUCATION
   ============================================================ */
.edu { display: grid; grid-template-columns: 1fr; gap: 0; }
.edu-row {
  grid-column: 1/13;
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: clamp(16px, 3vw, 40px);
  align-items: baseline;
  padding: clamp(24px, 3vw, 40px) 0;
  border-top: 1px solid var(--ink);
}
.edu-row h3 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(26px, 3.4vw, 52px); line-height: 1; letter-spacing: -.01em; }
.edu-row .school { font-family: var(--ff-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-top: 12px; }
.edu-row .yr { font-family: var(--ff-mono); font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
@media (max-width: 720px) { .edu-row { grid-template-columns: 34px 1fr; } .edu-row .yr { grid-column: 2; } }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { background: var(--ink); color: var(--paper); padding: clamp(70px, 11vw, 170px) 0; }
.contact .kicker { color: rgba(244, 242, 236, .6); }
.contact .kicker::before { background: rgba(244, 242, 236, .6); }
.contact h2 {
  font-family: var(--ff-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(46px, 12vw, 190px);
  line-height: .86;
  letter-spacing: -.03em;
  margin: 26px 0 0;
}
.contact h2 .out { color: transparent; -webkit-text-stroke: 1.5px var(--paper); }
.contact .mail {
  display: inline-block;
  margin-top: clamp(24px, 4vw, 54px);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(22px, 4vw, 58px);
  letter-spacing: -.02em;
  position: relative;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.contact .mail::after {
  content: "";
  position: absolute;
  left: 0; bottom: 2px;
  height: 2px; width: 100%;
  background: var(--pop);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.22, 1, .36, .18);
}
.contact .mail:hover::after { transform: scaleX(1); }
.contact-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  margin-top: clamp(50px, 8vw, 100px);
  padding-top: 34px;
  border-top: 1px solid rgba(244, 242, 236, .2);
}
.cinfo { grid-column: span 3; }
.cinfo .l { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 242, 236, .5); margin-bottom: 10px; }
.cinfo a, .cinfo span { font-size: clamp(15px, 1.2vw, 18px); display: block; line-height: 1.5; }
.cinfo a:hover { color: var(--pop); }
@media (max-width: 720px) { .cinfo { grid-column: span 6; } }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { background: var(--ink); color: var(--paper); padding: 0 0 40px; }
.foot .big {
  font-family: var(--ff-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(40px, 16vw, 290px);
  line-height: .8;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 242, 236, .28);
  text-align: center;
  padding: 10px 0;
  white-space: nowrap;
}
.foot-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(244, 242, 236, .55);
  padding-top: 24px;
  border-top: 1px solid rgba(244, 242, 236, .18);
}
.foot-meta a:hover { color: var(--pop); }
@media (max-width: 560px) {
  .foot-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
  .foot-meta a { align-self: flex-end; }
}

/* ============================================================
   REVEAL / MOTION
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .reveal { transition: none; opacity: 1; transform: none; }
  .scroll-cue .bar::after { animation: none; }
}