/* Näin tämä sivusto syntyi / How this site was made, on top of the shared public/ink.css (site/process.mjs).
   A story top to bottom, one step per screen. First three screens of their own kind: the goal as one huge line, the
   mood as a board of her photographs, the colours as big swatches with their codes and "Aa" in the site's font.
   Then the build: the number, the title and a few lines on one side, the step's real screenshots big on the other,
   the sides taking turns (three pictures go across the whole width under the text). The screenshots are the evidence, so they get the room; a
   thin line frames each, as the site's own black would otherwise melt into the page's. No motion: the story moves
   when you scroll. No inline styles anywhere: the CSP forbids them. */

.pr main > section { box-sizing: border-box; min-height: 100svh; padding: 6rem var(--gut); }

/* the opening: the title huge, bottom left; how many steps, small, top right */
.pr-intro { display: flex; flex-direction: column; justify-content: flex-end; }
.pr-intro h1 { max-width: 14ch; margin: 0; font-size: clamp(3rem, 7.4vw, 9.5rem); line-height: .95; font-weight: 500; letter-spacing: -.045em; text-wrap: balance; }
.pr-intro p { max-width: 34rem; margin: 1.8rem 0 0; color: var(--ink-2); font-size: clamp(1.05rem, 1.3vw, 1.35rem); line-height: 1.55; }
.pr-count { position: absolute; top: 2rem; right: var(--gut); color: var(--ink-3); font-size: .9rem; }
.pr-intro { position: relative; }

/* a step: the text in four columns, the pictures in the other eight; every other step the other way round */
.pr-step { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.pr-text { grid-column: 1 / 5; grid-row: 1; }
.pr-pics { grid-column: 5 / 13; grid-row: 1; display: grid; gap: clamp(.6rem, 1vw, 1rem); }
.pr-step.is-flip .pr-text { grid-column: 9 / 13; }
.pr-step.is-flip .pr-pics { grid-column: 1 / 9; }
.pr-n { display: block; margin-bottom: 1.2rem; color: var(--ink-3); font-size: .9rem; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.pr-text h2 { margin: 0; font-size: clamp(2rem, 3.4vw, 4rem); line-height: 1.02; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
.pr-text p { margin: 1.4rem 0 0; color: var(--ink-2); line-height: 1.6; max-width: 30rem; }

/* the pictures: one big; two side by side; three side by side, smaller */
.pr-pics-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pr-pics-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pr-fig { margin: 0; }
.pr-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--line-2); }
.pr-fig figcaption { margin-top: .6rem; color: var(--ink-3); font-size: .85rem; }

/* steps with three pictures: the text above, the pictures across the whole width below */
.pr-step.is-wide { align-content: center; row-gap: 2.5rem; }
.pr-step.is-wide .pr-text, .pr-step.is-wide.is-flip .pr-text { grid-column: 1 / 7; grid-row: 1; }
.pr-step.is-wide .pr-pics, .pr-step.is-wide.is-flip .pr-pics { grid-column: 1 / 13; grid-row: 2; }

/* six pictures across the width: wireframes three by two; phones all six in a row, with a phone's rounded corners */
.pr-pics-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pr-step:not(.is-phone) .pr-pics-6 { width: min(100%, calc((100svh - 28rem) * 2.2)); }
.pr-step.is-phone .pr-pics-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pr-step.is-phone .pr-fig img { border-radius: clamp(.8rem, 1.4vw, 1.6rem); }
.pr-step.is-phone .pr-pics { width: min(100%, 150vh); }

/* big numbers: the text on the left, the numbers in a row (or two) on the right, the source small below */
.pr-stats { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2.5rem; align-content: center; }
.pr-stats .pr-text { grid-column: 1 / 5; grid-row: 1 / 3; align-self: center; }
.pr-nums { grid-column: 6 / 13; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem var(--gap); margin: 0; }
.pr-nums div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .7rem; padding-top: 1rem; border-top: 1px solid var(--line-2); }
.pr-nums dd { margin: 0; font-size: clamp(3rem, 6.2vw, 8rem); line-height: .9; font-weight: 500; letter-spacing: -.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-nums.is-two dd { font-size: clamp(2.4rem, 3.7vw, 5.2rem); }
.pr-nums dt { color: var(--ink-2); font-size: .95rem; line-height: 1.4; }
.pr-note { grid-column: 6 / 13; margin: 0; color: var(--ink-3); font-size: .85rem; }

/* found and fixed: a plain two-column table */
.pr-fixes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.pr-fixes .pr-text { grid-column: 1 / 5; }
.pr-table { grid-column: 6 / 13; width: 100%; border-collapse: collapse; font-size: clamp(.95rem, 1.05vw, 1.2rem); line-height: 1.45; }
.pr-table th { padding: 0 0 .9rem; color: var(--ink-3); font-size: .85rem; font-weight: 400; text-align: left; }
.pr-table td { padding: 1rem 1.2rem 1rem 0; border-top: 1px solid var(--line-2); vertical-align: top; width: 50%; }
.pr-table td:first-child { color: var(--ink-2); }
.pr-table.is-tech { font-size: clamp(.9rem, .95vw, 1.1rem); }
.pr-table.is-tech td { padding-top: .75rem; padding-bottom: .75rem; }
.pr-table.is-tech td:first-child { width: 22%; color: var(--ink); }

/* 01 the goal: one line, huge, across the screen */
.pr-goal { display: flex; flex-direction: column; justify-content: center; }
.pr-goal h2 { margin: 0; color: var(--ink-3); font-size: 1rem; font-weight: 400; letter-spacing: .02em; }
.pr-line { max-width: 18ch; margin: 1.6rem 0 0; font-size: clamp(2.8rem, 6.6vw, 8.6rem); line-height: .98; font-weight: 500; letter-spacing: -.045em; text-wrap: balance; }
.pr-goal-p { max-width: 32rem; margin: 2.2rem 0 0 auto; color: var(--ink-2); font-size: clamp(1.05rem, 1.3vw, 1.35rem); line-height: 1.55; }

/* 02 the mood: her photographs as a board across the whole width, one height, each at its own shape */
.pr-mood { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2.5rem; align-content: center; }
.pr-mood .pr-text { grid-column: 1 / 7; }
.pr-board { grid-column: 1 / 13; display: flex; gap: var(--g, clamp(.4rem, .7vw, .7rem)); }
.pr-photo { display: block; min-width: 0; height: auto; }
.pr-photo-owl { flex: .667 1 0; }
.pr-photo-swan { flex: 1.25 1 0; }
.pr-photo-crow { flex: 1.5 1 0; }
.pr-photo-barn { flex: .8 1 0; }

/* 03 colours and type: the swatches big with their codes; "Aa" huge */
.pr-palette { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: var(--gap); row-gap: 3rem; align-content: center; }
.pr-palette .pr-text { grid-column: 1 / 5; grid-row: 1 / 3; align-self: center; }
.pr-swatches { grid-column: 5 / 13; grid-row: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.5rem, 1vw, 1rem); margin: 0; padding: 0; list-style: none; }
.pr-swatches li { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; }
.pr-chip { display: block; aspect-ratio: 3 / 4; margin-bottom: .6rem; border: 1px solid var(--line-2); }
.pr-swatches b { font-weight: 500; }
.pr-swatches code { color: var(--ink-2); font-family: inherit; font-variant-numeric: tabular-nums; }
.pr-swatches small { color: var(--ink-3); }
.pr-type { grid-column: 5 / 10; grid-row: 2; margin: 0; font-size: clamp(7rem, 17vw, 22rem); line-height: .8; font-weight: 500; letter-spacing: -.05em; }
.pr-type-name { grid-column: 10 / 13; grid-row: 2; align-self: end; margin: 0 0 1rem; color: var(--ink-2); }

/* the way on, bottom right */
.pr-end { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-content: end; }
.pr-end > * { grid-column: 7 / 13; }
.pr-end h2 { margin: 0; font-size: clamp(2.1rem, 3.6vw, 4.3rem); line-height: 1.02; font-weight: 500; letter-spacing: -.035em; }
.pr-end p { margin: 1.2rem 0 2rem; color: var(--ink-2); }
.pr-end .ink-btn { justify-self: start; }

@media (max-width: 900px) {
  .pr main > section { min-height: 0; padding-top: 5rem; padding-bottom: 2rem; }
  .pr-intro { min-height: 80svh !important; }
  .pr-step, .pr-end { display: block; }
  .pr-text { margin-bottom: 1.6rem; }
  .pr-pics-3 { grid-template-columns: minmax(0, 1fr); }
  .pr-mood, .pr-palette, .pr-stats, .pr-fixes { display: block; }
  .pr-pics-6, .pr-step.is-phone .pr-pics-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-step:not(.is-phone) .pr-pics-6 { width: auto; }
  .pr-nums, .pr-nums.is-two { margin-top: 1.6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem var(--gap); }
  .pr-nums dd, .pr-nums.is-two dd { font-size: 3.2rem; }
  .pr-note { margin-top: 1.6rem; }
  .pr-table { margin-top: 1.6rem; }
  .pr-table td { display: block; width: auto; padding: .2rem 0 .9rem; border: 0; }
  .pr-table td:first-child { padding-top: 1rem; border-top: 1px solid var(--line-2); }
  .pr-table thead { display: none; }
  .pr-table.is-tech td:first-child { width: auto; }
  /* two rows of one height each: owl and swan, then crow and barn (their widths in proportion to their shapes) */
  .pr-board { margin-top: 1.6rem; flex-wrap: wrap; --g: .4rem; }
  .pr-photo-owl, .pr-photo-barn { flex: 0 0 calc(34.8% - var(--g) / 2); }
  .pr-photo-swan, .pr-photo-crow { flex: 0 0 calc(65.2% - var(--g) / 2); }
  .pr-swatches { margin-top: 1.6rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pr-type { margin-top: 2rem; font-size: 8rem; }
  .pr-end { padding-bottom: 5rem !important; }
}