/* zaid.studio — growth design portfolio
   Mobile-up: base styles are the mobile experience.
   Wider breakpoints are enhancement only. */

:root {
  --bg: #F4FAEC;
  --surface: #FFFFFF;
  --ink: #0E2B30;
  --ink-soft: #2F4A4F;
  --accent: #BD243D;
  --blue: #03A9CD;
  --mint: #7EDDC7;
  --mint-pale: #CCFFE4;
  --rule: #D5E3D2;

  --step--1: 0.9375rem;
  --step-0: 1.0625rem;
  --step-1: 1.3125rem;
  --step-2: 1.625rem;
  --step-3: 2.0625rem;
  --step-4: clamp(2.25rem, 7vw, 3.5rem);

  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.75rem;
  --space-l: 3rem;
  --space-xl: 5rem;

  --wrap: 72rem;
  --measure: 36rem;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  font-feature-settings: "tnum" 0;
}

h1, h2, h3 {
  line-height: 1.15;
  letter-spacing: -0.018em;
  font-weight: 700;
  margin: 0 0 var(--space-s);
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

p, li { max-width: var(--measure); }
p { margin: 0 0 var(--space-s); }

a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

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

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--bg);
  padding: 0.75rem 1rem;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 50; }

/* Header */

.masthead {
  padding-block: var(--space-m) var(--space-s);
  border-bottom: 1px solid var(--rule);
}
.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: baseline;
  justify-content: space-between;
}
.wordmark {
  font-weight: 800;
  font-size: var(--step-0);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.nav { display: flex; flex-wrap: wrap; gap: 1.125rem; }
.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 600;
}
.nav a:hover, .nav a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Sections */

section { padding-block: var(--space-l); }
section.tight { padding-block: var(--space-m); }
.section-rule { border-top: 1px solid var(--rule); }

.lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 34rem; }

/* Hero */

.hero { padding-block: var(--space-l) var(--space-m); }
.hero h1 { max-width: 20ch; }
.hero .lede { margin-top: var(--space-s); }
.whereabouts {
  margin-top: var(--space-s);
  font-size: var(--step--1);
  color: var(--ink-soft);
  font-weight: 600;
}
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--space-m); }

.btn {
  display: inline-block;
  padding: 0.8rem 1.25rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: var(--step--1);
  text-decoration: none;
  background: var(--accent);
  color: #FFFFFF;
  border: 2px solid var(--accent);
}
.btn:hover { background: #A41E34; border-color: #A41E34; }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.secondary:hover { background: var(--ink); color: var(--bg); }

/* Results strip */

.results {
  display: grid;
  gap: var(--space-m);
  padding: var(--space-m);
  background: var(--mint-pale);
  border-radius: 10px;
}
.metric .figure {
  font-size: var(--step-3);
  font-weight: 800;
  color: var(--accent);
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.metric p { margin: 0.35rem 0 0; font-size: var(--step--1); color: var(--ink-soft); max-width: 26ch; }

/* Work list */

.project { padding-block: var(--space-m); border-top: 1px solid var(--rule); }
.project:first-of-type { border-top: 0; }
.project h3 { margin-bottom: 0.35rem; }
.project h3 a { color: var(--ink); text-decoration: none; }
.project h3 a:hover { box-shadow: inset 0 -3px 0 var(--accent); }
.project .meta { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: var(--space-s); }
.project .more { font-weight: 700; font-size: var(--step--1); }

/* Shots: device and screen placeholders */

.shot {
  background: var(--surface);
  border-radius: 8px;
  padding: 0.75rem;
  box-shadow: 0 10px 30px rgba(14, 43, 48, 0.08);
}
.shot .frame {
  background: linear-gradient(160deg, var(--mint-pale), var(--mint));
  border-radius: 4px;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  padding: var(--space-s);
}
.shot .frame span {
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  max-width: 26ch;
}
.shot figcaption {
  font-size: var(--step--1);
  color: var(--ink-soft);
  padding-top: 0.6rem;
}
.shot.phone .frame { aspect-ratio: 9 / 16; }

/* Variant comparison: the core experiment component */

.variants { display: grid; gap: var(--space-s); margin-block: var(--space-m); }
.variant {
  border-radius: 8px;
  padding: var(--space-s);
  background: var(--surface);
  border: 2px solid var(--rule);
}
.variant.control { border-color: var(--mint); }
.variant.test { border-color: var(--blue); }
.variant h4 {
  margin: 0 0 0.5rem;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
}
.variant p { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 0; }
.variant .frame {
  background: var(--mint-pale);
  border-radius: 4px;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  margin-bottom: 0.75rem;
  padding: var(--space-s);
  text-align: center;
  font-size: var(--step--1);
  font-weight: 600;
}
.variant.test .frame { background: #DCF2F8; }

/* Hypothesis and measurement blocks */

.hypothesis {
  border-left: 4px solid var(--blue);
  padding: var(--space-s) 0 var(--space-s) var(--space-s);
  margin-block: var(--space-m);
  background: var(--surface);
  border-radius: 0 8px 8px 0;
}
.hypothesis p:last-child { margin-bottom: 0; }

.measures { display: grid; gap: var(--space-s); margin-block: var(--space-m); }
.measure {
  padding: var(--space-s);
  background: var(--surface);
  border-radius: 8px;
}
.measure strong { display: block; font-size: var(--step--1); color: var(--ink-soft); }
.measure span { font-weight: 700; }

/* Snapshot table */

.snapshot { border-collapse: collapse; width: 100%; margin-block: var(--space-m); }
.snapshot th, .snapshot td {
  text-align: left;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  font-size: var(--step--1);
}
.snapshot th { width: 10rem; color: var(--ink-soft); font-weight: 600; }

/* Gap notice: honest marker for missing data */

.gap {
  background: #FDEEF1;
  border-radius: 8px;
  padding: var(--space-s);
  font-size: var(--step--1);
}
.gap p { margin-bottom: 0; }

/* Skills */

.skills { display: grid; gap: var(--space-m); }
.skills ul { list-style: none; margin: 0; padding: 0; }
.skills li { padding: 0.35rem 0; border-bottom: 1px solid var(--rule); font-size: var(--step--1); }

/* About */

.about { display: grid; gap: var(--space-m); }
.portrait {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--mint);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  padding: 0.5rem;
}

/* Teardown index */

.teardown-list { display: grid; gap: var(--space-s); list-style: none; padding: 0; margin: 0; }
.teardown-list li {
  background: var(--surface);
  border-radius: 8px;
  padding: var(--space-s);
  max-width: none;
}
.teardown-list h3 { margin-bottom: 0.25rem; }
.teardown-list p { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 0.5rem; }

/* Ranked test backlog */

.backlog { border-collapse: collapse; width: 100%; margin-block: var(--space-m); font-size: var(--step--1); }
.backlog th, .backlog td { text-align: left; padding: 0.7rem 0.5rem 0.7rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.backlog th { color: var(--ink-soft); font-weight: 600; }
.backlog td:last-child, .backlog th:last-child { text-align: right; padding-right: 0; font-feature-settings: "tnum" 1; }

/* Next link */

.next {
  display: block;
  padding: var(--space-m) 0;
  border-top: 1px solid var(--rule);
  font-size: var(--step-1);
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}
.next:hover { color: var(--accent); }
.next span { display: block; font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); }

/* Footer */

.colophon {
  border-top: 1px solid var(--rule);
  padding-block: var(--space-l);
  font-size: var(--step--1);
}
.colophon ul { list-style: none; padding: 0; margin: 0 0 var(--space-s); display: grid; gap: 0.5rem; }
.colophon .where { color: var(--ink-soft); }

/* Enhancement: tablet and up */

@media (min-width: 40em) {
  .results { grid-template-columns: repeat(3, 1fr); }
  .measures { grid-template-columns: repeat(2, 1fr); }
  .variants { grid-template-columns: 1fr 1fr; }
  .colophon ul { grid-auto-flow: column; justify-content: start; gap: 1.5rem; }
}

@media (min-width: 56em) {
  section { padding-block: var(--space-xl); }
  section.tight { padding-block: var(--space-l); }
  .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-l);
    align-items: center;
  }
  .row.wide-left { grid-template-columns: 1.3fr 1fr; }
  .skills { grid-template-columns: repeat(3, 1fr); }
  .about { grid-template-columns: 7rem 1fr; gap: var(--space-l); align-items: start; }
  .teardown-list { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: var(--step-4); }
}