/* Projects (/work) only. Shared components are in site.css; the HTML for each is in DESIGN-SYSTEM.md.
   Page: intro, the withheld panel, three groups (one featured entry and compact rows each), closing band (V3-VISION 4.2). */

/* ---------- 1. Intro and the withheld project ---------- */
/* A tight intro, so the first featured project's image starts on the first screen (1280 x 853): 72 px above the H1
   at 1440, 24 px from the lead to the panel, 48 px from the panel to the first group (critique, 14 Nov). */
.intro { padding-top: clamp(48px, 36px + 2.5vw, 72px); }
.intro__lead { margin-top: var(--s-6); }   /* H1 to lead as on About and Contact */
.withheld { margin-top: var(--s-5); }       /* as wide as the lead (.w-8): part of the intro, not a banner */
.intro + .group { padding-top: var(--s-7); }
@media (max-width: 767.98px) {
  .intro__lead { margin-top: var(--s-5); }
}

/* ---------- 2. A group: rule and H2, the featured entry, then the compact rows ---------- */
.feature { margin-top: var(--s-8); row-gap: var(--s-6); align-items: start; }
.feature__media { grid-column: 1 / span 6; }
.feature__text { grid-column: 7 / -1; max-width: 34em; }
.entries { margin-top: var(--s-8); }   /* no closing rule: the next group's own rule follows (site.css .rows:last-child) */
/* the image stays beside a long entry while it is read, and lines up with the anchor landing (scroll-padding in site.css) */
@media (min-width: 900px) {
  .feature__media { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
}
@media (max-width: 899.98px) {
  .feature__media { grid-column: 1 / span 8; }
  .feature__text { grid-column: 1 / -1; }
}
@media (max-width: 699.98px) {
  .feature__media { grid-column: 1 / -1; }
  .feature { row-gap: var(--s-5); }
  .entries { margin-top: var(--s-7); }
}

/* ---------- 3. The entry text: title, fields, bullets, Result ---------- */
.fields { display: grid; row-gap: var(--s-4); margin-top: var(--s-4); }
.fields dd { margin: 0; }
.feature .fields { row-gap: var(--s-5); margin-top: var(--s-5); }
.fields dd > p + .bullets, .fields dd > p + .subs { margin-top: var(--s-2); }

.bullets { list-style: none; }
.bullets li { position: relative; padding-left: 20px; text-wrap: pretty; }   /* no "NDA" alone on a line */
.bullets li + li { margin-top: var(--s-1); }
.bullets li::before {
  content: ""; position: absolute; left: 3px; top: calc(var(--lh-body) / 2 - 2px);
  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
}

/* the salad robot's Mechanical, Electrical and Software sub-labels (15 px, 600) */
.subs { display: grid; row-gap: var(--s-4); }
.sub__label { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; margin-bottom: var(--s-1); }

.result { margin-top: var(--s-4); }
.feature .result { margin-top: var(--s-5); }

/* compact rows on phones: a 120 px thumbnail beside the title (like About's portraits), the fields full width under
   them; the featured images stay full width. The breath collection device has no image and no placeholder. */
@media (max-width: 699.98px) {
  .row--compact { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: var(--s-4); align-items: center; }
  .row--compact .row__name { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .row--compact .row__text { display: contents; }
  .row--compact .entry__t { grid-column: 2; grid-row: 1; }
  .row--compact .fields, .row--compact .result { grid-column: 1 / -1; }
  .row--noimg .row__name { display: none; }
  .row--noimg .entry__t { grid-column: 1 / -1; }
}

/* crops of the cover photos */
.img-femto { object-position: 50% 60%; }

/* ---------- 4. The salad robot video: only on click, in the image's own 4:3 frame ---------- */
.video video { position: absolute; inset: 0; background: var(--paper); cursor: pointer; }
.video__btn { margin-top: var(--s-4); }

/* ---------- 5. Print: a clean list of every project, the contact line at the foot ---------- */
@media print {
  :root {
    --fs-h1: 24pt; --lh-h1: 28pt; --fs-h2: 15pt; --lh-h2: 19pt; --fs-h3: 12pt; --lh-h3: 15pt;
    --fs-lead: 11.5pt; --lh-lead: 16pt; --fs-body: 10pt; --lh-body: 14pt; --fs-small: 8.5pt; --lh-small: 11pt;
  }
  .intro { padding-top: 4pt; }
  .intro__lead { margin-top: 6pt; max-width: none; }
  .withheld { margin-top: 12pt; padding: 8pt 10pt; background: none; border: 1px solid #999; }
  .sh--plain { padding-top: 8pt; }

  .feature { display: grid; grid-template-columns: 34% minmax(0, 1fr); column-gap: 14pt; margin-top: 10pt; }
  .feature__media { grid-column: 1; position: static; }
  .feature__text { grid-column: 2; max-width: none; }
  .entries { margin-top: 10pt; }
  .row--compact { display: grid; grid-template-columns: 22% minmax(0, 1fr); column-gap: 14pt; padding-block: 10pt; }
  .row--compact .row__name, .row--compact .row__text { grid-column: auto; margin: 0; max-width: none; }
  .row--noimg .row__name { display: block; }

  .fields, .feature .fields { row-gap: 5pt; margin-top: 5pt; }
  .subs { row-gap: 4pt; }
  .bullets li + li { margin-top: 0; }
  .bullets li::before { background: #000; }
  .result, .feature .result { margin-top: 6pt; }
  .field { color: #444; margin-bottom: 1pt; }

  .video video { display: none !important; }   /* the photo prints, never a video frame */
  .rows { border-color: #ccc; }
  .row { border-top-color: #ccc; }
  .frame { border-color: #ccc; }
}