/* aaroncphelps.com — the Projects index's chapters (v1). Ported from
   design/projects-v1; the page's skeleton is collection.css. One full-width
   chapter per project in its homepage tile colour with the real product
   render: the SBDC.AI tablet bleeding off the right edge, MySBDC in a dark
   bezel with the image on the left (the flipped card), Ground Control's
   stack unframed. On hover one sweep of prismatic light crosses the card
   (collection.js), the circle arrow fills, the render lifts 8px and the
   card lifts 4px. */

.hero .lede { max-width: 20ch; }

.proj {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 32px;
  min-height: clamp(400px, 58vh, 660px);
  padding: 36px 40px 40px;
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.proj:hover { transform: translateY(-4px); }
/* a flipped chapter puts the image column on the left */
.proj[data-flip] { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
/* the project's colour, matching the homepage */
.proj[data-color="sky"] { background: var(--sky); }
.proj[data-color="lav"] { background: var(--lav); }
.proj[data-color="sage"] { background: var(--sage); }
.proj > * { position: relative; z-index: 1; }
.proj .head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.proj .copy { display: flex; flex-direction: column; justify-content: flex-end; }
.proj[data-flip] .copy { grid-column: 2; grid-row: 2; }
.proj h2 {
  font-family: var(--statement);
  font-weight: 700;
  font-size: clamp(38px, 4.4vw, 76px);
  line-height: .94;
  letter-spacing: -.025em;
}
.proj .role { font-family: var(--display); font-weight: 700; font-size: clamp(17px, 1.4vw, 22px); letter-spacing: -.015em; margin-top: 18px; max-width: 16ch; }
.proj .dek { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.42; color: var(--body); max-width: 34ch; margin-top: 22px; }
.proj .foot { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-top: 30px; }
.proj .go { display: inline-flex; align-items: center; gap: 18px; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
/* the circle arrow: an ink ring that fills on hover */
.circ {
  flex: none;
  width: 64px;
  height: 64px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform .3s, background .3s, color .3s;
}
.circ .px { width: 24px; height: 24px; display: block; }
.proj:hover .circ { background: var(--ink); color: var(--paper); transform: translate(3px, -3px); }

/* the render: three treatments */
.proj .art { position: relative; align-self: center; min-height: 0; }
.proj[data-flip] .art { grid-column: 1; grid-row: 2; }
.proj .art img { width: 100%; height: auto; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.proj:hover .art img { transform: translateY(-8px); }
/* bleed-right: the tablet runs off the card's edge, as on the homepage; the
   render carries its own tilt and shadow */
.proj[data-treatment="bleed-right"] .art { position: absolute; right: -14%; top: 5%; width: 64%; z-index: 1; }
.proj[data-treatment="bleed-right"] .copy, .proj[data-treatment="bleed-right"] .foot { grid-column: 1; }
/* bezel: a dark frame with a shadow, the screen cropped 16:10 from the top */
.proj[data-treatment="bezel"] .art .bezel { background: #2a2a28; padding: 8px; box-shadow: 0 24px 50px rgba(43, 43, 41, .2); }
.proj[data-treatment="bezel"] .art img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
/* plain: the composed stack carries its own devices */
/* the stack gets the wider column and the full width of it */
.proj[data-treatment="plain"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.proj[data-treatment="plain"] .art img { max-width: 100%; margin-left: auto; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .proj, .proj[data-flip], .proj[data-treatment="plain"] { grid-template-columns: 1fr; min-height: 0; padding: 28px 24px 32px; }
  .proj .copy, .proj[data-flip] .copy, .proj .art, .proj[data-flip] .art { grid-column: 1; grid-row: auto; }
  /* the copy first, then the image; the tablet comes into the flow */
  .proj .art { order: 1; }
  /* the tablet runs large and off the card's right and bottom edges, so the
     card clips it and no blue is left empty around it */
  .proj[data-treatment="bleed-right"] .art { position: relative; right: auto; top: auto; width: 172%; margin: 4px -36% -30% -18%; }
  /* the Ground Control stack the same way: larger, off the right and the bottom */
  .proj[data-treatment="plain"] .art { width: 138%; margin: 8px -26% -20% -12%; }
  .proj[data-treatment="plain"] .art img { max-width: none; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .proj:hover { transform: none; }
  .proj:hover .art img { transform: none; }
}