/* ============================================================
   Tina — portfolio landing page
   Plain CSS, no build step. Deployable as-is to Vercel.
   ============================================================ */

:root {
  --bg: #ffffff;          /* clean white */
  --ink: #111111;         /* near-black text */
  --ink-soft: #6b6b6b;    /* muted text */
  --line: rgba(17, 17, 17, 0.13); /* hairline dividers */
  --pill-bg: #111111;
  --pill-ink: #ffffff;
  --pill-muted-bg: #ededed;
  --pill-muted-ink: #333333;
  --maxw: 1280px;
  --maxw-wide: 1440px;
  --pad-x: clamp(10px, 2.2vw, 26px);
  --freeze-top: 26px;     /* where the frozen side rails pin */
  --font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Chivo Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* about-page column track — shared by the grid and the frozen rules so the
     hairlines always land on the column boundaries. Both rails use the SAME
     width so the middle column is centred (equal margins) and as wide as
     possible. Shrink --about-rail to widen the middle further.
     Tuned so the right rule clears the "about" nav link by the same ~26px the
     hamburger keeps from the page edge (equal nav margins). */
  --about-rail: clamp(278px, 18vw, 320px);
  --about-cols: var(--about-rail) minmax(0, 1fr) var(--about-rail);

  /* --- about page font sizes (tweak these) --------------------------------
     clamp(MIN, SCALE-with-width, MAX). Change MAX to set the desktop size,
     MIN for the smallest phones, SCALE for how fast it grows between them. */
  --about-heading-size: clamp(3rem, 4.8vw, 4.5rem);   /* "hi / i'm tina!" */
  --about-intro-size: 18px;                            /* the "i'm a 22..." typing line */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  position: relative;   /* anchor for the mobile badge */
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: clip; /* guard the oversized display type without making <body> a scroll container (keeps position: sticky working) */
}

a { color: inherit; text-decoration: none; }

/* ============================ NAV BAR ============================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px var(--pad-x);
  background: var(--bg);
}

.nav__logo {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
}

/* CJK glyphs sit in a much fuller em-box than Latin caps, so a matching
   font-size reads oversized/bold-mismatched next to Inter — sizing down and
   maxing the weight keeps the stroke width and visual footprint in step. */
.nav__logo-cjk {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 900;
  font-size: 0.92em;
  letter-spacing: 0;
}

.nav__links {
  margin-left: auto;
  display: flex;
  gap: 28px;
  font-size: 15px;
  font-weight: 500;
}

.nav__links a {
  position: relative;
  padding-bottom: 2px;
  color: var(--ink-soft);
  transition: color 0.18s ease;
}

/* PLACEHOLDER hover state — tweak to taste */
.nav__links a:hover { color: var(--ink); }

.nav__menu-btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  padding: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.nav__menu-bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Hamburger -> X while the menu is open */
.nav__menu-btn[aria-expanded="true"] .nav__menu-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__menu-btn[aria-expanded="true"] .nav__menu-bar:nth-child(2) { opacity: 0; }
.nav__menu-btn[aria-expanded="true"] .nav__menu-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================ FULL-SCREEN MENU ============================ */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;                 /* under the nav (100) so the X stays visible */
  background: var(--bg);
  padding: clamp(104px, 15vh, 176px) var(--pad-x) clamp(40px, 8vh, 72px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: clamp(48px, 7vw, 120px);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

/* JS removes the [hidden] attribute on load, then toggles .is-open */
.menu.is-open {
  opacity: 1;
  visibility: visible;
}

body.menu-open { overflow: hidden; }

/* ---- left: numbered nav ---- */
.menu__nav {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vh, 14px);
}

.menu__link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.4vw, 24px);
  width: max-content;
  max-width: 100%;
  font-size: clamp(2.6rem, 6.4vw, 5.25rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.menu__num {
  font-size: 1em;                /* same size as the word */
  font-weight: 400;              /* unbold */
  color: var(--ink-soft);       /* grey */
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.2s ease;
}

.menu__arrow {
  position: absolute;
  right: -1.1em;
  align-self: center;
  font-size: 0.4em;
  color: var(--ink);
  opacity: 0;
  transform: translateX(-0.35em);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.menu__word { transition: transform 0.22s ease; }

.menu__link:hover .menu__arrow,
.menu__link:focus-visible .menu__arrow {
  opacity: 1;
  transform: translateX(0.25em);
}
.menu__link:hover .menu__word,
.menu__link:focus-visible .menu__word { transform: translateX(-0.05em); }
.menu__link:hover .menu__num,
.menu__link:focus-visible .menu__num { opacity: 1; }

/* ---- right: contact info (static, no animation) ---- */
.menu__info {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.4vh, 40px);
  max-width: 420px;
  padding-top: 0.4em;
}

.menu__label {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.menu__value {
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--ink);
}

.menu__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: clamp(15px, 1.1vw, 17px);
}

.menu__value a,
.menu__socials a {
  color: var(--ink);
  transition: color 0.16s ease;
}
.menu__value a:hover,
.menu__socials a:hover { color: var(--ink-soft); }

@media (max-width: 820px) {
  .menu {
    grid-template-columns: 1fr;
    gap: clamp(40px, 8vh, 72px);
    padding-top: clamp(88px, 12vh, 120px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu { transition: none; }
  .menu__arrow,
  .menu__word,
  .menu__num { transition: none; }
}

/* ============================ HERO ============================ */
.hero {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(40px, 8vh, 96px) var(--pad-x) 80px;
  min-height: calc(100vh - 78px);
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  gap: clamp(28px, 5vh, 44px);
  width: 100%;
}

.hero__title {
  font-weight: 800;
  /* Between the first draft (~6.5rem) and the 2x pass (~13rem);
     middle value keeps the longest word inside the viewport on small screens */
  font-size: clamp(3.2rem, 11vw, 9rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.hero__title-fixed { display: block; }

/* Rotator sits on its own line, same size as the fixed line */
.hero__rotator {
  display: block;
  position: relative;
  min-height: 1em;
}

.hero__word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.12em);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.hero__word.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- hero image stack (fanned cards, sandwiched between title & CTA) ---------- */
.hero__stack {
  --stack-card-w: clamp(150px, 20vw, 260px);
  --stack-overlap: 0.32; /* fraction of a card's width the next one overlaps by, open state */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 clamp(20px, 6vw, 60px);
}

.hero__stack-card {
  flex: none;
  width: var(--stack-card-w);
  aspect-ratio: 3 / 2;
  border-radius: 18px;
  overflow: hidden;
  background: #e6e6e6;
  box-shadow: 0 16px 30px rgba(17, 17, 17, 0.16);
  transition: box-shadow 0.25s ease;
  --closed-x: 0px;
  --closed-rot: 0deg;
  transform: var(--open-transform);
  animation: hero-stack-fan 6.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.hero__stack-card:not(:first-child) {
  /* overlap a fraction of a card's width, whatever that resolves to at this viewport */
  margin-left: calc(var(--stack-card-w) * -1 * var(--stack-overlap));
}

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

/* each card's fanned-open pose + its collapsed-into-the-pile pose, left to right */
.hero__stack-card--1 {
  --open-transform: rotate(-10deg) translateY(22px);
  --closed-x: 0px;
  --closed-rot: 0deg;
  z-index: 1;
  animation-delay: 0s;
}
.hero__stack-card--2 {
  --open-transform: rotate(-5deg) translateY(-5px);
  --closed-x: calc(var(--stack-card-w) * (1 - var(--stack-overlap)) * -1);
  --closed-rot: -3deg;
  z-index: 2;
  animation-delay: 0.08s;
}
.hero__stack-card--3 {
  --open-transform: rotate(1deg) translateY(-18px);
  --closed-x: calc(var(--stack-card-w) * (1 - var(--stack-overlap)) * -2);
  --closed-rot: 2deg;
  z-index: 5;
  animation-delay: 0.16s;
}
.hero__stack-card--4 {
  --open-transform: rotate(6deg) translateY(5px);
  --closed-x: calc(var(--stack-card-w) * (1 - var(--stack-overlap)) * -3);
  --closed-rot: -2deg;
  z-index: 3;
  animation-delay: 0.24s;
}
.hero__stack-card--5 {
  --open-transform: rotate(11deg) translateY(20px);
  --closed-x: calc(var(--stack-card-w) * (1 - var(--stack-overlap)) * -4);
  --closed-rot: 3deg;
  z-index: 4;
  animation-delay: 0.32s;
}

/* stacked pile -> fanned out -> hold -> back to a pile -> repeat, on loop */
@keyframes hero-stack-fan {
  0%,
  14% {
    transform: translateX(var(--closed-x)) rotate(var(--closed-rot));
  }
  42%,
  68% {
    transform: var(--open-transform);
  }
  96%,
  100% {
    transform: translateX(var(--closed-x)) rotate(var(--closed-rot));
  }
}

.hero__stack-card:hover {
  animation-play-state: paused;
  box-shadow: 0 22px 36px rgba(17, 17, 17, 0.22);
  z-index: 6;
}

/* fallback look if an assets/hero-stack-N.jpg ever goes missing */
.hero__stack-card img[src=""],
.hero__stack-card.is-missing img {
  display: none;
}

.hero__stack-card.is-missing {
  background-color: #ececec;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3b3b3' stroke-width='1.5'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Ccircle cx='8' cy='10' r='1.6'/%3E%3Cpath d='M3 17l5.5-5.5a1.5 1.5 0 0 1 2.1 0L15 16m2-2 1.6-1.6a1.5 1.5 0 0 1 2.1 0L22 14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30%;
}

@media (max-width: 560px) {
  .hero__stack {
    --stack-card-w: clamp(96px, 26vw, 165px);
    --stack-overlap: 0.5; /* tighter overlap so the bigger cards still fit narrow screens */
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__stack-card {
    transition: none;
    animation: none;
    transform: var(--open-transform);
  }
}

/* ============================ CTA PILL ============================ */
.btn-pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 16px 30px;
  background: var(--pill-bg);
  color: var(--pill-ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  border-radius: 999px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

/* PLACEHOLDER hover state — tweak to taste */
.btn-pill:hover { transform: translateY(-2px); opacity: 0.9; }

.btn-pill--sm { padding: 12px 22px; font-size: 13px; }

/* ============================ WORK PAGE ============================ */
.work {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(56px, 12vh, 132px) clamp(20px, 5vw, 40px) clamp(56px, 10vh, 96px);
}

/* category quadrant — 2 up, then the 3rd on its own row (like the reference) */
.work__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 30px) clamp(20px, 2vw, 26px);
}

.work__card {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 18px);
  color: var(--ink);
}

.work__card-media {
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: 20px;
  background: #f4f3f1;
  border: 1px dashed rgba(17, 17, 17, 0.12);   /* placeholder hint — drop a cover image in */
  overflow: hidden;
  transition: transform 0.28s ease, background-color 0.28s ease;
}

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

.work__card:hover .work__card-media {
  transform: translateY(-4px);
  background: #efeeec;
}

/* internships cover — four logos as overlapping stickers in a loose quad */
.work__card-media--logos {
  background: #f6f5f3;
  border: none;
}

.work__logos {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 11%;
}

.work__logo-chip {
  position: absolute;
  width: 32%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22%;
  background: #fff;
  border: 1.25px solid #fff;
  box-shadow: 0 10px 22px rgba(17, 17, 17, 0.16);
  transition: top 0.45s cubic-bezier(0.22, 1, 0.36, 1), left 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    right 0.45s cubic-bezier(0.22, 1, 0.36, 1), bottom 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}

.work__logo-chip img {
  width: 86%;
  height: 86%;
  object-fit: contain;
}

/* logos whose own artwork fills a hard-cornered square (no transparent
   margin) — round them to echo the chip's curvature instead of clashing */
.work__logo-chip-img--round {
  border-radius: 25%;
}

.work__logo-chip--1 { top: 20%; left: 16%; transform: rotate(-8deg); z-index: 1; }
.work__logo-chip--2 { top: 9%;  right: 18%; transform: rotate(6deg);  z-index: 2; }
.work__logo-chip--3 { bottom: 10%; left: 28%; transform: rotate(5deg);  z-index: 3; }
.work__logo-chip--4 { bottom: 16%; right: 16%; transform: rotate(-5deg); z-index: 4; }

/* on hover, a small dynamic disperse — the pile loosens and drifts a touch toward
   the corners, not a full scatter */
.work__card:hover .work__logo-chip--1 { top: 8%;  left: 4%;  transform: rotate(-11deg); }
.work__card:hover .work__logo-chip--2 { top: 2%;  right: 8%; transform: rotate(9deg); }
.work__card:hover .work__logo-chip--3 { bottom: 0%; left: 16%; transform: rotate(8deg); }
.work__card:hover .work__logo-chip--4 { bottom: 6%; right: 4%; transform: rotate(-8deg); }

/* mirrored variant (projects card) — same pile/disperse pattern, tilted and
   dispersing the opposite way so it doesn't read identically to internships */
.work__logos--mirror .work__logo-chip--1 { transform: rotate(8deg); }
.work__logos--mirror .work__logo-chip--2 { transform: rotate(-6deg); }
.work__logos--mirror .work__logo-chip--3 { transform: rotate(-5deg); }
.work__logos--mirror .work__logo-chip--4 { transform: rotate(5deg); }

.work__card:hover .work__logos--mirror .work__logo-chip--1 { transform: rotate(11deg); }
.work__card:hover .work__logos--mirror .work__logo-chip--2 { transform: rotate(-9deg); }
.work__card:hover .work__logos--mirror .work__logo-chip--3 { transform: rotate(-8deg); }
.work__card:hover .work__logos--mirror .work__logo-chip--4 { transform: rotate(8deg); }

/* content creation cover — three TikTok-style clips in little iPhone frames,
   fanned side by side like a bento row. The bezel is white (matching the
   sticker chips on the internships cover), so contain-fit images letterbox
   straight into more bezel — no visible cropping. */
.work__card-media--phones {
  background: #f6f5f3;
  border: none;
}

.work__phones {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.2vw, 20px);
  width: 100%;
  height: 100%;
}

.work__phone {
  position: relative;
  flex: none;
  width: clamp(82px, 13.5vw, 132px);
  aspect-ratio: 9 / 17.5;
  background: #fff;
  border-radius: 16% / 8%;
  padding: 1.6% 1.3%;
  box-shadow: 0 12px 24px rgba(17, 17, 17, 0.16);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.work__phone--1 { transform: rotate(-6deg) translateY(6px); z-index: 1; }
.work__phone--2 { transform: rotate(0deg)  translateY(-6px); z-index: 2; }
.work__phone--3 { transform: rotate(6deg)  translateY(6px); z-index: 1; }

.work__card:hover .work__phone--1 { transform: rotate(-11deg) translateY(-2px) scale(1.04); }
.work__card:hover .work__phone--2 { transform: rotate(0deg)   translateY(-16px) scale(1.06); }
.work__card:hover .work__phone--3 { transform: rotate(11deg)  translateY(-2px) scale(1.04); }
.work__card:hover .work__phone { box-shadow: 0 18px 30px rgba(17, 17, 17, 0.26); }

.work__phone-screen {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 14% / 7%;
  overflow: hidden;
  background: #0b0b0c;
}

.work__phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.work__phone-notch {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 3.4%;
  background: #0b0b0c;
  border-radius: 999px;
  z-index: 2;
}

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

.work__card-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.work__card-label {
  font-size: 14px;                /* matches the reference work page */
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgb(18, 18, 18);
}

.work__card-arrow {
  font-size: 1em;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateX(-0.35em);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.work__card:hover .work__card-arrow,
.work__card:focus-visible .work__card-arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 680px) {
  .work__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .work__card-media,
  .work__card-arrow { transition: none; }
}

/* ============================ INTERNSHIPS PAGE ============================ */
/* content sits in the middle 3 of 5 columns (60vw, 20vw gutters) on desktop */
.ints {
  width: 60vw;
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(88px, 14vh, 150px) 0 clamp(72px, 12vh, 128px);
}
@media (max-width: 1080px) {
  .ints { width: auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
}

.ints__head {
  margin-bottom: clamp(28px, 4.5vw, 52px);
}

.ints__back {
  display: inline-block;
  margin-bottom: clamp(12px, 1.8vw, 20px);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  transition: color 0.18s ease;
}
.ints__back:hover { color: var(--ink); }

.ints__title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.ints__intro {
  margin-bottom: clamp(40px, 7vw, 80px);
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  line-height: 1.75;
  color: var(--ink-soft);
}

.ints__list {
  display: flex;
  flex-direction: column;
}

.ints__item {
  display: grid;
  grid-template-columns: minmax(120px, 190px) minmax(0, 1fr);
  gap: clamp(22px, 4.5vw, 60px);
  align-items: start;
  padding: clamp(26px, 4vw, 44px) 0;
  border-top: 1px solid var(--line);
}
.ints__item:last-child { border-bottom: 1px solid var(--line); }

.ints__logo {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2px;
}

.ints__logo-link {
  display: block;
  transition: opacity 0.18s ease;
}
.ints__logo-link:hover { opacity: 0.65; }

.ints__logo img {
  width: 100%;
  max-width: 132px;
  height: auto;
  object-fit: contain;
}

.ints__role {
  margin-bottom: clamp(8px, 1.1vw, 13px);
  font-size: clamp(0.9rem, 1.25vw, 1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.ints__desc {
  max-width: 58ch;
  font-size: clamp(0.82rem, 0.95vw, 0.9rem);
  line-height: 1.7;
  color: var(--ink-soft);
}

@media (max-width: 720px) {
  .ints__item {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .ints__logo {
    justify-content: flex-start;
  }
  .ints__logo img { max-width: 104px; }
}

/* ============================ PROJECTS PAGE ============================
   Reuses .ints for the header/intro (same page chrome), but the list is its
   own layout: each row splits 50/50 — an embedded, click-through presentation
   on the left, subtitle + blurb on the right — instead of internships' narrow
   logo column. Outer gutters stay the same (.ints width) so margins match. */
.proj__list {
  display: flex;
  flex-direction: column;
}

.proj__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
  padding: clamp(32px, 5vw, 56px) 0;
  border-top: 1px solid var(--line);
}
.proj__item:last-child { border-bottom: 1px solid var(--line); }

/* 16:9-ish frame matching Canva's default embed aspect ratio */
.proj__embed {
  position: relative;
  width: 100%;
  padding-top: 56.2225%;
  background: #f4f4f5;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(17, 17, 17, 0.08);
}

.proj__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* used while a deck hasn't been supplied yet — shows the brand mark instead
   of an interactive embed */
.proj__embed--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  box-shadow: none;
}
.proj__embed--logo img {
  width: 42%;
  max-width: 160px;
  height: auto;
  object-fit: contain;
}

/* poster stack row — keeps the same 16:9-height box as the presentation
   embeds (inherited from .proj__embed) so this row lines up with the rest of
   the page; only the background/shadow are stripped since the posters
   supply their own. */
.proj__embed--posters {
  display: block; /* it's an <a>, which defaults to inline */
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
.proj__embed--posters:hover .proj__poster { box-shadow: 0 16px 30px rgba(17, 17, 17, 0.18); }

/* Poster stack (SCC/commencement row) — a pile of event flyers that spreads
   on loop, same mechanism as .hero__stack (flex row of overlapped cards that
   pull into a pile via translateX, then release back to their natural fanned
   position) but with NO rotation and NO vertical jostle: posters slide
   straight out sideways only, like discs fanning off a spindle. Each poster
   is sized to the SAME HEIGHT as the embed box above/below it (not its own
   width), with the width following from the poster's 3:4 aspect ratio — and
   the overlap fraction keeps the fully-open spread within that same box's
   width, so it never spills past where a presentation would sit. */
.proj__poster-stack {
  --poster-w: 42.2%; /* box-height (56.2225% of width) × 3/4, expressed as a % of the box's own width */
  --poster-overlap: 0.73; /* fraction of a poster's width still hidden behind the next one, open state — tuned so the fully-open spread lands flush with the box's right edge, not past it */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.proj__poster {
  flex: none;
  width: var(--poster-w);
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 28px rgba(17, 17, 17, 0.16);
  transition: box-shadow 0.25s ease;
  --closed-x: 0px;
  transform: translateX(var(--closed-x));
  animation: proj-poster-spread 7s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.proj__poster:not(:first-child) {
  margin-left: calc(var(--poster-w) * -1 * var(--poster-overlap));
}

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

/* Geometry (left-to-right pile order, unchanged): closed state pulls each
   poster fully back behind the first (undoing the flex overlap) so they all
   coincide; open state releases to the natural, already-overlapped flex
   position. Reveal order is separate from that geometry: the poster drawn on
   TOP of the pile (highest z-index) also gets the shortest delay, so it's
   the first to peel away — cascading down to poster--1, which sits at the
   back and never moves (its closed/open positions are identical). */
.proj__poster--1 { --closed-x: 0px; z-index: 1; animation-delay: 0.4s; }
.proj__poster--2 { --closed-x: calc(var(--poster-w) * (1 - var(--poster-overlap)) * -1); z-index: 2; animation-delay: 0.32s; }
.proj__poster--3 { --closed-x: calc(var(--poster-w) * (1 - var(--poster-overlap)) * -2); z-index: 3; animation-delay: 0.24s; }
.proj__poster--4 { --closed-x: calc(var(--poster-w) * (1 - var(--poster-overlap)) * -3); z-index: 4; animation-delay: 0.16s; }
.proj__poster--5 { --closed-x: calc(var(--poster-w) * (1 - var(--poster-overlap)) * -4); z-index: 5; animation-delay: 0.08s; }
.proj__poster--6 { --closed-x: calc(var(--poster-w) * (1 - var(--poster-overlap)) * -5); z-index: 6; animation-delay: 0s; }

@keyframes proj-poster-spread {
  0%, 14% { transform: translateX(var(--closed-x)); }
  42%, 68% { transform: translateX(0); }
  96%, 100% { transform: translateX(var(--closed-x)); }
}

.proj__poster:hover {
  animation-play-state: paused;
  box-shadow: 0 20px 34px rgba(17, 17, 17, 0.22);
  z-index: 7;
}

@media (prefers-reduced-motion: reduce) {
  .proj__poster {
    animation: none;
    transform: translateX(var(--closed-x));
  }
}

.proj__subtitle {
  margin-bottom: clamp(10px, 1.5vw, 16px);
  font-size: clamp(0.9rem, 1.25vw, 1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.proj__desc {
  max-width: 60ch;
  font-size: clamp(0.82rem, 0.95vw, 0.9rem);
  line-height: 1.7;
  color: var(--ink-soft);
}

@media (max-width: 720px) {
  .proj__item {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ============================ CONTENT / DIGITAL MEDIA PAGE ============================ */
.content__marquee {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  padding: 11px 0;
  margin-top: 8px;
}

.content__marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: content-marquee 48s linear infinite;
}

.content__marquee-group {
  display: flex;
  align-items: center;
  gap: 0.9em;
  padding-right: 0.9em;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.content__marquee-group span:nth-child(even) { opacity: 0.4; }

@keyframes content-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.content {
  width: 60vw;
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(40px, 7vh, 72px) 0 clamp(72px, 12vh, 128px);
}
@media (max-width: 1080px) {
  .content { width: auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
}

.content__back {
  display: inline-block;
  margin-bottom: clamp(22px, 4vw, 40px);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  transition: color 0.18s ease;
}
.content__back:hover { color: var(--ink); }

.content__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(18px, 2.6vw, 28px);
}

.content__title {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.content__socials {
  display: flex;
  gap: 16px;
  padding-top: 6px;
  list-style: none;
}
.content__socials li { display: flex; }
.content__socials a {
  display: inline-flex;
  color: var(--ink-soft);
  transition: color 0.18s ease;
}
.content__socials a:hover { color: var(--ink); }
.content__socials .icon { color: currentColor; width: 18px; height: 18px; }

.content__intro {
  margin-bottom: clamp(40px, 7vw, 80px);
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  line-height: 1.75;
  color: var(--ink-soft);
}

.content__cat {
  margin-top: clamp(38px, 6vw, 64px);
}
.content__cat:first-of-type { margin-top: 0; }

.content__cat-title {
  margin-bottom: clamp(16px, 2vw, 24px);
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.content__cat-deco {
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.content__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
}

.content__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--ink);
}

.content__thumb {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: #f2f1ef;
}

.content__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
.content__card:hover .content__thumb img,
.content__card:focus-visible .content__thumb img { transform: scale(1.035); }

.content__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(38px, 4.6vw, 52px);
  height: clamp(38px, 4.6vw, 52px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  display: grid;
  place-items: center;
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.content__play::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent rgba(17, 17, 17, 0.82);
  margin-left: 3px;
}
.content__card:hover .content__play,
.content__card:focus-visible .content__play {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.06);
}

.content__caption {
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
}

@media (max-width: 680px) {
  .content__row { grid-template-columns: 1fr 1fr; }
  .content__head { flex-direction: column; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .content__marquee-track { animation: none; }
  .content__thumb img,
  .content__play { transition: none; }
}

/* ============================ SHARED ICONS ============================ */
.icon {
  width: 22px;
  height: 22px;
  display: block;
  color: var(--ink);
}

.icon--sm { width: 18px; height: 18px; }

/* Nav variant for the about page: full-bleed (no max-width) so the logo and
   hamburger line up with the page's left/right margins; scrolls away with the
   page (NOT frozen) — `relative` overrides .nav's sticky. No divider under it. */
.nav--line {
  position: relative;
  max-width: none;
  background: transparent;   /* let the frozen column rules show through to y=0 */
}

/* ============================ ABOUT PAGE ============================ */
.about {
  position: relative;
  width: 100%;
  padding: 0 var(--pad-x);      /* full-bleed — spans the whole viewport */
  /* creates a containing block for the fixed .about__rules below, so their
     top:0/bottom:0 resolve against THIS box instead of the viewport — the
     rules end exactly where the about content ends instead of bleeding
     into the gap before the contact section */
  transform: translateZ(0);
}

/* three columns divided by hairlines: left rail | main | right rail */
.about__grid {
  display: grid;
  grid-template-columns: var(--about-cols);
  align-items: stretch;
}

.about__side-left,
.about__center,
.about__side-right {
  padding-top: clamp(36px, 5vh, 56px);
  padding-bottom: clamp(56px, 9vh, 96px);
}

.about__center {
  padding-left: clamp(28px, 3.4vw, 52px);
  padding-right: clamp(28px, 3.4vw, 52px);
}

/* Side rails: the column scrolls, but the inner content stays pinned near the
   top so only the middle strip appears to move. (The nav is NOT frozen — it
   scrolls away with the middle.) */
.about__side-inner {
  position: sticky;
  top: var(--freeze-top);
  display: flex;
  flex-direction: column;
}

.about__side-left .about__side-inner { padding-right: 24px; }

.about__side-right .about__side-inner {
  padding-left: 24px;
  gap: 12px;
  align-items: flex-end;   /* CTAs hug the right edge, like the reference */
  text-align: right;
}

/* Frozen vertical hairlines at the column boundaries. Fixed to the viewport so
   they don't move while the middle scrolls. Uses the same column track as the
   grid, so the lines always sit exactly on the boundaries. */
.about__rules {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: var(--about-cols);
  pointer-events: none;
  z-index: 1;
}

.about__rules span:nth-child(1) { border-right: 1px solid var(--line); }
.about__rules span:nth-child(2) { border-right: 1px solid var(--line); }

/* ---- left rail: heading + socials + badge ---- */
.about__heading {
  font-weight: 800;
  font-size: var(--about-heading-size);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.about__heading span { display: block; }

.about__socials {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: clamp(48px, 16vh, 150px);  /* sit lower in the pinned rail */
}

.about__socials a {
  display: inline-flex;
  /* bigger click area around the 18px icon, without moving it */
  padding: 10px;
  margin: -10px;
  color: var(--ink-soft);
  transition: color 0.18s ease;
}

/* PLACEHOLDER hover state */
.about__socials a:hover { color: var(--ink); }
.about__socials .icon { color: currentColor; width: 18px; height: 18px; }

/* Decorative badge — floats fixed in the bottom-left corner of the viewport.
   The knot art has a little transparent margin, so pull left a touch to sit
   the knot itself on the page margin. */
.about__badge {
  position: fixed;
  left: calc(var(--pad-x) - 14px);
  bottom: 20px;
  width: 84px;
  height: 84px;
  z-index: 60;
  animation: badge-float 3.4s ease-in-out infinite;
  will-change: transform;
  transition: opacity 0.3s ease;
}

.about__badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@keyframes badge-float {
  0%   { transform: translateY(0) rotate(-2.5deg); }
  50%  { transform: translateY(-11px) rotate(2.5deg); }
  100% { transform: translateY(0) rotate(-2.5deg); }
}

/* ---- knot cursor (site-wide, fine pointers only — see script.js) ---- */
.knot-cursor {
  position: fixed;
  left: 0;
  top: 0;
  height: 62px;               /* ~2/3 of the 84px corner badge */
  aspect-ratio: 257 / 421;    /* keep the sliced knot's proportions */
  pointer-events: none;
  z-index: 10000;             /* above the nav (100) and menu overlay */
  opacity: 0;
  transition: opacity 0.18s ease;
  transform-origin: 50% 10%;  /* swing from just below the pointer */
}

.knot-cursor.is-on { opacity: 1; }

.knot-cursor img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  will-change: opacity;
  transform-origin: 50% 10%;
  transition: transform 0.2s ease;
}

/* hover cue over links/buttons: the knot swells slightly */
.knot-cursor.is-hover img { transform: scale(1.18); }

/* hide the native cursor everywhere once the knot is active */
@media (pointer: fine) {
  html.has-knot-cursor,
  html.has-knot-cursor * { cursor: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .knot-cursor { display: none; }
}

/* ---- main column ---- */
.about__intro {
  font-size: var(--about-intro-size);
  color: var(--ink);
  margin-bottom: 10px;   /* sit close to the [01] line */
  min-height: 1.4em;     /* hold the line height while the text types/clears */
}

.about__intro-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: -0.18em;
  animation: caret-blink 1s step-end infinite;
}

@keyframes caret-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.about__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  gap: clamp(26px, 4vh, 40px) clamp(20px, 3vw, 44px);
  align-content: start;
}

.about__item-head {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.about__num { margin-right: 8px; }

.about__subs {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 12px;
}

.about__sub {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink);
}

a.about__sub { color: var(--ink-soft); transition: color 0.18s ease; }
a.about__sub:hover { color: var(--ink); }

.about__sub .icon { color: currentColor; flex-shrink: 0; width: 15px; height: 15px; }

/* Logo container for [03]. Shows the real logo once the files are dropped
   into /assets; falls back to a dashed placeholder if the file is missing
   (see the onerror handler in about.html). */
.about__logo-slot {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  overflow: hidden;
}

.about__logo-slot.is-empty {
  border: 1px dashed rgba(17, 17, 17, 0.3);
}

.about__logo-slot img { width: 100%; height: 100%; object-fit: contain; }

/* Portrait photo — full center-column width (like the original placeholder),
   landscape so the full scene shows uncropped (image is 4:3). */
.about__portrait {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-top: clamp(36px, 6vh, 64px);
  border-radius: 16px;
  overflow: hidden;
}

.about__portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---- story: scroll-reveal paragraphs under the portrait ----
   Bold, same weight family as .about__heading, just sized for reading.
   Each word starts faint and colors in as it scrolls up toward the
   reveal line (see script.js) — a typing-by-scroll effect. */
.about__story {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 5vh, 48px);
  margin-top: clamp(48px, 8vh, 88px);
}

.about__story-p {
  font-weight: 400;
  font-size: 15px; /* a touch bigger than .about__sub's 13px */
  line-height: 1.6;
  letter-spacing: -0.01em;
}

.about__story-word {
  color: rgba(17, 17, 17, 0.16);
  transition: color 0.15s linear;
}
.about__story-word.is-revealed { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .about__story-word { transition: none; color: var(--ink); }
}

/* ---- right rail: CTAs + location ---- */
.btn-pill--muted {
  background: var(--pill-muted-bg);
  color: var(--pill-muted-ink);
}
.btn-pill--muted:hover { opacity: 1; }

.about__location {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;      /* sits just under the "my work" pill */
  margin-right: 16px;   /* nudge left so it optically balances under the pill */
  font-size: 13px;
  color: var(--ink);
}

.about__location .icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: currentColor;
}

/* ============================ WORK EXPERIENCE ============================
   Modelled on the Framer reference's "WORK EXPERIENCE" table, but kept on the
   site's own type system: white panel, Inter throughout (same as the
   internships list), ink/ink-soft only — no accent color. */
.work-exp {
  background: var(--bg);
  padding: clamp(56px, 10vh, 100px) var(--pad-x);
}

.work-exp__inner {
  max-width: var(--maxw);
  margin: 0 auto;
}

.work-exp__title {
  font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: clamp(28px, 5vh, 48px);
}

.work-exp__table {
  display: flex;
  flex-direction: column;
}

.work-exp__row {
  display: grid;
  grid-template-columns: minmax(160px, 1.6fr) minmax(120px, 1fr) minmax(160px, 1.3fr) minmax(60px, auto);
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
  padding: clamp(18px, 3vh, 28px) 0;
  border-bottom: 1px solid var(--line);
}

.work-exp__row--head {
  padding-bottom: clamp(12px, 2vh, 18px);
}

.work-exp__cell {
  font-size: clamp(0.75rem, 1vw, 0.9rem);
}

.work-exp__label {
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.work-exp__job {
  font-weight: 700;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: uppercase;
}

.work-exp__company,
.work-exp__role {
  color: var(--ink-soft);
  text-transform: uppercase;
  line-height: 1.5;
}

.work-exp__year {
  color: var(--ink-soft);
  text-align: right;
  justify-self: end;
}

@media (max-width: 720px) {
  .work-exp__row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 20px 0;
  }
  .work-exp__row--head {
    display: none;
  }
  .work-exp__year {
    text-align: left;
    justify-self: start;
  }
  .work-exp__job {
    margin-bottom: 4px;
  }
}

/* ============================ CONTACT / FOOTER ============================
   Modelled on the Framer reference "let's chat" section. The inverted panel is
   clean black & white only — no greys. */
.contact {
  position: relative;
  z-index: 2;                 /* cover the fixed vertical column rules */
  background: var(--bg);
  margin-top: clamp(90px, 16vh, 190px);
}

.contact__inner {
  padding: 0 var(--pad-x);
}

.contact__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 12.5vw, 150px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ink);
}

/* both link to the booking calendar */
.contact__link,
.contact__cta-link { transition: opacity 0.18s ease; }
.contact__link:hover,
.contact__cta-link:hover { opacity: 0.6; }

.contact__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.contact__rule {
  height: clamp(5px, 0.6vw, 8px);
  background: var(--ink);
  margin-top: clamp(10px, 1.4vw, 18px);
}

.contact__cta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(34px, 6vh, 72px);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(12px, 1.15vw, 16px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
}

.contact__dot {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #a42a1a;          /* matches the chinese knot red */
}

.contact__hr {
  height: 1px;
  margin-top: clamp(40px, 8vh, 90px);
  background: var(--line);
}

/* ---- inverted panel ---- */
.contact__footer {
  background: #000;
  color: #fff;
  padding: clamp(48px, 9vh, 100px) var(--pad-x) clamp(26px, 5vh, 44px);
}

.contact__cols {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 6vw, 96px);
}

.contact__col--pages {
  margin-left: auto;
  text-align: right;
}

.contact__col-title {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 22px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: clamp(20px, 3.4vh, 34px);
}

.contact__col ul { list-style: none; }

.contact__col li {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(12px, 1.15vw, 15px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  line-height: 2.3;
}

.contact__col a {
  color: #fff;
  transition: opacity 0.18s ease;
}
.contact__col a:hover { opacity: 0.55; }

.contact__base {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  margin-top: clamp(48px, 10vh, 110px);
}

.contact__copy {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(12px, 1.15vw, 15px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
}

.contact__bar {
  flex: 1;
  height: clamp(5px, 0.6vw, 8px);
  background: #fff;
}

/* fade the floating knot badge out once the footer is on screen */
.about__badge.is-tucked { opacity: 0; pointer-events: none; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 900px) {
  .contact { margin-top: clamp(64px, 12vh, 120px); }
  .contact__cols { gap: 32px 48px; }
  .contact__col--pages { margin-left: 0; text-align: left; flex-basis: 100%; }

  .about__grid {
    grid-template-columns: 1fr;
  }

  .about__side-left { padding-right: 0; padding-bottom: 8px; }

  /* single column — drop the freeze + vertical rules */
  .about__side-inner {
    position: static;
    min-height: 0;
    border: none;
    padding-left: 0;
    padding-right: 0;
  }

  .about__center {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding-left: 0;
    padding-right: 0;
  }

  .about__rules { display: none; }  /* no frozen rules in single-column mode */

  .about__socials { margin-top: 28px; }

  .about__side-right { padding-left: 0; padding-bottom: 8px; }

  .about__side-right .about__side-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .about__location { margin-top: 0; }

  /* On mobile the fixed badge would sit on top of content — drop it to the
     bottom-left of the page, just above the footer (scrolls with the page). */
  .about__badge {
    position: absolute;
    bottom: 84px;
    width: 52px;
    height: 52px;
  }

}

@media (max-width: 560px) {
  .about__list { grid-template-columns: 1fr; grid-auto-flow: row; }
}

@media (max-width: 820px) {
  .hero {
    min-height: auto;
    padding-top: 32px;
  }

  .nav__links { display: none; } /* rely on hamburger menu on mobile */
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .hero__word { transition: opacity 0.2s linear; transform: none; }
  .btn-pill { transition: none; }
  .about__badge { animation: none; }
  .about__intro-caret { animation: none; opacity: 1; }
}