/* ==========================================================================
   Ella Tran — Portfolio stylesheet
   --------------------------------------------------------------------------
   One shared file for every page. Sections, in order:
     1.  Design tokens (colors, fonts, spacing) — change the look here
     2.  Base and typography
     3.  Accessibility helpers (skip link, focus, placeholders)
     4.  Site header and navigation
     5.  Layout helpers (container, sections, torn edges)
     6.  Decorations (polaroids, tape, stamps, notes, pull quotes)
     7.  Buttons and links
     8.  Home page
     9.  Project cards (Home and Work)
     10. About page
     11. Project pages (header, gallery, blocks, sidebar, pager)
     12. Skills page and certifications
     13. Contact page
     14. Footer
     15. Lightbox
     16. Motion (scroll reveal, page fade, hover)
     17. Responsive breakpoints
   ========================================================================== */


/* 1. DESIGN TOKENS ======================================================== */
:root {
  /* Palette */
  --burgundy: #6D1F2F;
  --burgundy-deep: #561724;
  --espresso: #3B2418;
  --ivory: #F6ECE6;
  --blush: #EFDCD3;
  --ink: #1F1411;
  --paper: #FCF8F5;          /* photo borders, cards */
  --sage: #5A6447;           /* muted accent: stamps and small labels only */
  --muted: #5E4A40;          /* secondary text, passes AA on ivory and blush */
  --rule: rgba(59, 36, 24, 0.22);
  --tape: rgba(222, 196, 170, 0.72);

  /* Fonts */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-type: "Courier Prime", "Courier New", monospace;
  --font-hand: "Caveat", "Segoe Print", cursive;

  /* Spacing scale (8px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;

  /* Layout */
  --page-width: 72rem;
  --text-width: 40rem;
  --gutter: 1rem;
  --header-height: 4rem;

  /* Effects */
  --shadow-print: 0 1px 2px rgba(31, 20, 17, 0.12), 0 6px 18px rgba(31, 20, 17, 0.1);
  --shadow-lift: 0 2px 4px rgba(31, 20, 17, 0.12), 0 16px 34px rgba(31, 20, 17, 0.16);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Paper grain (tiny inline SVG noise, no image file) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.23 0 0 0 0 0.14 0 0 0 0 0.09 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Torn paper edge (used as a mask) */
  --torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24 L0 9 L12 10 L21 5 L46 5 L72 5 L96 7 L106 10 L116 7 L141 10 L167 6 L182 13 L208 17 L234 12 L243 18 L252 12 L264 8 L276 12 L302 8 L315 5 L341 13 L360 5 L370 12 L384 11 L409 10 L427 11 L449 9 L464 15 L479 5 L496 11 L514 14 L531 13 L541 6 L562 6 L580 6 L603 10 L613 15 L639 15 L657 9 L676 12 L702 15 L712 16 L728 11 L738 5 L755 13 L777 8 L797 16 L816 4 L838 9 L849 11 L863 15 L875 14 L895 9 L918 5 L940 10 L956 16 L977 16 L993 14 L1012 14 L1032 17 L1044 5 L1056 7 L1071 4 L1097 7 L1114 4 L1135 11 L1161 8 L1173 14 L1197 17 L1200 10 L1200 24Z'/%3E%3C/svg%3E");
}


/* 2. BASE AND TYPOGRAPHY ================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--ivory);
  background-image: var(--grain);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

main {
  flex: 1;
}

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

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  color: var(--espresso);
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 7vw, 4.75rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h3 { font-size: 1.375rem; }

p {
  margin: 0 0 var(--space-4);
  max-width: var(--text-width);
}

a {
  color: var(--burgundy);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--burgundy-deep);
  text-decoration-thickness: 2px;
}

ul,
ol {
  padding-left: 1.25rem;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-7) 0;
}

/* Small typewriter label, used for eyebrows and captions */
.label {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-type);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.lede {
  font-size: 1.1875rem;
  line-height: 1.6;
}


/* 3. ACCESSIBILITY HELPERS ================================================ */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -4rem;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--espresso);
  color: var(--ivory);
  font-family: var(--font-type);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-3);
  color: var(--ivory);
}

:focus-visible {
  outline: 3px solid var(--burgundy);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Placeholder blocks: impossible to miss, easy to find.
   Delete the class (or the whole element) once you add your real content. */
.placeholder {
  display: block;
  max-width: var(--text-width);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1.5px dashed var(--burgundy);
  background: rgba(252, 248, 245, 0.85);
  color: var(--burgundy);
  font-family: var(--font-type);
  font-size: 0.9375rem;
  line-height: 1.5;
}

span.placeholder {
  display: inline;
  padding: 0.1em 0.35em;
  margin: 0;
}

/* An empty frame that stands in for a photo you still need to add */
.photo-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  padding: var(--space-4);
  background:
    repeating-linear-gradient(-45deg, transparent 0 10px, rgba(109, 31, 47, 0.06) 10px 11px),
    var(--blush);
  color: var(--burgundy);
  font-family: var(--font-type);
  font-size: 0.875rem;
  text-align: center;
}


/* 4. SITE HEADER AND NAVIGATION =========================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 236, 230, 0.94);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-style: italic;
  font-weight: 500;
  color: var(--espresso);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark:hover {
  color: var(--burgundy);
  text-decoration: none;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--espresso);
  background: transparent;
  color: var(--espresso);
  font-family: var(--font-type);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-toggle__bars {
  position: relative;
  width: 16px;
  height: 10px;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  border-bottom-color: transparent;
}

.site-nav ul {
  display: flex;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  padding: var(--space-2) 0;
  font-family: var(--font-type);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--espresso);
}

.site-nav a:hover {
  color: var(--burgundy);
}

/* Current page: burgundy with a hand-drawn underline */
.site-nav a[aria-current] {
  color: var(--burgundy);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C 22 2, 45 7, 66 4 S 92 3, 98 5' fill='none' stroke='%236D1F2F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom / 100% 6px;
}


/* 5. LAYOUT HELPERS ======================================================= */
.container {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding-block: var(--space-8);
}

.section--tight {
  padding-block: var(--space-6);
}

/* A blush band with torn top and bottom edges */
.band {
  position: relative;
  background: var(--blush);
  margin: var(--space-5) 0;
}

.band::before,
.band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 18px;
  background: var(--blush);
  -webkit-mask: var(--torn) no-repeat center / 100% 100%;
  mask: var(--torn) no-repeat center / 100% 100%;
}

.band::before { bottom: 100%; }
.band::after  { top: 100%; transform: scaleY(-1) scaleX(-1); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
}

.section-head h2 {
  margin: 0;
}

/* Page title area at the top of About, Work, Skills, and Contact */
.page-head {
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--rule);
}

.page-head p:last-child {
  margin-bottom: 0;
}

.section-head a,
.section-head .label {
  font-family: var(--font-type);
  font-size: 0.875rem;
}


/* 6. DECORATIONS ========================================================== */

/* Polaroid frame */
.polaroid {
  position: relative;
  margin: 0;
  padding: 0.75rem 0.75rem 0;
  background: var(--paper);
  box-shadow: var(--shadow-print);
  transform: rotate(var(--tilt, -2deg));
}

.polaroid figcaption {
  padding: var(--space-3) var(--space-1) var(--space-4);
  font-family: var(--font-hand);
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--espresso);
  text-align: center;
}

.polaroid figcaption .placeholder {
  font-family: var(--font-type);
  font-size: 0.8125rem;
}

/* A strip of tape. Add class="tape" to any positioned element's child. */
.tape {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 96px;
  height: 26px;
  background: var(--tape);
  transform: translateX(-50%) rotate(-3deg);
  clip-path: polygon(3% 0, 97% 4%, 100% 30%, 96% 55%, 100% 100%, 2% 96%, 0 60%, 4% 35%);
  pointer-events: none;
}

.tape--left  { left: 18%; transform: translateX(-50%) rotate(-8deg); }
.tape--right { left: 82%; transform: translateX(-50%) rotate(6deg); }

/* Ink stamp (text in a double border) */
.stamp {
  display: inline-block;
  padding: 0.35em 0.7em;
  border: 2px solid currentColor;
  outline: 1px solid currentColor;
  outline-offset: 2px;
  color: var(--sage);
  font-family: var(--font-type);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(-4deg);
  opacity: 0.9;
}

.stamp--burgundy { color: var(--burgundy); }

/* Handwritten margin note */
.note {
  font-family: var(--font-hand);
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--burgundy);
  transform: rotate(-3deg);
}

.note .placeholder {
  font-size: 0.8125rem;
}

/* Pull quote */
.pull-quote {
  margin: var(--space-7) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-left: 3px solid var(--burgundy);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-style: italic;
  line-height: 1.3;
  color: var(--espresso);
}

.pull-quote p {
  margin: 0;
}

.pull-quote .placeholder {
  font-style: normal;
}


/* 7. BUTTONS AND LINKS ==================================================== */
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-5);
  border: 1.5px solid var(--burgundy);
  background: var(--burgundy);
  color: var(--ivory);
  font-family: var(--font-type);
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, transform 0.2s var(--ease);
}

.button:hover {
  background: var(--burgundy-deep);
  color: var(--ivory);
  text-decoration: none;
  transform: translateY(-2px);
}

.button--ghost {
  background: transparent;
  color: var(--burgundy);
}

.button--ghost:hover {
  background: var(--burgundy);
  color: var(--ivory);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Arrow link: "View project →" */
.arrow-link {
  font-family: var(--font-type);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.arrow-link::after {
  content: " \2192";
}


/* 8. HOME PAGE ============================================================ */
.hero {
  position: relative;
  padding-block: var(--space-7) var(--space-5);
}

/* Magazine-style top line: "Portfolio ———— Vol. 01" */
.masthead-line {
  max-width: none;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  font-family: var(--font-type);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.masthead-line::before {
  content: "";
  order: 1;
  flex: 1;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  height: 4px;
}

.masthead-line span:last-child {
  order: 2;
}

.hero__grid {
  display: grid;
  gap: var(--space-7);
}

.hero h1 {
  margin-bottom: var(--space-5);
  font-size: clamp(3.5rem, 13vw, 7.5rem);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.02em;
}

.hero h1 em {
  display: block;
  color: var(--burgundy);
  font-weight: 400;
}

.hero__tagline {
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-style: italic;
  color: var(--espresso);
}

.hero__photo {
  position: relative;
  max-width: 22rem;
  margin: 0 auto;
}

.hero__photo .note {
  margin: var(--space-4) 0 0 var(--space-5);
}

/* Draggable sticker on the home page (desktop only, see main.js) */
.sticker {
  display: none;
  position: absolute;
  z-index: 5;
  width: 128px;
  height: 128px;
  color: var(--burgundy);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.sticker svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 4px rgba(31, 20, 17, 0.18));
}

.sticker.is-ready {
  display: block;
  cursor: grab;
}

.sticker.is-dragging {
  cursor: grabbing;
}

.sticker.is-dragging svg {
  filter: drop-shadow(0 10px 12px rgba(31, 20, 17, 0.22));
}

/* "Get in touch" strip at the bottom of Home and About */
.cta-strip {
  text-align: center;
}

.cta-strip h2 {
  margin-bottom: var(--space-3);
}

.cta-strip p {
  margin-left: auto;
  margin-right: auto;
}

.cta-strip .button-row {
  justify-content: center;
}


/* 9. PROJECT CARDS ======================================================== */
.card-grid {
  display: grid;
  gap: var(--space-7);
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-card {
  position: relative;
  padding: 0.75rem 0.75rem var(--space-5);
  background: var(--paper);
  box-shadow: var(--shadow-print);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.project-card__image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--blush);
}

.project-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.project-card__body {
  padding: var(--space-4) var(--space-2) 0;
}

.project-card__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  font-family: var(--font-type);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.project-card h3 {
  margin-bottom: var(--space-2);
}

/* The title link stretches over the whole card so the card is clickable */
.project-card h3 a {
  color: inherit;
  text-decoration: none;
}

.project-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.project-card h3 a:focus-visible {
  outline: none;
}

.project-card:has(h3 a:focus-visible) {
  outline: 3px solid var(--burgundy);
  outline-offset: 4px;
}

.project-card__summary {
  font-size: 1rem;
}

.project-card__more {
  display: inline-block;
  margin-top: var(--space-2);
  color: var(--burgundy);
}

.project-card:hover .project-card__more {
  text-decoration: underline;
}

/* Work page: wide cards, image beside text */
.work-list {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.work-item {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.work-item__image {
  position: relative;
  max-width: 26rem;
  padding: 0.75rem;
  background: var(--paper);
  box-shadow: var(--shadow-print);
  transform: rotate(var(--tilt, -1.5deg));
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.work-item__image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top;
}

/* Project titles on the Work page are links that look like headings */
.heading-link {
  color: inherit;
  text-decoration: none;
}

.heading-link:hover {
  color: var(--burgundy);
  text-decoration: underline;
}

.work-item__number {
  display: block;
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-style: italic;
  line-height: 1;
  color: var(--burgundy);
  opacity: 0.85;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.tag-list li {
  padding: 0.15em 0.6em;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-family: var(--font-type);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--espresso);
}


/* 10. ABOUT PAGE ========================================================== */
.about-grid {
  display: grid;
  gap: var(--space-7);
}

.about-photo {
  position: relative;
  align-self: start;
  max-width: 20rem;
  margin: var(--space-4) auto 0;
}

.about-photo .stamp {
  position: absolute;
  right: -0.5rem;
  bottom: 3.5rem;
  z-index: 2;
  background: rgba(252, 248, 245, 0.85);
}

.story h2 {
  margin-top: var(--space-7);
}

.story h2:first-child {
  margin-top: 0;
}


/* 11. PROJECT PAGES ======================================================= */
.breadcrumb {
  margin-bottom: var(--space-5);
  font-family: var(--font-type);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--muted);
}

.breadcrumb [aria-current="page"] {
  color: var(--muted);
}

.project-head {
  padding-block: var(--space-7) var(--space-6);
}

.project-head__number {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--burgundy);
}

.project-head .lede {
  margin-bottom: var(--space-5);
}

/* Facts row: Role / Timeline / Platforms */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-4);
  max-width: 48rem;
  margin: var(--space-5) 0 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.facts dt {
  font-family: var(--font-type);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.facts dd {
  margin: var(--space-1) 0 0;
}

.facts .placeholder {
  font-size: 0.8125rem;
  padding: 0.1em 0.35em;
}

/* Big link out to an external site */
.site-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: 48rem;
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1.5px solid var(--burgundy);
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--blush);
}

.site-link p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
}

/* Gallery of prints */
.gallery-group + .gallery-group {
  margin-top: var(--space-7);
}

.gallery-group > .label {
  margin-bottom: var(--space-5);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery li {
  min-width: 0;
}

.gallery .print--wide {
  grid-column: 1 / -1;
}

.print {
  display: block;
  padding: 0.5rem;
  background: var(--paper);
  box-shadow: var(--shadow-print);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  cursor: zoom-in;
}

.print img {
  width: 100%;
}

/* A tiny, irregular tilt so the prints feel hand-placed */
.gallery li:nth-child(4n + 1) { --tilt: -1.2deg; }
.gallery li:nth-child(4n + 2) { --tilt: 0.8deg; }
.gallery li:nth-child(4n + 3) { --tilt: -0.4deg; }
.gallery li:nth-child(4n + 4) { --tilt: 1.4deg; }

/* Video card: links out to a video on Instagram */
.reel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  aspect-ratio: 4 / 5;
  padding: var(--space-4);
  border: 0.5rem solid var(--paper);
  background: var(--espresso);
  color: var(--ivory);
  text-decoration: none;
  box-shadow: var(--shadow-print);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.reel:hover {
  color: var(--ivory);
}

.reel__play {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.reel__play svg {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 3px;
}

.reel:hover .reel__play {
  background: var(--burgundy);
  border-color: var(--burgundy);
}

.reel__title {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.2;
}

.reel__meta {
  display: block;
  font-family: var(--font-type);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: #E9D9D0;
}

.reel:focus-visible {
  outline-offset: 4px;
}

/* Newspaper clipping: an article you wrote.
   The clipping is newsprint with hand-cut (jagged) edges; the grey lines in
   two columns stand in for the article text. */
.clipping-wrap {
  position: relative;
  margin: var(--space-7) 0 0;
  transform: rotate(-1.5deg);
  filter: drop-shadow(0 2px 2px rgba(31, 20, 17, 0.14)) drop-shadow(0 8px 14px rgba(31, 20, 17, 0.12));
  transition: transform 0.35s var(--ease);
}

.clipping-wrap .tape {
  z-index: 2;
  top: -10px;
}

.clipping {
  position: relative;
  padding: var(--space-5) var(--space-5) var(--space-6);
  background-color: #EEE8DA;
  background-image: var(--grain);
  color: var(--ink);
  clip-path: polygon(0.0% 0.7%, 3.7% 1.5%, 7.1% 0.8%, 10.8% 0.3%, 14.4% 1.0%, 18.8% 0.2%, 21.7% 0.1%, 26.1% 1.1%, 28.2% 1.6%, 33.1% 1.0%, 37.0% 0.3%, 39.0% 0.8%, 41.2% 0.3%, 43.9% 0.0%, 47.3% 0.7%, 51.8% 0.8%, 55.7% 0.8%, 59.7% 0.7%, 62.6% 1.6%, 67.6% 1.3%, 71.7% 0.5%, 74.4% 0.5%, 76.6% 1.2%, 79.8% 1.4%, 82.9% 1.5%, 87.5% 0.0%, 90.1% 1.5%, 93.5% 1.6%, 96.7% 0.1%, 99.3% 2.0%, 99.9% 7.3%, 99.1% 13.0%, 99.9% 20.8%, 99.9% 26.0%, 99.3% 30.3%, 99.5% 35.2%, 99.8% 41.5%, 99.9% 49.1%, 99.9% 56.3%, 99.8% 62.4%, 99.1% 67.8%, 99.7% 75.8%, 99.8% 84.2%, 99.2% 90.2%, 99.9% 97.4%, 100.0% 99.7%, 97.2% 98.8%, 94.2% 99.5%, 92.0% 99.9%, 88.3% 99.6%, 84.5% 99.4%, 81.1% 98.5%, 77.7% 99.1%, 73.1% 99.7%, 70.6% 98.5%, 66.1% 99.6%, 63.6% 98.8%, 58.7% 99.7%, 53.9% 98.6%, 50.1% 99.3%, 47.8% 99.9%, 42.9% 99.6%, 38.8% 99.6%, 34.3% 99.0%, 31.4% 99.7%, 27.3% 99.9%, 24.6% 99.1%, 20.0% 99.0%, 17.2% 98.5%, 14.6% 100.0%, 11.8% 99.3%, 9.6% 99.7%, 6.5% 99.1%, 4.1% 99.4%, 0.9% 98.0%, 0.6% 90.7%, 0.1% 83.8%, 0.0% 79.6%, 0.6% 71.1%, 0.0% 62.3%, 0.4% 55.1%, 0.3% 47.4%, 0.1% 38.4%, 0.7% 31.7%, 0.7% 23.2%, 0.7% 15.7%, 0.3% 7.1%);
}

.clipping__masthead {
  margin: 0;
  padding: var(--space-1) 0;
  border-top: 1px solid var(--ink);
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--ink);
}

.clipping__dateline {
  display: flex;
  justify-content: space-between;
  margin: 0 0 var(--space-3);
  padding: 0.15rem 0;
  border-top: 3px double var(--ink);
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-type);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.clipping__headline {
  margin: 0 0 var(--space-2);
  font-size: 1.4375rem;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.005em;
}

.clipping__headline a {
  color: var(--ink);
  text-decoration: none;
}

/* The whole clipping is clickable */
.clipping__headline a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.clipping__headline a:focus-visible {
  outline: none;
}

.clipping-wrap:has(a:focus-visible) {
  outline: 3px solid var(--burgundy);
  outline-offset: 6px;
}

.clipping__byline {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(31, 20, 17, 0.35);
  font-family: var(--font-type);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.clipping__body {
  columns: 2;
  column-gap: var(--space-4);
  column-rule: 1px solid rgba(31, 20, 17, 0.2);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

.clipping__line {
  display: block;
  height: 4px;
  margin: 0 0 8px;
  background: rgba(31, 20, 17, 0.22);
}

.clipping__line:nth-child(4n + 2) { width: 92%; }
.clipping__line:nth-child(5n) { width: 70%; }

.clipping-caption {
  margin-top: var(--space-3);
  font-family: var(--font-type);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-align: right;
  text-transform: uppercase;
  color: var(--burgundy);
}

@media (hover: hover) and (pointer: fine) {
  .clipping-wrap:hover {
    transform: rotate(0deg) translateY(-4px);
  }

  .clipping-wrap:hover .clipping-caption {
    text-decoration: underline;
  }
}

/* Spotlight: a closer look at one part of a project */
.spotlight-band {
  margin: var(--space-7) 0;
}

.spotlight {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.spotlight__text p:last-child {
  margin-bottom: 0;
}

.spotlight__card {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--paper);
  box-shadow: var(--shadow-print);
}

.spotlight__card .stamp {
  position: absolute;
  top: calc(var(--space-4) * -1);
  right: var(--space-4);
  background: var(--paper);
}

.spotlight__card h3.label {
  margin-bottom: var(--space-2);
}

.spotlight__card ul {
  margin: 0 0 var(--space-5);
  padding-left: 1.1rem;
}

.spotlight__card p {
  margin-bottom: var(--space-5);
}

@media (min-width: 1024px) {
  .spotlight {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--space-8);
  }
}

.print-caption {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-type);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Goal / What I made / What happened / Next time + sidebar */
.project-body {
  display: grid;
  gap: var(--space-7);
}

.story-block {
  position: relative;
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}

.story-block + .story-block {
  margin-top: var(--space-7);
}

.story-block h2 {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
}

.story-block h2 .label {
  margin: 0;
  color: var(--burgundy);
}

.sidebar {
  align-self: start;
}

.sidebar-card {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--paper);
  box-shadow: var(--shadow-print);
  /* faint ruled lines, like an index card */
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(109, 31, 47, 0.08) 31px 32px);
  background-position: 0 3.4rem;
}

.sidebar-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 3rem;
  border-top: 1.5px solid rgba(109, 31, 47, 0.35);
}

.sidebar-card h2 {
  margin-bottom: var(--space-5);
  font-family: var(--font-type);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--burgundy);
}

.sidebar-card ul {
  margin: 0;
  padding-left: 1.1rem;
}

.sidebar-card li + li {
  margin-top: var(--space-2);
}

/* "By the numbers" list */
.numbers {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.numbers div {
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--space-3);
}

.numbers dt {
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--burgundy);
}

.numbers dd {
  margin: var(--space-1) 0 0;
  font-size: 0.9375rem;
}

/* Next project / Back to Work */
.pager {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}

.pager a {
  display: block;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--rule);
  background: var(--paper);
  text-decoration: none;
  transition: border-color 0.2s, transform 0.25s var(--ease);
}

.pager a:hover {
  border-color: var(--burgundy);
  transform: translateY(-2px);
}

.pager .label {
  margin-bottom: var(--space-1);
}

.pager__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--espresso);
}

.pager__next {
  text-align: right;
}


/* 12. SKILLS PAGE AND CERTIFICATIONS ====================================== */
.skill-grid {
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each skill group looks like a library catalog card */
.catalog-card {
  position: relative;
  height: 100%;
  padding: var(--space-5);
  background-color: var(--paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(109, 31, 47, 0.09) 31px 32px);
  background-position: 0 4.6rem;
  box-shadow: var(--shadow-print);
}

.catalog-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 4.25rem;
  border-top: 1.5px solid rgba(109, 31, 47, 0.4);
}

.catalog-card h3 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  min-height: 2.25rem;
}

.catalog-card h3 .label {
  margin: 0;
  color: var(--burgundy);
}

.catalog-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-type);
  font-size: 0.9375rem;
  line-height: 2rem;
}

.catalog-card li .placeholder {
  font-size: 0.8125rem;
}

.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Certification card: a small certificate with a seal */
.cert-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border: 1px solid var(--rule);
  outline: 1px solid var(--rule);
  outline-offset: -7px;
  background: var(--paper);
  box-shadow: var(--shadow-print);
}

.cert-card__seal {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 34px;
  height: 34px;
  color: var(--burgundy);
  opacity: 0.85;
}

.cert-card h3 {
  margin: var(--space-2) var(--space-7) var(--space-3) 0;
  font-size: 1.1875rem;
}

.cert-card dl {
  margin: auto 0 0;
  font-size: 0.9375rem;
}

.cert-card dl div {
  display: flex;
  gap: var(--space-2);
}

.cert-card dt {
  min-width: 4.5rem;
  font-family: var(--font-type);
  font-size: 0.75rem;
  line-height: 1.9;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.cert-card dd {
  margin: 0;
  min-width: 0;
}

/* Long credential IDs wrap instead of overflowing the card */
.cert-card__id {
  font-family: var(--font-type);
  font-size: 0.75rem;
  line-height: 1.9;
  overflow-wrap: anywhere;
}

.cert-card a {
  margin-top: var(--space-3);
  font-family: var(--font-type);
  font-size: 0.8125rem;
}

.cert-card .is-placeholder {
  color: var(--burgundy);
  font-family: var(--font-type);
  font-size: 0.8125rem;
}


/* 13. CONTACT PAGE ======================================================== */
.postcard {
  position: relative;
  display: grid;
  gap: var(--space-6);
  max-width: 54rem;
  margin: var(--space-6) auto 0;
  padding: var(--space-6) var(--space-5);
  background: var(--paper);
  box-shadow: var(--shadow-lift);
  transform: rotate(-0.6deg);
}

.postcard__message h2 {
  font-style: italic;
}

.postcard__stamp {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 72px;
  height: 88px;
  padding: 5px;
  background:
    radial-gradient(circle, transparent 3px, var(--paper) 3.5px) -5px -5px / 10px 10px;
  border: 0;
}

.postcard__stamp-inner {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--burgundy);
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-style: italic;
}

.postmark {
  position: absolute;
  top: 3.25rem;
  right: 4.5rem;
  width: 92px;
  height: 92px;
  color: var(--espresso);
  opacity: 0.4;
  transform: rotate(-12deg);
  pointer-events: none;
}

.contact-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-lines li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
}

.contact-lines .label {
  margin-bottom: var(--space-1);
}

.contact-lines a {
  font-size: 1.125rem;
  overflow-wrap: anywhere;
}


/* 14. FOOTER ============================================================== */
.site-footer {
  position: relative;
  margin-top: var(--space-8);
  padding: var(--space-7) 0 var(--space-6);
  background: var(--espresso);
  color: var(--ivory);
}

.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 18px;
  background: var(--espresso);
  -webkit-mask: var(--torn) no-repeat center / 100% 100%;
  mask: var(--torn) no-repeat center / 100% 100%;
}

.site-footer__inner {
  display: grid;
  gap: var(--space-5);
}

.site-footer .wordmark {
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a {
  color: var(--ivory);
  font-family: var(--font-type);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-footer a:hover {
  color: var(--blush);
}

.site-footer :focus-visible {
  outline-color: var(--blush);
}

.site-footer small {
  font-family: var(--font-type);
  font-size: 0.8125rem;
  color: #D9C6BB;
}


/* 15. LIGHTBOX ============================================================ */
.lightbox {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ivory);
}

.lightbox::backdrop {
  background: rgba(31, 20, 17, 0.92);
}

.lightbox__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: 100%;
  padding: 4rem var(--space-4) var(--space-5);
}

.lightbox__img {
  max-width: min(100%, 64rem);
  max-height: calc(100% - 4rem);
  width: auto;
  height: auto;
  object-fit: contain;
  background: var(--paper);
  padding: 0.5rem;
}

.lightbox__caption {
  max-width: 40rem;
  font-family: var(--font-type);
  font-size: 0.875rem;
  text-align: center;
  color: #E9D9D0;
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0 var(--space-3);
  border: 1px solid rgba(246, 236, 230, 0.5);
  background: rgba(31, 20, 17, 0.6);
  color: var(--ivory);
  font-family: var(--font-type);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.lightbox__btn:hover {
  background: var(--burgundy);
  border-color: var(--burgundy);
}

.lightbox__btn:focus-visible {
  outline-color: var(--blush);
}

.lightbox__close { top: var(--space-3); right: var(--space-3); }
.lightbox__prev  { left: var(--space-3); top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: var(--space-3); top: 50%; transform: translateY(-50%); }

.lightbox__count {
  position: absolute;
  top: var(--space-5);
  left: var(--space-4);
  font-family: var(--font-type);
  font-size: 0.8125rem;
  color: #E9D9D0;
}


/* 16. MOTION ============================================================== */

/* Smooth cross-fade between pages in browsers that support it */
@view-transition {
  navigation: auto;
}

/* Gentle fade on every page load (fallback for other browsers) */
body {
  animation: page-in 0.45s var(--ease) both;
}

@keyframes page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Scroll reveal: only hidden once JavaScript is running (see main.js) */
.js .reveal {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.7s var(--ease), translate 0.7s var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

/* Hover lift and tilt (only on devices with a real mouse) */
@media (hover: hover) and (pointer: fine) {
  .project-card:hover,
  .work-item:hover .work-item__image,
  .print:hover,
  .reel:hover {
    transform: translateY(-6px) rotate(calc(var(--tilt, 0deg) * -0.6));
    box-shadow: var(--shadow-lift);
  }

  .polaroid {
    transition: transform 0.35s var(--ease);
  }

  .polaroid:hover {
    transform: rotate(0deg) translateY(-4px);
  }
}

/* Respect "reduce motion": switch every animation off */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1;
    translate: none;
  }

  @view-transition {
    navigation: none;
  }
}


/* 17. RESPONSIVE BREAKPOINTS ============================================== */

/* Phones: menu collapses behind a button (only when JavaScript is on) */
@media (max-width: 767px) {
  .js .nav-toggle {
    display: inline-flex;
  }

  .js .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ivory);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 12px 24px rgba(31, 20, 17, 0.08);
  }

  .js .site-nav.is-open {
    display: block;
  }

  .js .site-nav ul {
    flex-direction: column;
    gap: 0;
    padding: var(--space-2) var(--gutter) var(--space-4);
  }

  .js .site-nav a {
    display: block;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--rule);
  }

  .js .site-nav li:last-child a {
    border-bottom: 0;
  }

  .js .site-nav a[aria-current] {
    background-size: 4.5rem 6px;
    background-position: left calc(100% - 4px);
  }

  /* Lightbox arrows sit below the image on phones */
  .lightbox__frame {
    padding-bottom: 5rem;
  }

  .lightbox__prev,
  .lightbox__next {
    top: auto;
    bottom: var(--space-4);
    transform: none;
  }

  .lightbox__prev { left: calc(50% - 56px); }
  .lightbox__next { right: calc(50% - 56px); }

  /* Without JavaScript the links simply wrap under the name */
  html:not(.js) .site-header__inner {
    flex-wrap: wrap;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }

  html:not(.js) .site-nav ul {
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
  }

  /* Calm, straight layout on small screens */
  .project-card,
  .work-item__image,
  .postcard {
    transform: none;
  }

  .postmark {
    display: none;
  }
}

/* Tablets and up */
@media (min-width: 768px) {
  :root {
    --gutter: 2rem;
  }

  body {
    font-size: 1.125rem;
  }

  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7) var(--space-6);
  }

  .work-item {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-7);
  }

  .work-item:nth-child(even) .work-item__image {
    order: 2;
    --tilt: 1.5deg;
  }

  .gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6) var(--space-5);
  }

  .gallery .print--wide {
    grid-column: span 3;
  }

  .skill-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .postcard {
    grid-template-columns: 1fr 1fr;
    padding: var(--space-7);
  }

  .postcard__message {
    padding-right: var(--space-6);
    border-right: 1px solid var(--rule);
  }

  .postcard__details {
    padding-top: var(--space-8);
  }

  .site-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

/* Desktops */
@media (min-width: 1024px) {
  .hero {
    padding-block: var(--space-8) var(--space-6);
  }

  .hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
  }

  .hero__photo {
    margin-right: var(--space-5);
  }

  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Hand-placed look: each card sits at a slightly different angle */
  .card-grid > li:nth-child(1) .project-card { --tilt: -1.5deg; }
  .card-grid > li:nth-child(2) .project-card { --tilt: 1deg; margin-top: var(--space-6); }
  .card-grid > li:nth-child(3) .project-card { --tilt: -0.6deg; }

  .about-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--space-8);
  }

  .about-photo {
    position: sticky;
    top: calc(var(--header-height) + var(--space-7));
    margin-top: var(--space-6);
  }

  .project-body {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: var(--space-8);
  }

  .sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-5));
  }

  .gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .gallery .print--wide {
    grid-column: span 2;
  }

  .skill-grid {
    gap: var(--space-7) var(--space-6);
  }
}