/* /work/<project>/, the project template (docs/18-project.md). The template's own stylesheet, moved in from its
   mockup, design/project/, linked after src/styles/index.css on project pages only (src/templates/project/Page.astro).
   The head is the homepage case sheet at rest (src/sections/case/), the same layout, sizes and words, so opening the
   sheet and then the page reads as one thing growing. After it, the
   blocks of docs/18's library, each on its own layout family so no two neighbours share a structure. Every value is
   the homepage's unless a comment gives the reason. */

/* ---------- the page ---------- */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* without JavaScript the page still reads whole (docs/14, The dot on every page, point 7). The fixes docs/14 proposes
   for every page, as on the /work/ mockup. The full stops are printed, the loader never covers the page, and the
   wordmark sits in the nav's slot with its full stop. The loader also stays away once it has played in this visit */
html:not(.js) .dot-anchor::before{transform:scale(1)}
/* with reduced motion every full stop is printed from the first paint. .no-gl only comes after the fonts, and the
   landing's pop would show it late (the review of 30 September 2026) */
.rm .dot-anchor::before{transform:scale(1)}
html:not(.js) .loader,.loader-seen .loader{display:none}
/* focus never hides under the nav (docs/18, Phone and tablet) */
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 96px)}

/* ---------- the head, the case sheet at rest ---------- */
/* the sheet's layout (.case-in), the picture on the left at 52% and the details beside it, as tall as the screen. On
   the page the nav sits over it, so the details start where every page head starts, clear of the nav (108px). The
   meta band closes the head's section, then --gap-h to the brief's own --gap-h */
.pj-hd{position:relative;padding-bottom:var(--gap-h);--pj-nav:calc(env(safe-area-inset-top,0px) + 89px)}
.pj-hd-in{display:flex;min-height:100svh}
/* the picture starts under the nav (89px, 79px on phones, measured), so the nav sits on the page's paper and the
   store's own header and logo show whole under it, where the sheet's painted picture ran to the top */
.pj-media{position:relative;flex:none;width:52%;min-height:100svh;overflow:hidden}
/* a real screenshot of the live site, from its top, so the client's own header and logo lead. The shot is taken at the
   slot's shape (tools/project-media/make-media.mjs), so the crop is small. Its ground is --mist until it loads, as the work
   cards' */
.pj-media picture{display:contents}
.pj-media img{position:absolute;left:0;right:0;bottom:0;top:var(--pj-nav);width:100%;height:calc(100% - var(--pj-nav));object-fit:cover;object-position:50% 0;display:block;background:var(--mist)}
/* the store is light too, so a 1px rule keeps the screen apart from the page beside it */
.pj-media::after{content:"";position:absolute;left:0;right:0;bottom:0;top:var(--pj-nav);box-shadow:inset -1px 0 0 var(--line),inset 0 1px 0 var(--line);pointer-events:none}
.pj-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:20px;padding:calc(env(safe-area-inset-top,0px) + 108px) clamp(24px,4vw,64px) 40px}
.pj-top{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:42px}
/* the breadcrumb, two levels deep (docs/14, The page head). Its separator is a slash the screen reader skips. It stands
   where the sheet's position and Close are, the position (06/06) stays on the sheet */
.pj-crumbs ol{display:flex;flex-wrap:wrap;gap:.45em;margin:0;padding:0;list-style:none}
.pj-crumbs li+li::before{content:"/" / "";margin-right:.45em;color:var(--fg-3)}
.pj-crumbs a{position:relative;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .3s}
.pj-crumbs a:hover{border-color:var(--red)}
/* 9px up, so it stays clear of the nav's links on a phone on its side, 17px down, so it is 44px on touch */
.pj-crumbs a::after{content:"";position:absolute;inset:-9px -6px -17px}
/* the name, the sheet's .case-name, as the page's h1. Its full stop is station 0, where the dot lands */
.pj-name{margin:clamp(10px,4vh,48px) 0 0;font-family:var(--display);font-weight:800;font-size:clamp(46px,5.6vw,100px);letter-spacing:-.052em;line-height:.88}
.pj-name:focus{outline:none}
/* Contact's headline takes focus when the head's action glides there (project.js), as the h1 does on arrival */
#contact .cta-title:focus{outline:none}
.pj-type{margin:0;font-size:16px;color:var(--fg-2)}
/* the outcome, one line at the Lead level, the sheet's description */
.pj-desc{margin:4px 0 0;font-family:var(--display);font-weight:500;font-size:clamp(20px,1.75vw,27px);letter-spacing:-.022em;line-height:1.25;max-width:32ch}
/* the sheet's label rows with a red dot (.case-hl), drawn with --line and --fg so they follow the theme (docs/14,
   Section heads and labels) */
.pj-hl{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pj-hl li{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:16px;font-weight:500}
.pj-hl li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--red)}
.pj-actions{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:auto;padding-top:10px}
/* the sheet's action, in the theme's colours instead of its fixed ink (docs/14, Buttons and links) */
.pj-cta{background:var(--fg);color:var(--bg)}
.pj-link{position:relative;font-size:15px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .3s}
.pj-link:hover{border-color:var(--red)}
.pj-link::after{content:"";position:absolute;inset:-10px -6px}
.pj-link[data-live-state]{border-bottom:0}
.pj-link[data-live-state]::after{content:none}
/* the name rises with the page's intro and the details fade up with it, never with the scroll, so they are held here
   as the hero's are (hero.css). Opened from the case sheet they stand at rest, as the sheet's did (.pj-carried) */
.js:not(.no-libs):not(.rm):not(.pj-carried) .pj-name .line-in{transform:translateY(112%)}
.js:not(.no-libs):not(.rm):not(.pj-carried) .pj-hd .fade-in{opacity:0;transform:translateY(14px)}
.pj-carried .pj-name .line{overflow:visible}

/* ---------- the meta band (Mouthwash's one row, Exo Ape's label over value) ---------- */
/* only what the head does not say, on a 1px rule across the 12 columns, each field a label over its value */
.pj-meta{padding:clamp(48px,7vh,72px) var(--pad) 0}
.pj-dl{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:28px;margin:0;padding-top:15px;border-top:1px solid var(--line)}
/* row one's fields span what render.mjs gives them (--span), so the row always fills the 12 columns */
.pj-f{grid-column:span var(--span,4);min-width:0}
.pj-f dt{margin:0}
.pj-f dd{margin:8px 0 0;font-size:17px;line-height:1.45}
.pj-f-svc{grid-column:1/span 6}
.pj-f-tools{grid-column:7/span 6}
/* the services as the case sheet's outline tags in the theme's colours. They link to their pages once those exist */
.pj-tags,.pj-tools{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.pj-tags{gap:8px}
.pj-tag{padding:7px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;line-height:1.3;font-weight:500}
/* the tools, each supplied icon at its tools.js size before its name in our type, never alone (CLAUDE.md rule 4) */
.pj-tools{gap:10px 20px}
.pj-tools li{display:inline-flex;align-items:center;gap:8px}
.pj-tools img{display:block}

/* ---------- blocks ---------- */
/* every block is a section of its own, --gap-h above and below, so any two are --gap-s apart. It opens with its .sec-h,
   whose label is the block's h2 (docs/18, The work, as blocks) */
.pj-b{padding-block:var(--gap-h)}
.pj-b .sec-h h2,.pj-end h2,.pj-spec h3{margin:0}
.pj-b>.sec-h{margin-bottom:clamp(28px,5vh,56px)}
.pj-fig{margin:0}
.pj-fig figcaption{margin-top:12px;max-width:64ch;font-size:15px;line-height:1.45;color:var(--fg-2);transition:color .8s var(--e-out)}
/* a picture that opens the lightbox, the site's focus ring (docs/14, Buttons and links) */
[data-lb]{display:block;color:inherit}
[data-lb]:focus-visible{outline:2px solid var(--red);outline-offset:4px}

/* ---------- the brief, one statement alone on ink (Ragged Edge, Immersive Garden) ---------- */
/* in the text face, so it never reads as the homepage's studio statement (display face, Statement level) on another
   ground. A new size between the Lead and the Statement, clamp(26px,2.6vw,40px), for one sentence of the client's need */
.pj-brief-t{margin:0;font-family:var(--text);font-weight:500;font-size:clamp(26px,2.6vw,40px);line-height:1.25;letter-spacing:-.012em;max-width:30ch}
.pj-brief-t .line{display:block}
/* a line that still has to wrap (another language, a narrow phone) splits into even halves, never one word alone, as
   the headlines wrap (docs/14, Type) */
.pj-brief-t .line-in{text-wrap:balance}

/* ---------- identity, the mark sheet and the palette and type (Collins, Koto) ---------- */
/* the logo's two forms as supplied, each on the store's own cream (its colour comes from the content, as a client's
   panel colour does on the homepage), where it is used under it */
.pj-forms{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:clamp(48px,7vh,72px);margin:0;padding:0;list-style:none}
.pj-forms>li:nth-child(1){grid-column:1/span 6}
.pj-forms>li:nth-child(2){grid-column:7/span 6}
.pj-form{display:grid;place-items:center;aspect-ratio:3/2;border-radius:10px;background:var(--g);box-shadow:inset 0 0 0 1px var(--line)}
.pj-form img{display:block;height:auto}
.pj-form-wordmark{width:64%}
.pj-form-monogram{width:auto;height:52%}
.pj-spec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:40px;margin-top:clamp(48px,7vh,72px)}
.pj-sw{grid-column:1/span 6}
.pj-ty{grid-column:7/span 6}
.pj-spec h3{margin-bottom:18px}
.pj-spec ul{margin:0;padding:0;list-style:none}
/* the colours as swatches with their names and values as text, never baked into a picture */
.pj-sw ul{display:flex;flex-wrap:wrap;gap:20px 28px}
.pj-sw li{display:grid;gap:6px;min-width:76px}
.pj-sw-c{width:56px;height:56px;border-radius:8px;background:var(--c);box-shadow:inset 0 0 0 1px var(--line)}
.pj-sw-n{font-size:15px;font-weight:600}
.pj-sw-v{font-size:13.5px;color:var(--fg-2);font-variant-numeric:tabular-nums}
/* the type set in itself, its sample at the Title size, its name and role under it */
.pj-ty li{display:grid;gap:8px}
.pj-ty li+li{margin-top:24px}
.pj-ty-s{font-size:clamp(24px,2.05vw,34px);line-height:1.2}
.pj-ty-n{font-size:15px;line-height:1.45;color:var(--fg-2)}
.pj-ty-n b{font-weight:600;color:var(--fg)}

/* ---------- the store, the page tour (AREA 17) ---------- */
/* whole pages two up, each cropped to its first 1.5 screens with a 64px fade to the ground, opening at full length */
.pj-tour{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:clamp(48px,7vh,72px);margin:0;padding:0;list-style:none}
.pj-tl{display:flex;justify-content:space-between;gap:16px;margin-bottom:12px;color:var(--fg)}
.pj-tp{color:var(--fg-2);font-variant-numeric:tabular-nums}
.pj-tile{position:relative;aspect-ratio:662/621;overflow:hidden;border-radius:10px;background:var(--mist)}
.pj-tile img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.pj-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);background:linear-gradient(to bottom,transparent calc(100% - 64px),var(--bg));pointer-events:none;transition:background .8s var(--e-out)}

/* ---------- on a phone, three screens level (Porto Rocha, the phone chapter study) ---------- */
/* columns 2 to 4, 6 to 8 and 10 to 12, sized from the screen's height so a screen and its caption fit on any screen.
   A new corner, 12% of the width (38px at 319px), for a phone's own screen (proposed in docs/18) */
.pj-phones{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:clamp(48px,7vh,72px);margin:0;padding:0;list-style:none}
.pj-phones>li:nth-child(1){grid-column:2/span 3}
.pj-phones>li:nth-child(2){grid-column:6/span 3}
.pj-phones>li:nth-child(3){grid-column:10/span 3}
.pj-phones .pj-fig{width:min(100%,calc((100svh - 180px) * 390 / 844))}
/* the row reaches column 12's edge at every width, as at 1440 */
.pj-phones>li{display:grid;justify-items:end}
.pj-ph{position:relative;overflow:hidden;border-radius:12% / 5.55%;background:var(--mist)}
.pj-ph img{display:block;width:100%;height:auto}
.pj-ph::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}

/* ---------- what it does, the details grid (Wolff Olins, Pentagram) ---------- */
/* a full row, then a pair, tops aligned. A close up is shown at most at its own size, left aligned on its slot */
.pj-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:clamp(48px,7vh,72px);margin:0;padding:0;list-style:none;align-items:start}
.pj-grid>.is-full{grid-column:1/-1}
.pj-grid>.is-half:nth-child(2){grid-column:1/span 6}
.pj-grid>.is-half:nth-child(3){grid-column:7/span 6}
.pj-cu img{display:block;width:min(100%,var(--w));height:auto;border-radius:10px;box-shadow:0 0 0 1px var(--line)}
.pj-cu picture{display:contents}

/* ---------- the admin, a marked place (mockup only, docs/18) ---------- */
.pj-slot{position:relative;display:grid;place-items:center;gap:16px;aspect-ratio:16/7;padding:24px;border:1px dashed var(--line);border-radius:10px;text-align:center;color:var(--fg-2)}
.pj-slot p{margin:0;max-width:44ch}

/* ---------- results, ruled rows (DEPT, Wolff Olins, Metalab) ---------- */
/* the value at the Title level, never the Number level, which on phones would be the homepage's facts row */
.pj-res-lead{margin:0 0 clamp(28px,5vh,56px);max-width:44ch;font-family:var(--display);font-weight:500;font-size:clamp(20px,1.75vw,27px);line-height:1.25;letter-spacing:-.022em}
.pj-res{margin:0;border-top:1px solid var(--line)}
.pj-r{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.pj-r dt{grid-column:1/span 4}
.pj-r dd{margin:0}
.pj-r-v{grid-column:5/span 3;font-family:var(--display);font-weight:800;font-size:clamp(24px,2.05vw,34px);line-height:.95;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pj-r-n{grid-column:8/span 3;font-size:15px;color:var(--fg-2)}
.pj-r-s{grid-column:11/span 2;font-size:15px;color:var(--fg-2)}

/* ---------- the quote (Wolff Olins, Exo Ape) ---------- */
/* the words at the Title level in Epilogue 500, the attribution under them, never beside them in a column */
.pj-q{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin:0}
.pj-q>*{grid-column:3/span 8}
.pj-q blockquote{margin:0}
.pj-q p{margin:0;max-width:36ch;font-family:var(--display);font-weight:500;font-size:clamp(24px,2.05vw,34px);line-height:1.3;letter-spacing:-.022em;text-indent:-.42em}
.pj-q figcaption{margin-top:24px;font-size:17px}
.pj-q figcaption b{font-weight:600}
.pj-q figcaption span{color:var(--fg-2)}

/* ---------- the end, credits (Locomotive) and the next project (Pentagram) ---------- */
.pj-cr{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:15px;border-top:1px solid var(--line)}
.pj-cr h2{grid-column:1/span 6}
.pj-crl{grid-column:7/span 6;margin:0}
.pj-c{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:24px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.pj-c:first-child{padding-top:0}
.pj-c dt{grid-column:1/span 3;color:var(--fg-2)}
.pj-c dd{grid-column:4/span 3;margin:0}
.pj-next{margin-top:clamp(80px,12vh,140px)}
.pj-all{position:relative;font-size:15px;font-weight:600;text-decoration:none;color:var(--fg);border-bottom:1px solid var(--line);transition:border-color .3s}
.pj-all:hover{border-color:var(--red)}
.pj-all::after{content:"";position:absolute;inset:-10px -6px}
/* one link, the next name at the Title level with its drawn full stop (a card title, not a station), its outcome, and
   its own head picture small at the right */
.pj-nx{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;margin-top:clamp(24px,4vh,40px);color:inherit;text-decoration:none;border-radius:10px}
.pj-nx:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.pj-nx-t{grid-column:1/span 8}
.pj-nx-n{font-family:var(--display);font-weight:800;font-size:clamp(24px,2.05vw,34px);line-height:.95;letter-spacing:-.04em;border-bottom:1px solid var(--line);transition:border-color .3s}
.pj-nx-n i{display:inline-block;width:.2em;height:.2em;margin-left:.04em;border-radius:50%;background:var(--red)}
.pj-nx:hover .pj-nx-n,.pj-nx:focus-visible .pj-nx-n{border-color:var(--red)}
.pj-nx-o{display:block;margin-top:14px;max-width:36ch;font-family:var(--display);font-weight:500;font-size:clamp(20px,1.75vw,27px);line-height:1.25;letter-spacing:-.022em;color:var(--fg-2);transition:color .8s var(--e-out)}
.pj-nx-p{grid-column:10/span 3}
.pj-nx-p img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;border-radius:10px;box-shadow:0 0 0 1px var(--line)}

/* ---------- the lightbox (docs/18, The lightbox), always ink ---------- */
/* a native dialog in the top layer. It carries the ink theme's own values, whatever the page's theme is */
.lb{--bg:var(--ink);--fg:var(--paper);--fg-2:rgba(243,241,236,.62);--line:rgba(243,241,236,.14);position:fixed;inset:0;display:none;flex-direction:column;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:var(--bg);color:var(--fg)}
.lb[open]{display:flex}
.lb::backdrop{background:transparent}
html:has(dialog.lb[open]){overflow:hidden}
.lb-top,.lb-bot{flex:none;display:flex;align-items:center;gap:16px;min-height:56px;padding:10px var(--pad)}
.lb-name,.lb-count,.lb-cap{margin:0;font-size:15px;line-height:1.45}
.lb-name{color:var(--fg-2)}
.lb-count{margin-right:auto;font-variant-numeric:tabular-nums}
.lb-count b{font-weight:600}
.lb-count span{color:var(--fg-2)}
.lb-x,.lb-nav button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);color:var(--fg);font-size:14px;font-weight:600;transition:background-color .3s,color .3s,box-shadow .3s}
.lb-x:hover,.lb-nav button:not([aria-disabled="true"]):hover{background:var(--fg);color:var(--bg)}
.lb-x:focus-visible,.lb-nav button:focus-visible,.lb-stage:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.lb-nav button[aria-disabled="true"]{opacity:.4}
.lb-stage{position:relative;flex:1;min-height:0;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;padding:0 var(--pad);overflow:hidden}
/* the stage spans the screen, so its focus ring sits inside it */
.lb-stage:focus-visible{outline-offset:-2px}
.lb-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:10px}
/* a whole page scrolls in the stage at its own width (at most 1024px), the smooth scroll stopped (data-lenis-prevent) */
.lb.is-tall .lb-stage{grid-template-rows:auto;place-items:start center;overflow-y:auto;overscroll-behavior:contain;padding-block:8px}
.lb.is-tall .lb-img{width:min(1024px,100%);max-height:none;border-radius:10px 10px 0 0}
.lb-bot{justify-content:space-between}
.lb-cap{max-width:64ch;color:var(--fg-2)}
.lb-nav{flex:none;display:flex;gap:8px}
/* the picture that grows from its thumbnail on opening and shrinks back on closing (docs/18, proposed, 0.5s expo.inOut) */
.lb-fly{position:fixed;z-index:2;display:block;margin:0;object-fit:cover;object-position:50% 0;border-radius:10px;pointer-events:none}

/* ---------- the marks on samples (the dev server only) and on claims to confirm, and the page's note. The preview
   tools' own rules are in ./preview.css, which only the dev server loads ---------- */
.pv-tag{display:inline-block;padding:4px 10px;border-radius:999px;background:#000;color:#fff;font:600 12px/1.3 var(--text);letter-spacing:.02em;vertical-align:middle;white-space:nowrap}
.pj-slot .pv-tag{position:absolute;left:16px;top:16px}
.pj-q>.pv-tag{justify-self:start;margin-bottom:24px}
.pv-toast{position:fixed;left:50%;bottom:24px;z-index:91;transform:translateX(-50%);padding:10px 16px;border-radius:999px;background:#000;color:#fff;font:500 14px/1.3 var(--text);opacity:0;pointer-events:none;transition:opacity .3s}
.pv-toast.on{opacity:1}

/* ---------- the page from the case sheet (the carry prototype, docs/18, Moving between pages) ---------- */
/* a same document cross fade of the whole page, off under reduced motion. The homepage preview declares the same */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  /* the sheet's own, the picture on top at 42% of the screen, the details under it */
  .pj-hd-in{flex-direction:column;min-height:0}
  .pj-media{width:100%;min-height:0;height:42svh}
  .pj-media::after{box-shadow:inset 0 -1px 0 var(--line),inset 0 1px 0 var(--line)}
  .pj-body{padding-top:28px}
  .pj-f{grid-column:span var(--span-t,4)}
  .pj-f-svc,.pj-f-tools{grid-column:1/-1}
  .pj-sw,.pj-ty{grid-column:1/-1}
  .pj-phones>li:nth-child(1){grid-column:1/span 4}
  .pj-phones>li:nth-child(2){grid-column:5/span 4}
  .pj-phones>li:nth-child(3){grid-column:9/span 4}
  /* the row starts under the label and ends under the count, with equal gaps */
  .pj-phones>li:first-child{justify-items:start}
  .pj-phones>li:nth-child(2){justify-items:center}
  .pj-phones>li:last-child{justify-items:end}
  .pj-r dt{grid-column:1/span 5}
  .pj-r-v{grid-column:6/span 3}
  .pj-r-n,.pj-r-s{grid-column:9/span 4}
  .pj-q>*{grid-column:2/span 10}
  .pj-cr h2{grid-column:1/-1;margin-bottom:18px}
  .pj-crl{grid-column:1/-1}
  .pj-c{grid-template-columns:repeat(12,minmax(0,1fr))}
  .pj-c dt{grid-column:1/span 5}
  .pj-c dd{grid-column:6/span 7}
  .pj-nx-t{grid-column:1/span 7}
  .pj-nx-p{grid-column:9/span 4}
}
@media (max-width:760px){
  html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px)}
  .pj-hd{--pj-nav:calc(env(safe-area-inset-top,0px) + 79px)}
  .pj-body{gap:16px;padding-bottom:32px}
  .pj-name{margin-top:6px}
  /* the compact nav's full width glass bar was there for the wordmark, which now reads over anything. The Menu button
     keeps its own glass */
  .pj-f{grid-column:span 6}
  .pj-f-svc,.pj-f-tools{grid-column:1/-1}
  .pj-forms>li:nth-child(n),.pj-grid>li.is-half:nth-child(n),.pj-phones>li:nth-child(n){grid-column:1/-1}
  /* the admin's marked place grows with its words, the mark above them */
  .pj-slot{aspect-ratio:auto;min-height:220px;align-content:center}
  .pj-slot .pv-tag{position:static;justify-self:center}
  .pj-tour{grid-template-columns:1fr}
  .pj-tile{aspect-ratio:3/4}
  /* the three screens stack near real size, so no page has two sideways rails */
  .pj-phones>li:nth-child(n){display:grid;justify-items:center}
  /* a close up's phone cut from the store's own phone layout, near its own size */
  .pj-cu img{width:min(100%,var(--wp,var(--w)))}
  .pj-phones .pj-fig{width:min(319px,100%)}
  .pj-r{row-gap:6px}
  .pj-r dt,.pj-r-s{grid-column:1/-1}
  .pj-r-v{grid-column:1/span 5}
  .pj-r-n{grid-column:6/span 7}
  .pj-q>*{grid-column:1/-1}
  .pj-c dt{grid-column:1/span 6}
  .pj-c dd{grid-column:7/span 6}
  .pj-next .sec-h{flex-wrap:wrap}
  .pj-nx{row-gap:18px}
  .pj-nx-p{grid-column:1/-1;grid-row:1}
  .pj-nx-t{grid-column:1/-1}
  .lb-bot{flex-direction:column;align-items:stretch}
  .lb-nav{justify-content:space-between}
}
/* short screens, a phone on its side. The head keeps the sheet's split, the picture at 42% and the full height, so it
   never shrinks to a sliver, and the three screens stay in a row, sized from the height */
@media (max-height:560px){
  .pj-hd-in{flex-direction:row;min-height:100svh}
  /* the picture is one screen tall and held beside the details as they scroll, so the header shows whole and the box
     is the case sheet's (the review of 30 September 2026) */
  .pj-media{width:42%;position:sticky;top:0;align-self:flex-start;height:100svh;min-height:0}
  .pj-media::after{box-shadow:inset -1px 0 0 var(--line),inset 0 1px 0 var(--line)}
  .pj-body{padding-top:calc(env(safe-area-inset-top,0px) + 70px)}
  .pj-phones>li:nth-child(1){grid-column:1/span 4}
  .pj-phones>li:nth-child(2){grid-column:5/span 4}
  .pj-phones>li:nth-child(3){grid-column:9/span 4}
  .pj-phones>li:nth-child(n){justify-items:center}
  /* the three screens fill their four columns up to 319px, readable, the caption may fall below the fold. Sized to a
     390px window they fell to 97px (the review of 30 September 2026) */
  .pj-phones .pj-fig{width:min(319px,100%)}
  .lb-top,.lb-bot{min-height:48px;padding-block:4px}
}
/* in a strip the store's header and its campaign cannot both show, so each shot's focus point frames the campaign
   (data.js, HEAD.shots focus), and the logo shows whole in Identity. Portrait tablets keep the top, where both show */
@media (max-width:1100px) and (min-width:761px) and (min-height:561px) and (orientation:landscape){
  .pj-media img{object-position:var(--pj-focus-wide,50% 0)}
}
@media (max-width:760px) and (min-height:561px){
  .pj-media img{object-position:var(--pj-focus-phone,50% 0)}
}
@media (forced-colors:active){
  .pj-tile::after,.pj-ph::after{box-shadow:none;border:1px solid CanvasText}
  /* the swatches and the logo's grounds are the content, kept, with an edge */
  .pj-sw-c,.pj-form{forced-color-adjust:none;box-shadow:none;border:1px solid CanvasText}
  .pj-tag{box-shadow:none;border:1px solid CanvasText}
  .lb-x,.lb-nav button{box-shadow:none;border:1px solid ButtonText}
}

.pj-native-results .pj-r-n p,.pj-native-results .pj-r-s p{margin:0}
  .pj-native-results .pj-r-n p+p,.pj-native-results .pj-r-s p+p{margin-top:.5em}
  .pj-native-results .pj-r-v,.pj-native-results .pj-r-n,.pj-native-results .pj-r-s{overflow-wrap:anywhere}

.pj-native-quote-text{white-space:pre-line;overflow-wrap:anywhere}
.pj-quote-s>.pj-quote-portrait{display:block;grid-column:1/-1;width:112px;margin:0 auto 24px}
@media(max-width:760px){.pj-quote-s>.pj-quote-portrait{width:80px}}