/* The Red Planter Project, project sheets A-101 to A-105 (js/views/project.js).
   One cream sheet. A title sheet first, then the presentation, Next, the title block. */

.pj { position: relative; }

/* ================================================================== title sheet */
.pj-sheet { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: clip; }
.pj-top { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; padding: calc(var(--hd) + 2px) var(--m) 56px; min-height: 540px; }

.pj-sheetno { margin: 0; display: flex; gap: 14px; color: var(--mute); transition: opacity 1s var(--ease-soft) .2s; }
.pj-sheetno b { font-weight: 400; color: var(--ink); }

/* the number, as large as the page allows */
.pj-num { align-self: flex-start; margin: 18px 0 0 -.045em; font-size: clamp(120px, min(26vw, 45svh), 640px); line-height: .78; letter-spacing: .01em; display: flex; }
.pj-dg { display: block; clip-path: inset(-40% -8% 0 -8%); padding-bottom: .02em; }
.pj-dg > span { display: block; transition: transform 1.5s var(--ease-out); }
.pj-dg:nth-child(2) > span { transition-delay: .09s; }
.pj-dg:nth-child(3) > span { transition-delay: .18s; }

/* the details as annotation: value, leader, mono label (guide page 09) */
.pj-ann { --ldr: clamp(40px, 5vw, 96px); margin: auto 0 0; align-self: flex-start; max-width: 100%; display: grid; grid-template-columns: max-content max-content; column-gap: 14px; row-gap: 10px; align-items: center; }
.pj-v { grid-column: 1; margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--f-body); font-size: clamp(17px, 1.2vw, 21px); line-height: 1.3; min-height: 1.3em; }
.pj-v.is-name { max-width: min(30vw, 620px); margin-bottom: 8px; }
.pj-tw { display: inline-grid; }
.pj-tw > * { grid-area: 1 / 1; }
.pj-tg { visibility: hidden; }
.pj-v.is-name .pj-tw { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .22em; font-size: clamp(24px, 2.15vw, 42px); line-height: 1.12; }
.pj-v.is-status { color: var(--soft); }
.pj-sq { flex: none; width: 11px; height: 11px; margin-left: -21px; }   /* where the red square sits, in the margin before the category */
.pj[data-nw] .pj-sq { display: none; }   /* 002: its drawing carries the red (new roof), so the square does not mark the category there */
/* the label carries its own leader: a dot, a hairline, then the mono word (guide page 09) */
.pj-k { grid-column: 2; position: relative; margin: 0 0 0 0; padding-left: calc(var(--ldr) + 14px); font-family: var(--f-mono); font-size: 11.5px; line-height: 1.3;
  color: var(--mute); white-space: nowrap; min-height: 1.3em; }
.pj-k::before { content: ""; position: absolute; left: 0; top: 50%; width: var(--ldr); height: 1px; background: var(--ink); opacity: .42;
  transform-origin: 0 50%; transition: transform 1.1s var(--ease-out); transition-delay: calc(.55s + var(--i) * .15s); }
.pj-k::after { content: ""; position: absolute; left: -2px; top: calc(50% - 2px); width: 5px; height: 5px; border-radius: 50%; background: var(--ink); opacity: .7; }
.pj-v.is-name + .pj-k, .pj-k { align-self: center; }

/* the drawing, entering from the right and running off the right edge */
.pj-draw { position: absolute; color: var(--ink); pointer-events: none; transition: transform 2.2s var(--ease-out); }
.pj-draw svg, .pj-elev-box svg.elev { display: block; width: 100%; height: 100%; overflow: visible; }
.pj .elev .ef { fill: var(--cream); }
.pj .elev .pj-g0 { display: none; }
.pj-draw .elev .w1 { stroke-width: calc(var(--k, 1) * 1.75); }
.pj-draw .elev .w2 { stroke-width: calc(var(--k, 1) * .95); }
.pj-draw .elev .w3 { stroke-width: calc(var(--k, 1) * .6); }

/* placeholders: the empty site stands on the ground line */
.pj-site { position: absolute; z-index: 1; transition: clip-path 1.7s var(--ease-io) .35s; clip-path: inset(-12% -6% 0 -6%); }
.pj-site .rv-datum { right: 4%; }
/* the title sheet shows the frame of the render it waits for, standing on the sheet's ground line: a plain site
   (004, Buy and Hold) or the dashed proposed envelope (005, Ground-Up Development) */
.pj-site .rv-svg .env { opacity: .72; }

.pj-ground { position: relative; height: 0; border-top: 1.4px solid var(--ink); transform-origin: 0 50%; transition: transform 1.5s var(--ease-io); }

.pj-band { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 18px var(--m) 0; align-items: start; }
.pj-line { grid-column: 1 / span 6; margin: 0; color: var(--ink); letter-spacing: .06em; min-height: 1.5em; }
.pj-lead { grid-column: 7 / span 5; margin: -3px 0 0; color: var(--ink); max-width: 38ch; font-size: clamp(18px, 1.2vw, 22px); line-height: 1.42; transition: opacity 1.2s var(--ease-soft) 1.5s, transform 1.4s var(--ease-out) 1.5s; }

/* a quiet cue that the sheet goes on: the word, and a hairline that drops once */
.pj-cue { grid-column: 12; grid-row: 1; justify-self: end; margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; color: var(--mute); transition: opacity 1s var(--ease-soft) 2.2s; }
.pj-cue i { display: block; width: 1px; height: 30px; margin-right: 2px; background: var(--ink); opacity: .45; transform-origin: 50% 0; transition: transform 1.4s var(--ease-out) 2.4s; }
.pj-sheet.is-pre .pj-cue { opacity: 0; }
.pj-sheet.is-pre .pj-cue i { transform: scaleY(0); }

.pj-strip { transition: opacity 1.2s var(--ease-soft) 1.2s; }
.pj-strip .tb { padding: 34px 0 calc(26px + env(safe-area-inset-bottom, 0px)); }

/* intro states (removed by the view, so everything is visible without motion or JS) */
.pj-sheet.is-pre .pj-dg > span { transform: translateY(104%); }
.pj-sheet.is-pre .pj-k::before { transform: scaleX(0); }
.pj-sheet.is-pre .pj-ground { transform: scaleX(0); }
.pj-sheet.is-pre .pj-sheetno, .pj-sheet.is-pre .pj-strip { opacity: 0; }
.pj-sheet.is-pre .pj-lead { opacity: 0; transform: translateY(14px); }
.pj-sheet.is-pre .pj-draw { transform: translateX(7vw); }
.pj-sheet.is-pre .pj-site { clip-path: inset(100% -6% 0 -6%); }

/* ================================================================== 1: the dusk render grows through the grid */
.pj-grow { position: relative; margin-top: 0; overflow-x: clip; }
.pj-grow + * { margin-top: 0 !important; }   /* the grow sets its own bottom margin (js) */
.pj-stage { position: sticky; top: 0; height: 100vh; height: 100svh; }
.pj-dusk { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 0 0; will-change: transform; z-index: 2; }
.pj-cols { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 1; }
.pj-cols .cl { stroke: var(--line); stroke-width: 1; stroke-dasharray: 16 5 2 5; fill: none; transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0);
  transition: transform 1.6s var(--ease-out); transition-delay: calc(var(--i) * 40ms); }
.pj-cols .cb { opacity: 0; transition: opacity .8s var(--ease-soft); transition-delay: calc(var(--i) * 40ms); }
.pj-cols .cb circle { fill: var(--cream); stroke: var(--line); stroke-width: 1; transition: stroke .5s ease; }
.pj-cols .cb text { font-family: var(--f-mono); font-size: 10px; fill: var(--mute); transition: fill .5s ease; }
.pj-cols .cb.on circle { stroke: var(--ink); }
.pj-cols .cb.on text { fill: var(--ink); }
.pj-stage.is-in .pj-cols .cl { transform: none; }
.pj-stage.is-in .pj-cols .cb { opacity: 1; }
.pj-cap { position: absolute; left: 0; top: 0; margin: 0; display: flex; gap: 14px; color: var(--soft); white-space: nowrap; z-index: 2; }
.pj-cap b, .pj-figcap b, .pj-day-cap b, .pj-elev-t b { font-weight: 400; color: var(--ink); }
.pj-tone { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; }

/* ================================================================== 001: figures beside the garage (guide page 11), last before Next */
.pj-figs { display: grid; grid-template-columns: calc(3 * var(--col) + 2 * var(--gap)) minmax(0, 1fr); column-gap: var(--gap); padding: 0 0 0 var(--m); margin-top: 176px; }
.pj-figs-col { display: flex; flex-direction: column; justify-content: space-between; gap: 64px; padding-top: 30px; min-width: 0; }
.pj-fact { margin: 0; }
.pj-fv { display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(30px, 2.5vw, 48px); line-height: 1; letter-spacing: .01em; white-space: nowrap; }
.pj-fu { display: block; margin-top: 8px; font-family: var(--f-mono); font-size: 12px; color: var(--mute); }
.pj-fact.is-xl .pj-fv { font-size: clamp(120px, 15vw, 320px); line-height: .76; margin-left: -.05em; letter-spacing: 0; }
.pj-fact.is-xl .pj-fu { margin-top: 22px; font-family: var(--f-body); font-size: clamp(17px, 1.2vw, 20px); color: var(--ink); }
.pj-facts { display: grid; gap: 30px; }
.pj-garage { min-width: 0; }
.pj-figcap, .pj-day-cap { margin: 0 0 14px; display: flex; gap: 14px; color: var(--soft); }
.pj-door, .pj-day-img, .pj-field-rv { position: relative; }
.pj-figs, .pj-day, .pj-field, .pj-fig2 { overflow-x: clip; }   /* the sweep overshoots its image; never past the page edge */

/* a render rises from its ground line, a hairline at the edge (one gesture, used for every image that arrives) */
.pj-rise > .pl, .pj-rise > .rv { transition: clip-path 1.7s var(--ease-io); }
.pj-rise.is-pre > .pl, .pj-rise.is-pre > .rv { clip-path: inset(100% 0 0 0); }
.pj-rise.is-in > .pl, .pj-rise.is-in > .rv { clip-path: inset(0 0 0 0); }
.pj-sweep { position: absolute; left: -24px; right: -24px; bottom: 0; height: 1px; background: var(--ink); opacity: 0; pointer-events: none; }
.pj-rise.is-in .pj-sweep { animation: pjSweepY 1.7s var(--ease-io) both, pjSweepO 1.7s linear both; }
.is-still .pj-sweep { display: none; }
@keyframes pjSweepY { from { bottom: 0; } to { bottom: 100%; } }
@keyframes pjSweepO { 0% { opacity: 0; } 6% { opacity: .85; } 86% { opacity: .85; } 100% { opacity: 0; } }

/* ================================================================== the drawing (guide page 12) */
.pj-elev { position: relative; margin-top: 168px; overflow: clip; }
.pj-elev-t { position: relative; margin: 0; padding: 0 var(--m); display: flex; gap: 14px; color: var(--soft); }
.pj-elev-t .pj-sep { color: var(--mute); }
.pj-elev-box { position: absolute; color: var(--ink); }
.pj-elev-box .elev .w1 { stroke-width: calc(var(--k, 1) * 2.1); }
.pj-elev-box .elev .w2 { stroke-width: calc(var(--k, 1) * 1.05); }
.pj-elev-box .elev .w3 { stroke-width: calc(var(--k, 1) * .62); }
.pj-elev-planter { position: absolute; pointer-events: none; }
.pj-elev-ov { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.pj-elev-ov .ax { stroke: var(--line); stroke-width: 1; stroke-dasharray: 18 5 2 5; fill: none; transform-box: fill-box; transform-origin: 50% 0;
  transform: scaleY(0); transition: transform 1.8s var(--ease-out); transition-delay: calc(.2s + var(--i) * 90ms); }
.pj-elev-ov .bub circle { fill: var(--cream); stroke: var(--ink); stroke-width: 1; }
.pj-elev-ov .bub text { font-family: var(--f-mono); font-size: 11px; fill: var(--ink); opacity: 0; transition: opacity .6s ease; transition-delay: calc(.6s + var(--i) * 90ms); }
.pj-elev-ov .ld { fill: none; stroke: var(--ink); stroke-width: 1; opacity: .5; visibility: hidden; }
.pj-elev-ov .ld.on { visibility: visible; }
.pj-elev-ov .dot { fill: var(--ink); opacity: 0; transition: opacity .4s ease; }
.pj-elev-ov .dot.on { opacity: 1; }
.pj-elev-ground { position: absolute; left: 0; right: 0; height: 0; border-top: 1.4px solid var(--ink); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.6s var(--ease-io); }
.pj-elev-notes { position: absolute; inset: 0; pointer-events: none; }
.pj-note { position: absolute; transform: translateY(-50%); padding: 2px 6px; margin-left: -6px; font-family: var(--f-mono); font-size: 11.5px; line-height: 1.4; color: var(--soft); white-space: nowrap; visibility: hidden; }
.pj-note.on { visibility: visible; background: var(--cream); }
.pj-elev:not(.is-drawn) .pj-elev-box svg, .pj-elev:not(.is-drawn) .pj-elev-ov, .pj-elev:not(.is-drawn) .pj-elev-notes { visibility: hidden; }
.pj-elev.is-drawn .pj-elev-ov .ax { transform: none; }
.pj-elev.is-drawn .pj-elev-ov .bub text { opacity: 1; }
.pj-elev.is-drawn .pj-elev-ground { transform: none; }

/* ================================================================== the day render */
.pj-day { display: grid; grid-template-columns: calc(var(--m) + 9 * var(--col) + 8 * var(--gap)) minmax(0, 1fr); column-gap: var(--gap); margin-top: 136px; align-items: stretch; }
.pj-day-img { align-self: end; }
/* beside the render: the category at its top, the scope and the caption at its foot */
.pj-day-side { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 4px var(--m) 0 0; min-width: 0; }
.pj-day-foot { display: flex; flex-direction: column; gap: 56px; }
.pj-day-cap { margin: 0; }
/* where the square docks on the render's own red planter */
.pj-rpl { position: absolute; pointer-events: none; }

/* ================================================================== 002, 003: the figures, type only */
.pj-fig2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 0 var(--m); margin-top: 176px; align-items: end; }
.pj-fig2 .pj-fact.is-xl { grid-column: 1 / span 6; grid-row: 1 / span 2; }
.pj-frow { grid-column: 7 / -1; grid-row: 1; display: flex; flex-wrap: wrap; gap: 28px clamp(32px, 3.4vw, 64px); }
.pj-fig2:not(.has-scope) .pj-fact.is-xl { grid-row: 1; }
.pj-fig2.has-scope { align-items: start; }
.pj-fig2.has-scope .pj-fact.is-xl { align-self: end; }
.pj-fig2.has-scope .pj-scope { grid-column: 7 / -1; grid-row: 2; margin-top: 72px; }

/* the scope as annotation: the work, a leader, its number (like the title sheet) */
.pj-scope-t { margin: 0 0 18px; color: var(--mute); }
.pj-sc { --ldr: clamp(32px, 3.4vw, 72px); margin: 0; display: grid; grid-template-columns: max-content max-content; column-gap: 14px; row-gap: 10px; align-items: center; }
.pj-sc dd { grid-column: 1; margin: 0; font-family: var(--f-body); font-size: clamp(17px, 1.2vw, 21px); line-height: 1.3; color: var(--ink); }
.pj-sc dt { grid-column: 2; position: relative; padding-left: calc(var(--ldr) + 14px); font-family: var(--f-mono); font-size: 11.5px; line-height: 1.3; color: var(--mute); white-space: nowrap; }
.pj-sc dt::before { content: ""; position: absolute; left: 0; top: 50%; width: var(--ldr); height: 1px; background: var(--ink); opacity: .42; }
.pj-sc dt::after { content: ""; position: absolute; left: -2px; top: calc(50% - 2px); width: 5px; height: 5px; border-radius: 50%; background: var(--ink); opacity: .7; }

/* ================================================================== 002: 2021 as found beside 2023, both whole */
.pj-ba { display: grid; grid-template-columns: calc(5 * var(--col) + 4 * var(--gap)) minmax(0, 1fr); column-gap: var(--gap); padding-left: var(--m); margin-top: 136px; align-items: end; overflow-x: clip; }
.pj-ba-a { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-width: 0; align-self: stretch; }
.pj-ba-b { min-width: 0; }
.pj-ba-img { position: relative; }

/* the category as annotation: the key, the term, what it means (day render side, reserved field) */
.pj-catb p { margin: 0; }
.pj-catb-k { color: var(--mute); }
.pj-catb-l { margin-top: 14px !important; font-family: var(--f-display); text-transform: uppercase; letter-spacing: .16em; font-size: clamp(24px, 2.1vw, 44px); line-height: 1.14; color: var(--ink); max-width: 12ch; }
.pj-catb-n { margin-top: 16px !important; font-family: var(--f-body); font-size: clamp(17px, 1.2vw, 21px); line-height: 1.42; color: var(--soft); max-width: 26ch; }

/* ================================================================== 004, 005: the reserved field */
.pj-field { display: grid; grid-template-columns: calc(3 * var(--col) + 2 * var(--gap)) minmax(0, 1fr); column-gap: var(--gap); padding: 0 var(--m); margin-top: 176px; }
.pj-field-col { display: flex; flex-direction: column; justify-content: space-between; gap: 64px; padding-top: 6px; min-width: 0; }
.pj-wfacts { display: flex; flex-wrap: wrap; gap: 26px 40px; align-items: flex-start; }
.pj-wfact b { display: block; font-family: var(--f-body); font-weight: 400; font-size: clamp(17px, 1.15vw, 21px); line-height: 1.3; }
.pj-wfact span { display: block; margin-top: 6px; font-family: var(--f-mono); font-size: 12px; color: var(--mute); }
.pj-wfact.is-lead, .pj-wfact.is-year { flex: 0 0 100%; margin-bottom: 14px; }
.pj-wfact.is-lead b { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .14em; font-size: clamp(24px, 2.1vw, 40px); line-height: 1.12; max-width: 12ch; }
.pj-wfact.is-year b { font-family: var(--f-display); font-size: clamp(96px, 9.5vw, 200px); line-height: .76; margin-left: -.05em; letter-spacing: 0; }
.pj-wfact.is-year span { margin-top: 18px; font-family: var(--f-body); font-size: clamp(17px, 1.2vw, 20px); color: var(--ink); }
.pj-field-rv .rv { width: 100%; }
/* the number of the empty site steps right so the planter can stand at the front left */
.pj-field-rv .rv-num { left: calc(5.5% + clamp(24px, 2.8%, 46px)); font-size: clamp(22px, 26cqh, 220px); }   /* clear of the proposed envelope (42%) */
.pj-fplant { position: absolute; left: 3%; bottom: var(--g, 14%); width: clamp(24px, 2.8%, 46px); aspect-ratio: 1; pointer-events: none; }

/* ================================================================== Next: the next project on the same ground line */
.pj-next { margin-top: 176px; padding: 0 var(--m); }
.pj-next-a { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.pj-next-pl { grid-column: 1 / span 6; position: relative; }
.pj-next-pl > .pl, .pj-next-pl > .rv { display: block; width: 100%; }
.pj-next-pl .rv-note { top: 7%; }
.pj-next-txt { grid-column: 7 / -1; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pj-next-k { color: var(--soft); transition: color .4s ease; }
.pj-next-row { display: flex; align-items: flex-end; gap: clamp(20px, 2.4vw, 44px); }
.pj-next-n { font-size: clamp(96px, 13vw, 280px); line-height: .76; margin-left: -.05em; transition: transform 1s var(--ease-out); }
.pj-next-tx { display: flex; flex-direction: column; gap: 6px; padding-bottom: 2px; }
.pj-next-t { font-family: var(--f-body); font-size: clamp(17px, 1.2vw, 21px); line-height: 1.3; white-space: nowrap; }
.pj-next-c { font-family: var(--f-body); font-size: 15px; line-height: 1.3; color: var(--soft); white-space: nowrap; }
.pj-next-s { font-family: var(--f-mono); font-size: 11.5px; color: var(--mute); white-space: nowrap; }
/* both stand on one ground line that overshoots to the sheet edges; on hover it draws darker */
.pj-next-g { position: absolute; left: calc(-1 * var(--m)); right: calc(-1 * var(--m)); bottom: -1px; height: 0; border-top: 1.4px solid var(--ink); opacity: .78; transition: opacity .5s ease; }
.pj-next-a:hover .pj-next-g, .pj-next-a:focus-visible .pj-next-g { opacity: 1; }
.pj-next-a:focus-visible .pj-next-pl { outline: 1px solid var(--ink); outline-offset: 6px; }
.pj-next { overflow-x: clip; }
.pj-next-a:hover .pj-next-n, .pj-next-a:focus-visible .pj-next-n { transform: translateX(16px); }
.pj-next-a:hover .pj-next-k { color: var(--ink); }
.pj-next-a:focus-visible { outline: none; }

.pj > .tb { margin-top: 96px; }

/* ================================================================== narrower screens */
@media (max-width: 1100px) {
  .pj-cue { display: none; }
}
@media (max-width: 1100px) and (min-width: 760px) {
  .pj-lead { grid-column: 7 / -1; }
  .pj-day { grid-template-columns: calc(var(--m) + 8 * var(--col) + 7 * var(--gap)) minmax(0, 1fr); }
  .pj-day .pj-sc { grid-template-columns: minmax(0, max-content) max-content; }
}
@media (max-width: 640px) {
  /* the header owns the top band on a phone: the sheet keeps only its lower corner marks */
  .pj-sheet > .marks i:nth-child(1), .pj-sheet > .marks i:nth-child(2) { display: none; }
}
@media (max-width: 759px) {
  .pj-top { min-height: 0; padding-bottom: 0; }
  .pj-num { font-size: 40vw; margin-top: 40px; }
  .pj-ann { --ldr: 28px; margin-top: 40px; grid-template-columns: minmax(0, max-content) max-content; column-gap: 10px; row-gap: 8px; }
  .pj-v.is-name { max-width: 62vw; margin-bottom: 4px; }
  .pj-v.is-name .pj-tw { font-size: 22px; letter-spacing: .18em; }
  .pj[data-ph] .pj-band { padding-top: 40px; }
  .pj-v { font-size: 16.5px; }
  .pj-sq { width: 9px; height: 9px; margin-left: 0; margin-right: -2px; }
  .pj-draw { position: relative; margin-top: 56px; }
  .pj-site { position: relative; margin-top: 64px; }
  .pj-band { grid-template-columns: minmax(0, 1fr); row-gap: 20px; padding-top: 16px; }
  .pj-line { grid-column: 1; white-space: normal; }
  .pj-lead { grid-column: 1; }
  .pj-sheet.is-pre .pj-draw { transform: translateX(14vw); }

  .pj-figs { grid-template-columns: minmax(0, 1fr); padding: 0; margin-top: 120px; }
  .pj-figs-col { order: 2; padding: 40px var(--m) 0; gap: 40px; }
  .pj-garage { order: 1; }
  .pj-figcap { padding: 0 var(--m); }
  .pj-facts { grid-template-columns: 1fr 1fr; gap: 28px var(--gap); }
  .pj-fact.is-xl .pj-fv { font-size: 38vw; }

  .pj-elev { margin-top: 140px; }
  .pj-day { grid-template-columns: minmax(0, 1fr); margin-top: 120px; row-gap: 14px; }
  .pj-day-side { display: contents; }
  .pj-day-foot { display: contents; }
  .pj-day-cap { order: 2; padding: 0 var(--m); }
  .pj-day .pj-catb { order: 3; padding: 40px var(--m) 0; }
  .pj-day .pj-scope { order: 4; padding: 40px var(--m) 0; }

  .pj-fig2 { grid-template-columns: minmax(0, 1fr); margin-top: 120px; row-gap: 40px; }
  .pj-fig2 .pj-fact.is-xl, .pj-frow, .pj-fig2.has-scope .pj-scope { grid-column: 1; grid-row: auto; margin-top: 0; }
  .pj-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--gap); }
  .pj-sc { --ldr: 28px; column-gap: 10px; }
  .pj-ba { grid-template-columns: minmax(0, 1fr); padding: 0; margin-top: 120px; row-gap: 0; }
  .pj-ba-a { display: contents; }
  .pj-ba-fig { order: 1; }
  .pj-ba-b { order: 2; margin-top: 48px; }
  .pj-ba .pj-scope { order: 3; padding: 40px var(--m) 0; }
  .pj-ba .pj-figcap { padding: 0 var(--m); }

  .pj-field { grid-template-columns: minmax(0, 1fr); margin-top: 120px; }
  .pj-field-col { order: 2; padding-top: 40px; gap: 40px; }
  .pj-field-rv { order: 1; }

  .pj-next { margin-top: 120px; }
  .pj-next-a { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .pj-next-txt { grid-column: 1; grid-row: 1; }
  .pj-next-pl { grid-column: 1; grid-row: 2; }
  .pj-next-n { font-size: 30vw; }
  .pj-next-row { flex-wrap: wrap; }
}

/* still: no motion at all (reduced motion or ?instant=1) */
.is-still .pj-sheet *, .is-still .pj-stage *, .is-still .pj-elev *, .is-still .pj-rise > *, .is-still .pj-next * { transition: none !important; animation: none !important; }