/* Home process: three pages, one per chapter. Left, the chapter, its story and the equipment behind it; right, a
   composition of one photo from every stage: one hero shot leads, the others support it (visual hierarchy), on
   a quiet grid with a little offset. Every photo is shown whole: each sits inside its cell at its own proportions. */
.home-process { background: var(--paper, #faf8f4); color: var(--text); border-top: 1px solid var(--line, #e7e1d6); }
.home-process__inner { display: grid; grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; min-height: 100svh; padding-top: clamp(80px, 9vw, 104px); padding-bottom: clamp(36px, 4.5vw, 56px); box-sizing: border-box; }
.home-process__copy .eyebrow { color: var(--accent); }
.home-process__title { margin: 10px 0 16px; color: var(--text); font-family: var(--display); font-size: clamp(2.6rem, 5.6vw, 5rem); line-height: .95; letter-spacing: -.01em; }
.home-process__story { margin: 0; max-width: 46ch; color: var(--muted); font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.7; }
.home-process__facts-title { margin: clamp(20px, 2.5vw, 30px) 0 10px; color: var(--accent); font-size: .74rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.home-process__facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; max-width: 50ch; }
.home-process__facts li { position: relative; padding-left: 18px; color: var(--text); font-size: .91rem; line-height: 1.5; }
.home-process__facts li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 2px; background: var(--wood, #a67c52); }
.home-process__trail { display: flex; flex-wrap: wrap; gap: 8px 0; margin: clamp(20px, 2.5vw, 32px) 0 0; padding: 0; list-style: none; color: var(--muted); font-size: .85rem; }
.home-process__trail li { display: flex; align-items: center; }
.home-process__cta { margin: clamp(22px, 3vw, 34px) 0 0; }
.home-process__trail li + li::before { content: ""; width: clamp(20px, 3vw, 40px); height: 1px; margin: 0 12px; background: var(--line, #e7e1d6); }
.home-process[data-chapter="0"] .home-process__trail li:nth-child(1),
.home-process[data-chapter="1"] .home-process__trail li:nth-child(2),
.home-process[data-chapter="2"] .home-process__trail li:nth-child(3) { color: var(--text); font-weight: 600; text-decoration: underline 2px var(--wood, #a67c52); text-underline-offset: 6px; }

/* The collage grid: six columns, a fixed height so every chapter fits its page; cells share rows evenly. */
.home-process__collage { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 14px; height: min(66svh, 640px); }
.home-process__shot { position: relative; z-index: 1; min-height: 0; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 6px; }
/* The photo hugs its own shape inside the cell (glass-photos.js sizes the frame), so the glass sheen fits the photo. */
.home-process__shot .glass-photo { align-self: end; justify-self: center; max-width: 100%; max-height: 100%; }
.home-process__shot img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: center bottom; }
.home-process__shot .glass-photo { filter: drop-shadow(0 18px 22px rgba(60, 45, 30, .22)); }
.home-process__shot figcaption { color: var(--muted); font-size: .76rem; line-height: 1.35; }
/* Pre press (4): the designer leads; two shots stacked beside it, one below with air to its left. */
.home-process[data-chapter="0"] .home-process__shot:nth-child(1) { grid-column: 1 / 5; grid-row: 1 / 3; }
.home-process[data-chapter="0"] .home-process__shot:nth-child(2) { grid-column: 5 / 7; grid-row: 1; }
.home-process[data-chapter="0"] .home-process__shot:nth-child(3) { grid-column: 5 / 7; grid-row: 2; }
.home-process[data-chapter="0"] .home-process__shot:nth-child(4) { grid-column: 2 / 5; grid-row: 3; }
/* Press (3 uprights): three across, the outer two stepped down so the middle one leads. */
.home-process[data-chapter="1"] .home-process__shot:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 4; padding-top: 10%; }
.home-process[data-chapter="1"] .home-process__shot:nth-child(2) { grid-column: 3 / 5; grid-row: 1 / 4; }
.home-process[data-chapter="1"] .home-process__shot:nth-child(3) { grid-column: 5 / 7; grid-row: 1 / 4; padding-top: 10%; }
/* Post press (6): the coated sheet leads; two stacked beside it; three across beneath. */
.home-process[data-chapter="2"] .home-process__shot:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 3; }
.home-process[data-chapter="2"] .home-process__shot:nth-child(2) { grid-column: 4 / 7; grid-row: 1; }
.home-process[data-chapter="2"] .home-process__shot:nth-child(3) { grid-column: 4 / 7; grid-row: 2; }
.home-process[data-chapter="2"] .home-process__shot:nth-child(4) { grid-column: 1 / 3; grid-row: 3; }
.home-process[data-chapter="2"] .home-process__shot:nth-child(5) { grid-column: 3 / 5; grid-row: 3; }
.home-process[data-chapter="2"] .home-process__shot:nth-child(6) { grid-column: 5 / 7; grid-row: 3; }

@media (max-width: 900px) {
  .home-process__inner { grid-template-columns: 1fr; gap: 22px; min-height: 0; padding-top: 84px; padding-bottom: 48px; }
  .home-process__title { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .home-process__facts { max-width: none; }
  .home-process__collage { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 10px; }
  /* phones: the lead photo runs full width, the others pair up two by two (a last odd one runs full width too);
     these beat the desktop placements above, which are more specific */
  .home-process[data-chapter] .home-process__collage > .home-process__shot:nth-child(n) { grid-column: auto; grid-row: auto; padding-top: 0; align-content: start; }
  .home-process[data-chapter] .home-process__collage > .home-process__shot:first-child,
  .home-process[data-chapter] .home-process__collage > .home-process__shot:nth-child(even):last-child { grid-column: 1 / -1; }
  .home-process__collage { gap: 18px 12px; }
  .home-process__shot .glass-photo { width: 100% !important; height: auto !important; align-self: start; }
  .home-process__shot img { height: auto; max-height: 52svh; object-position: center; }
  .home-process__shot figcaption { font-size: .78rem; line-height: 1.4; }
}

/* short laptop screens: a little tighter so every chapter still fits one screen */
@media (min-width: 901px) and (max-height: 840px) {
  .home-process__story { font-size: .98rem; line-height: 1.6; }
  .home-process__facts { gap: 6px; }
  .home-process__facts li { font-size: .86rem; line-height: 1.45; }
  .home-process__facts-title { margin-top: 16px; }
}

/* the same red touches as the Process page */
.home-process__title::after { content: "."; color: var(--accent); }
.home-process__facts li::before { background: var(--accent); }
.home-process .fact-key { color: var(--accent); font-weight: 600; }