/* ---------- Colors: white and light gray with purple ---------- */

:root {
  --bg: #f5f5f7;
  --card: #ffffff;
  --tint: #ececef;
  --ink: #121214;
  --muted: #5c5c66;
  --rule: #e2e2e6;
  --line: #cbcbd1;
  --shape: #e2e2e7;
  --shape-line: #c2c2ca;
  --accent: #6d28d9;
  --shadow: rgba(0, 0, 0, 0.12);
  --topbar: rgba(245, 245, 247, 0.85);
  --footer-bg: #121214;
  --footer-ink: #f5f5f7;
  --head: "Inter Tight", "Inter", system-ui, sans-serif;
  --sans: "Inter", system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Background shapes ----------
   Big gray shapes and thin outlines behind the page. Some run off the
   edge of the screen. They scroll with the page. script.js makes them
   float, and lets people drag them around. */

body { position: relative; }

.bg-shapes {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.bg-shapes span { position: absolute; display: block; }

/* Circles: solid gray dot or thin ring */
.dot { background: var(--shape); border-radius: 50%; }
.ring { border: 1px solid var(--shape-line); border-radius: 50%; }

/* Triangles: solid gray, or a thin outline drawn with a small picture */
.tri { background: var(--shape); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tri-line {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,1 99,99 1,99' fill='none' stroke='%23c2c2ca' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Solid gray square behind the photo, tipped and running off the right */
.shape-1 {
  top: -140px;
  right: -180px;
  width: 620px;
  height: 620px;
  background: var(--shape);
  --r: 24deg;
  transform: rotate(var(--r));
}

/* Outline square laid over it at a different angle */
.shape-2 {
  top: -40px;
  right: -60px;
  width: 560px;
  height: 560px;
  border: 1px solid var(--shape-line);
  --r: 9deg;
  transform: rotate(var(--r));
}

/* Large outline circle half off the left side */
.shape-3 {
  top: 1500px;
  left: -360px;
  width: 720px;
  height: 720px;
}

/* Long gray bar running off the right, lower down */
.shape-4 {
  top: 2700px;
  right: -260px;
  width: 760px;
  height: 260px;
  background: var(--shape);
  --r: -14deg;
  transform: rotate(var(--r));
}

/* Small outline square near the bottom left */
.shape-5 {
  top: 3800px;
  left: -90px;
  width: 300px;
  height: 300px;
  border: 1px solid var(--shape-line);
  --r: 32deg;
  transform: rotate(var(--r));
}

/* Solid gray circle in the bottom left of the first screen */
.shape-6 {
  top: calc(100vh - 220px);
  left: -170px;
  width: 380px;
  height: 380px;
}

/* Outline square in the bottom right of the first screen */
.shape-7 {
  top: calc(100vh - 200px);
  right: -130px;
  width: 340px;
  height: 340px;
  border: 1px solid var(--shape-line);
  --r: -18deg;
  transform: rotate(var(--r));
}

/* Thin outline circle partway down on the right */
.shape-8 {
  top: 2050px;
  right: -110px;
  width: 280px;
  height: 280px;
}

/* Solid gray square in the bottom left of the page */
.shape-9 {
  bottom: -160px;
  left: -180px;
  width: 460px;
  height: 460px;
  background: var(--shape);
  --r: 18deg;
  transform: rotate(var(--r));
}

/* Large outline circle in the bottom right of the page */
.shape-10 {
  bottom: -240px;
  right: -200px;
  width: 560px;
  height: 560px;
}

/* Solid gray square tipped off the top left */
.shape-11 {
  top: -150px;
  left: -190px;
  width: 400px;
  height: 400px;
  background: var(--shape);
  --r: -22deg;
  transform: rotate(var(--r));
}

/* Solid gray triangle off the left, below the first screen */
.shape-12 {
  top: 900px;
  left: -130px;
  width: 340px;
  height: 300px;
  --r: 15deg;
  transform: rotate(var(--r));
}

/* Outline triangle off the right, near the projects */
.shape-13 {
  top: 1250px;
  right: -90px;
  width: 280px;
  height: 250px;
  --r: -20deg;
  transform: rotate(var(--r));
}

/* Tall outline rectangle off the left */
.shape-14 {
  top: 2250px;
  left: -70px;
  width: 190px;
  height: 440px;
  border: 1px solid var(--shape-line);
  --r: 12deg;
  transform: rotate(var(--r));
}

/* Upside-down solid triangle off the right */
.shape-15 {
  top: 2450px;
  right: -150px;
  width: 400px;
  height: 340px;
  --r: 195deg;
  transform: rotate(var(--r));
}

/* Small outline triangle on the right */
.shape-16 {
  top: 3350px;
  right: -40px;
  width: 170px;
  height: 150px;
  --r: 35deg;
  transform: rotate(var(--r));
}

/* Wide solid rectangle off the left, lower down */
.shape-17 {
  top: 3300px;
  left: -220px;
  width: 540px;
  height: 170px;
  background: var(--shape);
  --r: 8deg;
  transform: rotate(var(--r));
}

/* Outline rectangle in the bottom right, above the big circle */
.shape-18 {
  bottom: 420px;
  right: -130px;
  width: 440px;
  height: 200px;
  border: 1px solid var(--shape-line);
  --r: -10deg;
  transform: rotate(var(--r));
}

/* Outline triangle off the top left of the first screen */
.shape-19 {
  top: 280px;
  left: -60px;
  width: 220px;
  height: 200px;
  --r: -8deg;
  transform: rotate(var(--r));
}

/* Small solid circle near the top left */
.shape-20 {
  top: 620px;
  left: 30px;
  width: 90px;
  height: 90px;
}

/* Small solid circle on the right, by the projects */
.shape-21 {
  top: 1700px;
  right: 30px;
  width: 120px;
  height: 120px;
}

/* Tiny solid circle on the left */
.shape-22 {
  top: 3050px;
  left: 20px;
  width: 70px;
  height: 70px;
}

/* Small solid circle on the right, lower down */
.shape-23 {
  top: 4300px;
  right: 40px;
  width: 100px;
  height: 100px;
}

/* Small ring on the left */
.shape-24 {
  top: 2600px;
  left: 30px;
  width: 130px;
  height: 130px;
}

/* Tiny ring on the left, lower down */
.shape-25 {
  top: 4750px;
  left: 50px;
  width: 80px;
  height: 80px;
}

/* Small solid triangle on the left */
.shape-26 {
  top: 1450px;
  left: 30px;
  width: 110px;
  height: 95px;
  --r: 25deg;
  transform: rotate(var(--r));
}

/* Small solid triangle on the right */
.shape-27 {
  top: 3650px;
  right: 40px;
  width: 130px;
  height: 115px;
  --r: -15deg;
  transform: rotate(var(--r));
}

/* Tiny solid triangle near the bottom left */
.shape-28 {
  top: 5250px;
  left: 40px;
  width: 90px;
  height: 80px;
  --r: 40deg;
  transform: rotate(var(--r));
}

/* Small outline triangle on the left */
.shape-29 {
  top: 2000px;
  left: 40px;
  width: 100px;
  height: 90px;
  --r: -30deg;
  transform: rotate(var(--r));
}

/* Small outline triangle on the right, lower down */
.shape-30 {
  top: 3950px;
  right: 50px;
  width: 120px;
  height: 105px;
  --r: 10deg;
  transform: rotate(var(--r));
}

/* Make the solid gray shapes a little lighter */
.shape-1, .shape-4, .shape-9, .shape-11, .shape-17, .dot, .tri { opacity: 0.85; }

@media (max-width: 640px) {
  .shape-11 { width: 260px; height: 260px; left: -150px; top: -110px; }
  .shape-6 { width: 240px; height: 240px; left: -130px; }
  .shape-7 { width: 220px; height: 220px; right: -110px; }
  .shape-1 { width: 380px; height: 380px; right: -200px; top: -80px; }
  .shape-2 { width: 340px; height: 340px; right: -150px; top: 0; }
  .shape-12 { width: 220px; height: 190px; left: -120px; }
  .shape-13 { width: 180px; height: 160px; right: -90px; }
  .shape-15 { width: 260px; height: 220px; right: -150px; }
  .shape-17 { width: 320px; height: 110px; left: -200px; }
  .shape-18 { width: 260px; height: 120px; right: -130px; }
  .shape-19 { width: 140px; height: 130px; left: -70px; }
}

/* Shapes can be grabbed where nothing else is on top of them */
body.over-shape { cursor: grab; }
body.moving-shape, body.moving-shape * { cursor: grabbing !important; user-select: none; }

/* Pushes the black banner to the bottom of the screen */
main { flex: 1; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--head);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
}

/* Keeps every part of the page in one column */
.nav, .banner, .section, .footer > * {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

.meta, .kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}

/* Box that stands in for a picture */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--tint);
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 12px;
}

.placeholder.tall { aspect-ratio: 4 / 5; }

/* A real project image, same size as the placeholder it replaces */
.project-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Show the whole image (for tall logos) on a white background */
.project-img.fit { object-fit: contain; background: #fff; }

/* Show the whole image on a dark background (for dark screenshots) */
.project-img.fit-dark { object-fit: contain; background: #1d1d1d; }

/* ---------- Pop-out cards ----------
   On hover a card lifts up and to the left, showing a solid purple
   block behind it and a soft shadow underneath. */

.project,
.small-projects li,
.quotes .quote,
.callout,
.contact-list a,
.gallery .placeholder,
.gallery img {
  position: relative;
  background: var(--card);
  border: 1px solid var(--rule);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.project:hover,
.small-projects li:hover,
.quotes .quote:hover,
.callout:hover,
.contact-list a:hover,
.gallery .placeholder:hover,
.gallery img:hover {
  transform: translate(-10px, -10px);
  box-shadow:
    10px 10px 0 var(--accent),
    0 30px 60px var(--shadow);
}

.gallery .placeholder { background: var(--tint); border-style: dashed; border-color: var(--line); }

/* Photos in a row, all the same size */
.gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* For wide photos where the important part is on the left */
.gallery img.keep-left { object-position: left; }

/* A photo that links somewhere */
.gallery a { display: block; }

/* For photos that should show in full, with no edges cut off */
.gallery img.show-all { object-fit: contain; background: #ffffff; }

/* A wide banner that fills the whole row, shown in full */
.gallery .wide { grid-column: 1 / -1; }
.gallery .wide img { aspect-ratio: auto; }

/* A link under a row of photos */
.gallery-link { margin-top: 14px; }

/* ---------- Top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 0 16px;
  background: var(--topbar);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.nav {
  display: flex;
  align-items: center;
  gap: 12px 24px;
  padding: 14px 0;
}

.nav-name {
  font-family: var(--head);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.03em;
  text-decoration: none;
  margin-right: auto;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
}

.nav-links a { text-decoration: none; color: var(--muted); }
.nav-links a:hover { color: var(--accent); }

/* ---------- Hero ---------- */

.banner { padding: 0 16px; width: 100%; }

.hero {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: center;
  padding: 64px 0;
  border-bottom: 1px solid var(--rule);
}

.hero h1 { font-size: 46px; }
.hero h1 em { font-style: normal; color: var(--accent); }

.lede { margin: 16px 0 0; color: var(--muted); max-width: 60ch; }

/* Photo sits on a purple block, offset like a lifted card */
.hero-photo {
  margin: 0;
  box-shadow: 10px 10px 0 var(--tint), 10px 10px 0 1px var(--line);
}

.hero-photo .placeholder { background: var(--card); border: 1px solid var(--rule); }

.hero-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--rule);
}

/* ---------- Sections ---------- */

.section {
  padding: 56px 16px;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 64px;
}

.section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

/* Section number as a small solid square */
.num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  background: var(--tint);
  color: var(--ink);
  border: 1px solid var(--line);
  font-family: var(--head);
  font-weight: 700;
  font-size: 14px;
}

.section-head h2 { font-size: 32px; }

.section-head p { margin: 0 0 0 auto; color: var(--muted); font-size: 14px; }

/* ---------- Project list ---------- */

.projects {
  display: grid;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.project {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: start;
  padding: 24px;
}

.project h3 { font-size: 26px; margin-bottom: 8px; }

.project p { margin: 0 0 8px; }

/* A number worth calling out, like user count */
.stat { color: var(--muted); font-size: 15px; }
.stat strong { color: var(--accent); font-family: var(--head); font-size: 20px; letter-spacing: -0.02em; }

/* Smaller projects: square cards, four in a row. Each is a quarter of the
   width of a big project card. The link sits at the bottom. */
.sub-head { font-size: 22px; margin: 40px 0 16px; }

.small-projects {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.small-projects li {
  display: flex;
  flex-direction: column;
  aspect-ratio: 1;
  padding: 18px;
}

/* ---------- Project search ---------- */

.project-search { margin: 0 0 24px; }

.project-search input {
  width: 100%;
  max-width: 420px;
  padding: 12px 16px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  font: 16px var(--sans);
}

.project-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.no-results { margin: 12px 0 0; color: var(--muted); }

/* Projects hidden by the search */
.no-match { display: none !important; }

.small-projects h4 {
  font-family: var(--head);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}

.small-projects h4 + p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.42; }
.small-projects .link { align-self: flex-start; margin-top: auto; padding-top: 10px; }

.link {
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
  text-decoration: none;
}

.link:hover { text-decoration: underline; }

/* ---------- Text sections ---------- */

.big {
  font-family: var(--head);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin: 0 0 20px;
  max-width: 40ch;
}

.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.columns p { margin: 0; color: var(--muted); }

/* Row of picture spots under a section */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px;
}

.callout {
  padding: 16px 18px;
  border-left: 3px solid var(--line);
}

.callout p:last-child { color: var(--ink); }

/* A person, in the middle of the page: round photo on the left,
   their quote on the right, signed with their name and titles */
.person {
  display: grid;
  grid-template-columns: auto minmax(0, 620px);
  justify-content: center;
  align-items: center;
  gap: 48px;
  margin-top: 56px;
}

.person-photo {
  display: block;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  object-fit: cover;
}

.person-quote {
  margin: 0;
  font-family: var(--head);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* The signature: a purple line, then name and titles */
.person-sign {
  margin-top: 20px;
  padding-left: 14px;
  border-left: 3px solid var(--accent);
}

.person h4 {
  font-family: var(--head);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}

.person-roles {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- Quotes ---------- */

.quote {
  margin: 12px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--line);
}

.quote cite {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 13px;
  color: var(--muted);
}

.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.quotes .quote {
  margin: 0;
  padding: 20px;
  border-left: 3px solid var(--line);
}

/* ---------- Contact ---------- */

.contact-list {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-list a {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 20px 24px;
  text-decoration: none;
}

.contact-value {
  font-family: var(--head);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.03em;
}

.arrow { color: var(--accent); transition: transform 0.2s ease; }

.contact-list a:hover .contact-value { color: var(--accent); }
.contact-list a:hover .arrow { transform: translateX(4px); }

/* Shown in place of the arrow after the email is copied */
.contact-list a.copied .arrow { font-size: 0; transform: none; }
.contact-list a.copied .arrow::after {
  content: 'Copied to clipboard ✓';
  font-size: 14px;
  font-weight: 600;
}

/* ---------- Footer ---------- */

.footer {
  padding: 20px 16px;
  background: var(--footer-bg);
  color: var(--footer-ink);
}

.small { font-size: 12px; opacity: 0.7; margin-top: 0; margin-bottom: 0; }

/* ---------- Tablet ---------- */

@media (max-width: 1140px) {
  .small-projects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .small-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Phone ---------- */

@media (max-width: 640px) {
  .hero, .project, .columns, .quotes { grid-template-columns: 1fr; }
  .small-projects { grid-template-columns: 1fr; }
  .small-projects li { aspect-ratio: auto; }
  .person { grid-template-columns: 1fr; gap: 20px; }
  .person-photo { width: 112px; height: 112px; }
  .person-quote { font-size: 19px; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 34px; }
  .hero-photo { max-width: 220px; }
  .project .placeholder { max-width: 100%; }
  .nav { flex-wrap: wrap; }
  .nav-links { order: 3; width: 100%; }
  .section { scroll-margin-top: 100px; }
  .contact-list a { grid-template-columns: 1fr auto; }
  .contact-list .meta { grid-column: 1 / -1; }
  .contact-value { font-size: 20px; }
}

/* Turn off the lift motion for people who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Edit mode ---------- */

.edit-area { display: flex; align-items: center; gap: 12px; }

.edit-status { font-size: 13px; color: var(--muted); }

.edit-btn {
  padding: 7px 14px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  font: 600 14px var(--sans);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.edit-btn:hover {
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 var(--accent);
}

.editing .edit-btn { background: var(--accent); border-color: var(--accent); color: #fff; }

.editing [contenteditable]:hover { outline: 1px dashed var(--accent); outline-offset: 3px; cursor: text; }
.editing [contenteditable]:focus { outline: 2px solid var(--accent); outline-offset: 3px; }