/* Aligns exported project pages back to the homepage's design system:
   Manrope typography (was Clash Grotesk / Space Grotesk), homepage color
   tokens, and homepage button proportions/weight. Deliberately unlayered
   so it overrides the compiled Tailwind theme layer regardless of the
   cascade's source order. */

:root, :host {
  --font-clash: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-space: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --default-font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Manrope", ui-sans-serif, system-ui, sans-serif;

  --bg: #f0f0f2;
  --card: #ffffff;
  --frame: #f7f7f8;
  --ink: #131315;
  --ink-secondary: #6d6d73;
  --hairline: #e2e2e5;
  --media-fill: #e7e7ea;
  --accent: #ff5d3a;
  --radius: 20px;
  --radius-lg: 28px;
}

body { font-family: "Manrope", ui-sans-serif, system-ui, sans-serif; }
h1, h2, h3 { margin: 0; letter-spacing: -0.015em; font-weight: 800; line-height: 1.1; }
p { line-height: 1.45; }
.text-hero, .text-section, .text-card-title, .text-stat { line-height: 1.1; }
em { font-style: normal; color: var(--accent); }

.btn { font-weight: 800; padding: 0.8rem 1.4rem; font-size: 0.875rem; }

h1.text-section { font-size: clamp(2rem, 3.5vw, 3rem); }

/* ---------- Homepage-matching closing CTA: contact tile + "next project" work-tile ---------- */
.contact-frame { background: var(--frame); border-radius: var(--radius-lg); padding: 1.25rem; display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; align-items: stretch; }

.tile { background: var(--card); border-radius: var(--radius); padding: 1.75rem; }
a.tile { text-decoration: none; color: inherit; display: block; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease; }
a.tile:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgb(19 19 21 / 0.18); }

.tile--contact-main { padding: 3.5rem; background: #212121; color: #fff; }
.tile--contact-main h2 { font-size: clamp(2rem, 4vw, 2.875rem); line-height: 1.1; max-width: 20ch; }
.tile--contact-main p { margin: 1rem 0 2.25rem; color: rgb(255 255 255 / 0.65); font-size: 1.0625rem; max-width: 40ch; }
.contact-email { display: inline-block; font-size: clamp(1.75rem, 4.5vw, 2.5rem); font-weight: 800; text-decoration: none; color: #fff; transition: color 0.2s ease; }
.contact-email:hover { color: var(--accent); }

.tile--work { padding: 0; overflow: hidden; }
.tile--work .media-fill { width: 100%; aspect-ratio: 1600/1200; background: var(--media-fill); object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }
a.tile--work:hover .media-fill { transform: scale(1.045); }
.work-copy { padding: 1.4rem 1.6rem 1.75rem; }
.work-meta { display: flex; align-items: center; gap: 0.625rem; }
.work-avatar { width: 24px; height: 24px; border-radius: 50%; background: #131315; flex-shrink: 0; }
.work-copy h3 { font-size: 1rem; }
.tech-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.tech-tag { display: inline-flex; align-items: center; padding: 0.3rem 0.7rem; border-radius: 999px; background: none; border: 1px solid var(--hairline); color: var(--ink-secondary); font-size: 0.75rem; font-weight: 800; }

@media (max-width: 780px) {
  .contact-frame { grid-template-columns: 1fr; }
  .tile--contact-main { padding: 2.5rem; }
}

/* ---------- Numbered section headers ("01 Analysis" + description): match
   the homepage's .section-head ("My recent work" + intro line) exactly -
   same size, weight, color, left alignment instead of centered/pill. ---------- */
div:has(> div > span.chip > span.text-accent) {
  align-items: flex-start;
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
div:has(> div > span.chip > span.text-accent) > div > span.chip {
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  gap: 0.4rem;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.1;
}
div:has(> div > span.chip > span.text-accent) > div > span.chip > span.text-accent {
  font-weight: 300;
}
div:has(> div > span.chip > span.text-accent) > div:nth-child(2) > p {
  margin: 0.9rem 0 0;
  color: var(--ink-secondary);
  font-size: 1.0625rem;
  max-width: 56ch;
}

/* ---------- Project hero meta tags: same pill style as the homepage's
   .tech-tag (outline, no fill, ink-secondary), scaled up proportionally. ---------- */
li.chip {
  background: none;
  box-shadow: none;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink-secondary);
}

/* ---------- "Impact" meta tile: solid dark card instead of the orange gradient ---------- */
[class*="radial-gradient"] {
  background: #1D1D1F;
  box-shadow: none;
  color: #F5F5F7;
}
[class*="radial-gradient"] p {
  color: #F5F5F7;
}
[class*="radial-gradient"] .text-white {
  color: var(--accent);
}
[class*="radial-gradient"] .bg-white {
  background: var(--accent);
}

/* ---------- Footer: the exact same .site-footer the homepage uses (the
   markup itself now matches too -- a plain <footer class="site-footer
   container-x">), instead of patching the old exported Tailwind classes
   from a distance. ---------- */
.site-footer { display: flex; justify-content: space-between; align-items: center; padding-block: 2rem; border-top: 1px solid var(--hairline); color: var(--ink-secondary); font-size: 0.8125rem; }
@media (max-width: 640px) {
  .site-footer { flex-direction: column; text-align: center; gap: 0.75rem; }
}

/* ---------- Closing line under "Thank you.": a size step down from the
   exported clamp(1.375rem,2.5vw,2.25rem), which read too large/heavy for
   a one-line sign-off. ---------- */
[class*="text-[clamp(1.375rem,2.5vw,2.25rem)]"] { font-size: clamp(1.0625rem, 1.6vw, 1.375rem); }

/* ---------- "Thanks!" closing line: plain text, not a pill ---------- */
.container-x.mx-auto.flex.max-w-3xl.flex-col.items-center.pt-24.text-center > div > span.chip {
  display: inline;
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  color: var(--ink);
  font-size: clamp(1.375rem, 2.5vw, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
}

/* ---------- Phone-only fixes (real-device pass) ---------- */
@media (max-width: 639px) {
  /* Nav pill: the email link is hidden below sm (640px), so the
     pill is the only child left in a justify-between row, which
     reads as pinned to the left instead of centered. */
  nav.container-x.justify-between { justify-content: center; }

  /* Images/cards use the desktop --radius-lg (28px) corner
     everywhere; at phone width, where the images themselves are
     much smaller, that reads as oversized. Step down to the
     standard --radius (20px) used on regular tiles. */
  [class*="rounded-[1.75rem]"] { border-radius: 1.25rem; }
}