/* ============================================================
   style.css — Chezter Vargas Personal Site (Editorial Brutalism)

   Sections:
     1.  Reset & variables
     2.  Base
     3.  Nav
     4.  Hero
     5.  Section shared styles
     6.  About
     7.  Timeline (education + experience)
     8.  Portfolio grid
     9.  Blog section & cards
     10. Tag filter bubbles
     11. Contact section
     12. Social links
     13. Scroll reveal
     14. Footer
     15. Responsive

   ============================================================ */

/* ─── 1. RESET & VARIABLES ────────────────────────────────────────────── */

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

:root {
  --bg: #e8e4dc;
  --paper: #dedad2;
  --warm: #d0ccc4;
  --rule: #c8200a;
  --rule2: #e02010;

  --ink: #141210;
  --ink2: #3a3830;
  --faint: #8a8680;

  --accent: #d41a08;
  --accent_d: #aa1406;

  --personal: #d41a08;
  --gaming: #2a4ab0;
  --career: #286028;
  --fitness: #c06000;
  --letter_bg: #ccc8c0;

  --personal_l: rgba(212, 26, 8, 0.1);
  --gaming_l: rgba(42, 74, 176, 0.1);
  --career_l: rgba(40, 96, 40, 0.1);
  --fitness_l: rgba(192, 96, 0, 0.1);
  --letter_l: rgba(40, 40, 160, 0.08);

  --biomed: #d41a08;
  --ai: #6030b8;
  --web: #0a7080;
}

/* ─── 2. BASE ─────────────────────────────────────────────────────────── */

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
}

img {
  display: block;
  max-width: 100%;
}

/* ─── 3. NAV ──────────────────────────────────────────────────────────── */

.top_nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem clamp(1.25rem, 4vw, 3.5rem);
  background: transparent;
  pointer-events: none;
  border-bottom: 1px solid transparent;
  transition:
    border-color 0.3s,
    background 0.3s;
}
.top_nav.scrolled {
  background: rgba(14, 14, 14, 0.95);
  border-color: var(--rule);
  backdrop-filter: blur(12px);
}

.top_nav > * {
  pointer-events: all;
}

/* Logo: big bold "CV." with accent dot */
.nav_logo {
  font-family: "Bebas Neue", sans-serif;
  font-size: 28px;
  letter-spacing: 0.05em;
  color: #d8d4cc;
  text-decoration: none;
  line-height: 1;
}
.nav_logo em {
  color: var(--accent);
  font-style: normal;
}

/* Nav pill */
.nav_links {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--rule2);
  background: rgba(14, 14, 14, 0.9);
  backdrop-filter: blur(16px);
}

.nav_link {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #888880;
  text-decoration: none;
  padding: 0.45rem 0.9rem;
  border-right: 1px solid var(--rule);
  transition:
    color 0.15s,
    background 0.15s;
}
.nav_link:last-child {
  border-right: none;
}
.nav_link:hover {
  color: #d8d4cc;
  background: rgba(255, 255, 255, 0.08);
}
.nav_link.active {
  background: var(--accent);
  color: #fff;
}

.nav_cta {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #111110;
  text-decoration: none;
  padding: 0.5rem 1.1rem;
  background: #d8d4cc;
  border-color: #d8d4cc;
  border: 1px solid var(--ink);
  transition:
    background 0.15s,
    color 0.15s;
}
.nav_cta:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ─── 4. HERO ─────────────────────────────────────────────────────────── */

.hero_section {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  position: relative;
}

/* Background layers */
.hero_bg_photo {
  position: absolute;
  inset: 0;
  background-image: url("assets/hero_bg.jpg");
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
  z-index: 0;
}
.hero_bg_overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1;
}

/* All direct hero children above the overlays */
.hero_ticker_wrap,
.hero_stage,
.hero_footer {
  position: relative;
  z-index: 2;
}

/* Ticker strip */
.hero_ticker_wrap {
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  white-space: nowrap;
  padding-top: 72px;
  background: transparent;
}
.hero_ticker {
  display: inline-flex;
  gap: 2.5rem;
  animation: ticker_scroll 22s linear infinite;
  padding: 0.6rem 0;
}
.hero_ticker span {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(0.9rem, 1.5vw, 1.15rem);
  letter-spacing: 0.14em;
  color: #888880;
}
.ticker_dot {
  color: var(--accent) !important;
  font-size: 0.7rem !important;
}
@keyframes ticker_scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Main stage: flex column — intro top, name fills bottom */
.hero_stage {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-left: 52px; /* clears vertical strip */
  overflow: hidden;
}

/* Intro block sitting above the name */
.hero_intro_block {
  padding: 0.1rem clamp(1rem, 3vw, 2.5rem) 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 520px;
  z-index: 5;
}
.hero_intro {
  font-size: 0.88rem;
  line-height: 1.85;
  color: #888880;
}
.hero_right_label {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}
.hero_right_label em {
  font-style: normal;
}

/* Two-line name — each line spans the full available width */
.hero_name {
  display: flex;
  flex-direction: column;
  line-height: 0.85;
  width: 100%;
  padding-top: 10rem;
}
.hero_name_line {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: -0.01em;
  color: var(--accent);
  white-space: nowrap;
  display: block;
  line-height: 0.85;
  /* default size — overridden per-line below */
  font-size: 22vw;
}
/* CHEZTER: 7 chars — slightly smaller */
.hero_name_line:first-child {
  font-size: 20.8vw;
}
/* VARGAS: 6 chars — slightly larger to match width */
.hero_name_line:last-child {
  font-size: 24.2vw;
}
/* Outline alternating lines */
.outline_line {
  color: transparent;
  -webkit-text-stroke: 3px #d8d4cc; /* was var(--ink) */
}

/* Cutout person — absolutely positioned centre-right, overlaps the name */
.hero_cutout {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  z-index: 4; /* sits in front of name */
  pointer-events: none;
}
.hero_cutout img {
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: right bottom;
  display: block;
  filter: grayscale(30%) contrast(1.05);
}

/* Slim bottom bar */
.hero_footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem clamp(1.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--rule);
  background: rgba(0, 0, 0, 0.4);
}
.hero_eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #606060;
  /* allow wrapping on small screens instead of overflowing */
  flex: 1;
  min-width: 0;
}
.hero_coord {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #606060;
  white-space: nowrap;
}
.scroll_hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #606060;
}
.scroll_arrow {
  animation: bounce_y 1.6s ease-in-out infinite;
}
@keyframes bounce_y {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

/* ─── 5. SECTION SHARED STYLES ────────────────────────────────────────── */

.section_block {
  padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--rule);
  position: relative;
}

/* Vertical section label — pinned to the left edge */
.section_vert_label {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--rule);
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--faint);
  writing-mode: vertical-rl;
  white-space: nowrap;
  text-transform: uppercase;
  overflow: hidden;
  /* hidden on mobile — decorative only, causes overlap at narrow widths */
  pointer-events: none;
}
/* Red-fill variant pinned to the right */
.section_vert_label.red {
  left: auto;
  right: 0;
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
/* Full-bleed red marquee banner — drop between any two sections */
.red_banner {
  background: var(--accent);
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--accent_d);
  border-bottom: 1px solid var(--accent_d);
  padding: 0.6rem 0;
}
.red_banner_track {
  display: inline-flex;
  gap: 3rem;
  animation: ticker_scroll 18s linear infinite;
}
.red_banner_track span {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}
.red_banner_track .banner_sep {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
}

.section_dark {
  background: var(--paper);
}

/* Section heading — massive, bold, uppercase, all-caps editorial */
.section_heading {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(4rem, 10vw, 9rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 3rem;
  color: var(--ink);
}
.section_heading em {
  font-style: normal;
  color: var(--accent);
}

/* Chip tags used across sections */
.chip {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--rule2);
  color: var(--ink2);
  letter-spacing: 0.04em;
  background: transparent;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.chip:hover {
  border-color: var(--accent);
  color: var(--ink);
}
.tag {
  display: inline-block;
  font-size: 0.62rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--rule);
  color: var(--accent_d);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ─── 6. ABOUT ────────────────────────────────────────────────────────── */

.about_grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.about_photo_col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.about_photo_frame {
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  border: 1px solid var(--rule2);
}
.about_photo_frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(20%);
  transition: filter 0.3s;
}
.about_photo_frame:hover img {
  filter: grayscale(0%);
}

.about_redblock {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--accent);
  padding: 0.6rem 1rem;
  margin-bottom: 1.5rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}
.redblock_sep {
  color: rgba(255, 255, 255, 0.45);
}

.btn_cv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: "DM Sans", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.65rem 1rem;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  width: 100%;
  transition:
    background 0.15s,
    color 0.15s;
}
.btn_cv:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.about_text_col {
  padding-top: 0.5rem;
  padding-right: 1rem;
}
.about_body {
  font-size: 0.88rem;
  line-height: 1.9;
  color: var(--ink2);
  margin-bottom: 1.25rem;
  text-align: justify;
}
.about_chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 2rem;
}

/* ─── 7. TIMELINE (education + experience) ────────────────────────────── */
.tl_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* ─── 7b. EDUCATION SECTION (reference layout) ───────────────────────── */
/* Top half: photo with red circle on left, massive heading on right */

.edu_hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
  margin-bottom: 0;
  min-height: 480px;
}

.edu_photo_wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}

.edu_photo {
  position: relative;
  z-index: 1;
  width: clamp(220px, 32vw, 380px);
  height: clamp(300px, 46vw, 540px);
  object-fit: cover;
  object-position: top center;
  display: block;
  border: 4px solid var(--accent);
  border-radius: 64px 0 64px 0;
}

/* The huge section heading shared by edu + exp */
.edu_heading,
.exp_heading {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(4.5rem, 11vw, 10rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 2rem clamp(1.5rem, 4vw, 3.5rem) 1.5rem;
}
.edu_heading em,
.exp_heading em {
  font-style: normal;
  color: var(--accent);
}

/* Right column: heading + entries stacked */
.edu_right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Entry list — no top border since it flows directly from the heading */
.edu_entries {
  border-top: none;
}

.edu_entry {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding: 2rem clamp(1.5rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--rule);
}
.edu_entry:last-child {
  border-bottom: none;
}

.edu_entry_left {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-width: 640px;
}

.edu_entry_title {
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.edu_entry_org {
  font-size: 0.8rem;
  color: var(--ink2);
  margin-bottom: 0.4rem;
}

.edu_entry_desc {
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--ink2);
  text-align: justify;
}

.edu_entry_year {
  font-size: 0.78rem;
  color: var(--ink2);
  white-space: nowrap;
  padding-top: 0.1rem;
  flex-shrink: 0;
  min-width: 7rem; /* prevents year from collapsing when title text is long */
}

/* edu + exp hero need to bleed to edges */
#edu_section,
.exp_section {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}
.exp_hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 480px;
}
.exp_left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* ─── 8. PORTFOLIO GRID ───────────────────────────────────────────────── */

.proj_grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1px; /* gap as border lines between cards */
  background: var(--rule); /* shows through the 1px gaps */
  border: 1px solid var(--rule);
}

.proj_card {
  position: relative;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 360px;
  transition: background 0.2s;
}
.proj_card:hover {
  background: var(--warm);
}
.proj_card_img {
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.proj_card_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(40%);
  transition:
    filter 0.3s,
    transform 0.4s;
}
.proj_card:hover .proj_card_img img {
  filter: grayscale(0%);
  transform: scale(1.04);
}
.proj_card_emoji {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  background: var(--warm);
  border-bottom: 1px solid var(--rule);
}
.proj_card_body {
  padding: 1.25rem 1.4rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.proj_title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.proj_desc {
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--ink2);
  flex: 1;
}
.proj_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
/* Arrow in top-right of card */
.proj_arrow {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.1rem;
  color: var(--faint);
  transition:
    color 0.15s,
    transform 0.15s;
}
.proj_card:hover .proj_arrow {
  color: var(--accent);
  transform: translate(2px, -2px);
}

/* Project category badges */
.proj_cat {
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
}
.proj_cat_biomed {
  background: rgba(232, 64, 64, 0.12);
  color: var(--biomed);
  border: 1px solid rgba(232, 64, 64, 0.25);
}
.proj_cat_ai {
  background: rgba(139, 92, 246, 0.12);
  color: var(--ai);
  border: 1px solid rgba(139, 92, 246, 0.25);
}
.proj_cat_web {
  background: rgba(34, 211, 238, 0.1);
  color: var(--web);
  border: 1px solid rgba(34, 211, 238, 0.2);
}

/* ─── 8b. PORTFOLIO — BRUTALIST CARDS ─────────────────────────────────── */

/* 3-column grid, all cards same height, gap shows as red border lines */
.brut_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 2px solid var(--rule2);
}

.brut_card {
  display: flex;
  flex-direction: column;
  border-right: 2px solid var(--rule2);
  text-decoration: none;
  color: var(--ink);
  background: var(--bg);
  transition: background 0.15s;
  position: relative;
}
.brut_card:last-child {
  border-right: none;
}
.brut_card:hover {
  background: var(--warm);
}

/* Header strip: number + category badge */
.brut_card_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid var(--rule2);
}
.brut_card_num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}

/* Image area */
.brut_card_img {
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-bottom: 2px solid var(--rule2);
}
.brut_card_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(40%);
  transition:
    filter 0.3s,
    transform 0.4s;
  display: block;
}
.brut_card:hover .brut_card_img img {
  filter: grayscale(0%);
  transform: scale(1.04);
}
.brut_card_emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  background: var(--warm);
}

/* Body: title + desc + tags */
.brut_card_body {
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}
.brut_card_title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
}
.brut_card_desc {
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--ink2);
}

/* Footer: "VIEW PROJECT ↗" — always pinned to bottom */
.brut_card_footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-top: 2px solid var(--rule2);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  transition:
    color 0.15s,
    background 0.15s;
}
.brut_card:hover .brut_card_footer {
  color: var(--ink);
  background: var(--accent);
}

/* ─── 9. BLOG SECTION & CARDS ─────────────────────────────────────────── */

.blog_scroll_wrap {
  position: relative;
}

.blog_feed {
  display: flex;
  gap: 1px; /* gap-as-border */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.blog_feed::-webkit-scrollbar {
  display: none;
}

.blog_card {
  flex: 0 0 340px;
  height: 440px;
  position: relative;
  overflow: hidden;
  background: var(--paper);
  scroll-snap-align: start;
  text-decoration: none;
  cursor: pointer;
}
.blog_card:hover .blog_card_bg img {
  transform: scale(1.05);
}

.blog_card_bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.blog_card_bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Dark gradient for image cards */
.blog_card:not(.blog_card_letter) .blog_card_bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(12, 12, 12, 0.9) 0%,
    rgba(12, 12, 12, 0.2) 55%,
    transparent 100%
  );
}

/* Letter cards: dark tinted bg */
.blog_card_letter .blog_card_bg {
  background: var(--letter_bg);
}
.blog_card_letter .blog_card_overlay {
  color: var(--ink);
}
.blog_card_letter .blog_card_title {
  color: var(--ink);
}
.blog_card_letter .blog_card_excerpt {
  color: var(--ink2);
}
.blog_card_letter .blog_card_date {
  color: var(--faint);
}

/* Overlay: pinned to bottom */
.blog_card_overlay {
  position: absolute;
  inset: 0;
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: white;
}
.blog_card_title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.15;
  color: white;
  margin-bottom: 0.5rem;
}
.blog_card_excerpt {
  font-size: 0.75rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.75rem;
}
.blog_card_date {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
  font-family: "DM Sans", sans-serif;
}

/* Blog scroll buttons — flat square, no radius */
.blog_scroll_btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink);
  color: var(--bg);
  border: none;
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s;
  font-family: "DM Sans", sans-serif;
}
.blog_scroll_btn:hover {
  background: var(--accent);
  color: #fff;
}
.blog_scroll_prev {
  left: -22px;
}
.blog_scroll_next {
  right: -22px;
}

/* Blog list — vertical layout replacing the horizontal scroll */
.blog_list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule2);
}

/* Each row: date | category | title | excerpt | arrow */
.blog_row {
  display: grid;
  grid-template-columns: 100px auto 1fr auto 40px;
  align-items: center;
  gap: 1.5rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  transition:
    background 0.15s,
    padding-left 0.15s;
}
.blog_row:hover {
  background: var(--warm);
  padding-left: 0.75rem;
}
.blog_row_date {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--faint);
  white-space: nowrap;
  font-family: "DM Sans", sans-serif;
}
.blog_row_title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 1.1;
}
.blog_row_excerpt {
  font-size: 0.8rem;
  color: var(--ink2);
  display: none; /* shown on wider screens via responsive */
}
.blog_row_arrow {
  font-size: 1.1rem;
  color: var(--faint);
  transition:
    color 0.15s,
    transform 0.15s;
}
.blog_row:hover .blog_row_arrow {
  color: var(--accent);
  transform: translate(2px, -2px);
}

/* ─── 10. TAG FILTER BUBBLES ──────────────────────────────────────────── */

.tag_cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 2rem;
  border: 1px solid var(--rule2);
  width: fit-content;
}

.tag_bubble {
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-right: 1px solid var(--rule2);
  color: var(--ink2);
  background: transparent;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
  user-select: none;
}
.tag_bubble:last-child {
  border-right: none;
}
.tag_bubble:hover {
  background: var(--warm);
  color: var(--ink);
}
.tag_bubble.active {
  background: var(--ink);
  color: var(--bg);
}

/* Category badge on blog cards */
.cat_tag {
  display: inline-block;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  margin-bottom: 0.75rem;
  align-self: flex-start;
}
.cat_personal {
  background: var(--personal_l);
  color: var(--personal);
  border: 1px solid rgba(232, 64, 64, 0.25);
}
.cat_gaming {
  background: var(--gaming_l);
  color: var(--gaming);
  border: 1px solid rgba(74, 112, 232, 0.25);
}
.cat_career {
  background: var(--career_l);
  color: var(--career);
  border: 1px solid rgba(74, 158, 74, 0.25);
}
.cat_fitness {
  background: var(--career_l);
  color: var(--career);
  border: 1px solid rgba(74, 158, 74, 0.25);
}
.cat_letter {
  background: var(--letter_l);
  color: #9999ee;
  border: 1px solid rgba(74, 74, 200, 0.25);
}

/* ─── 11. CONTACT SECTION ─────────────────────────────────────────────── */

.section_contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
/* Big contact heading fills the left column */
.contact_heading {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(5rem, 12vw, 10rem);
  letter-spacing: -0.01em;
  line-height: 0.88;
  color: var(--ink);
}
.contact_heading em {
  color: var(--accent);
  font-style: normal;
}

/* Right column: sub, email, socials */
.contact_body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 1rem;
}
.contact_sub {
  font-size: 0.88rem;
  line-height: 1.85;
  color: var(--ink2);
}
.contact_email {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.6rem);
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.15rem;
  width: fit-content;
  transition: color 0.15s;
}
.contact_email:hover {
  color: var(--accent);
}
.contact_social {
  display: flex;
  gap: 0;
  border: 1px solid var(--rule2);
  width: fit-content;
}
.contact_social_item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  border-right: 1px solid var(--rule2);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink2);
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s;
}
.contact_social_item:last-child {
  border-right: none;
}
.contact_social_item:hover {
  background: var(--ink);
  color: var(--bg);
}
.contact_social_item i {
  font-size: 0.85rem;
}

/* ─── 12. SOCIAL LINKS ────────────────────────────────────────────────── */

/* Flat square icon buttons used in the hero footer */
.social_btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-right: none;
  color: var(--ink2);
  text-decoration: none;
  font-size: 0.85rem;
  background: transparent;
  transition:
    background 0.15s,
    color 0.15s;
}
.hero_social_row .social_btn:last-child {
  border-right: 1px solid var(--rule);
}
.social_btn:hover {
  background: var(--ink);
  color: var(--bg);
}

.social_links_footer {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.social_footer_btn {
  color: var(--faint);
  text-decoration: none;
  font-size: 0.82rem;
  transition: color 0.15s;
}
.social_footer_btn:hover {
  color: var(--ink);
}

/* ─── 13. SCROLL REVEAL ───────────────────────────────────────────────── */
/* Elements with class="reveal" start invisible; JS adds "visible" class */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal_delay_1 {
  transition-delay: 0.1s;
}
.reveal_delay_2 {
  transition-delay: 0.2s;
}
.reveal_delay_3 {
  transition-delay: 0.3s;
}
.reveal_delay_4 {
  transition-delay: 0.4s;
}

/* ─── 14. FOOTER ──────────────────────────────────────────────────────── */

.site_footer {
  border-top: 1px solid var(--rule);
  padding: 1.5rem clamp(1.5rem, 5vw, 3.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "DM Sans", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.footer_handle {
  font-family: "Bebas Neue", sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}

/* ─── 15. RESPONSIVE ──────────────────────────────────────────────────── */

/* Show blog excerpt on wider screens */
@media (min-width: 900px) {
  .blog_row {
    grid-template-columns: 100px auto 1fr 1fr 40px;
  }
  .blog_row_excerpt {
    display: block;
  }
}

/* Tablet: hide nav pill, keep logo + CTA */
@media (max-width: 860px) {
  .nav_links {
    display: none;
  }
}

/* Tablet: stacking layouts + edu/exp hero */
@media (max-width: 768px) {
  /* Contact grid stacks */
  .section_contact {
    grid-template-columns: 1fr;
  }
  .contact_heading {
    font-size: clamp(3.5rem, 16vw, 6rem);
  }

  /* Edu + exp hero stack — photo sits above heading */
  .edu_hero,
  .exp_hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  /* On exp, the flex order matters: heading should come first visually */
  .exp_hero {
    display: flex;
    flex-direction: column;
  }
  .exp_left {
    order: 1;
  }
  .exp_hero .edu_photo_wrap {
    order: 2;
  }

  .edu_photo_wrap {
    min-height: auto;
    padding: 1.5rem;
  }

  .edu_heading,
  .exp_heading {
    font-size: clamp(3.5rem, 14vw, 6rem);
    padding: 1.5rem clamp(1rem, 4vw, 2rem);
  }

  /* Entry rows: stack year below title on tablet */
  .edu_entry {
    flex-direction: column;
    gap: 0.5rem;
  }
  .edu_entry_year {
    order: -1; /* year moves above the title block so it reads date → title → desc */
    padding-top: 0;
    color: var(--accent);
  }
}

/* Mobile: ~640px and below */
@media (max-width: 640px) {
  /* Nav CTA: shrink so it doesn't crowd the logo on narrow screens */
  .nav_cta {
    font-size: 0.55rem;
    padding: 0.45rem 0.75rem;
  }

  /* Hero name: scale down so it fits without overflow */
  .hero_name_line {
    font-size: clamp(3.5rem, 19vw, 6rem);
  }
  .hero_name_line:first-child {
    font-size: clamp(3.2rem, 17.5vw, 5.5rem);
  }
  .hero_name_line:last-child {
    font-size: clamp(3.8rem, 20.5vw, 6.5rem);
  }

  /* Hero footer: wrap gracefully, hide coordinates (eyebrow already says Wellington) */
  .hero_footer {
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.6rem clamp(1rem, 4vw, 2rem);
  }
  .hero_coord {
    display: none;
  }
  .scroll_hint {
    width: 100%;
    justify-content: flex-end;
  }

  /* Section blocks: restore safe padding now that vert labels are hidden */
  .section_block {
    padding-left: clamp(1rem, 5vw, 2.5rem);
    padding-right: clamp(1rem, 5vw, 2.5rem);
  }

  /* Vertical labels: hide on mobile — purely decorative, causes overlap at narrow widths */
  .section_vert_label {
    display: none;
  }

  /* Section heading: tighten so it doesn't overflow */
  .section_heading {
    font-size: clamp(3rem, 14vw, 6rem);
    margin-bottom: 2rem;
  }

  /* About: single column, centred photo */
  .about_grid {
    grid-template-columns: 1fr;
  }
  .about_photo_col {
    max-width: 240px;
    margin: 0 auto;
  }

  /* Brutalist cards: single column */
  .brut_grid {
    grid-template-columns: 1fr;
  }
  .brut_card {
    border-right: none;
    border-bottom: 2px solid var(--rule2);
  }
  .brut_card:last-child {
    border-bottom: none;
  }

  /* Blog rows: 3-col grid — drop date column */
  .blog_row {
    grid-template-columns: auto 1fr 24px;
    gap: 0.75rem;
    padding: 1rem 0;
  }
  .blog_row_date {
    display: none;
  }

  /* Blog cards in horizontal scroll: slightly narrower so next card peeks */
  .blog_card {
    flex: 0 0 280px;
    height: 380px;
  }

  /* Hide scroll buttons — swipe works natively on touch screens */
  .blog_scroll_btn {
    display: none;
  }

  /* Contact social row: wrap into a 2×2 grid on narrow screens */
  .contact_social {
    flex-wrap: wrap;
  }
  .contact_social_item {
    flex: 1 1 auto;
    justify-content: center;
    border-bottom: 1px solid var(--rule2);
  }
  .contact_social_item:nth-last-child(-n + 2) {
    border-bottom: none;
  }
}

/* Very small phones (≤400px) */
@media (max-width: 400px) {
  /* Name: absolute floor so it never touches the screen edge */
  .hero_name_line {
    font-size: 17vw;
  }
  .hero_name_line:first-child {
    font-size: 16vw;
  }
  .hero_name_line:last-child {
    font-size: 18.5vw;
  }

  /* Tag filter: break the pill border into individual bubbles so they wrap */
  .tag_cloud {
    flex-wrap: wrap;
    border: none;
    gap: 0.4rem;
  }
  .tag_bubble {
    border: 1px solid var(--rule2);
  }

  /* Footer: stack items so they don't squeeze each other */
  .site_footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}