/* =========================================================================
   BORZ Tattoo — css/portfolyo.css · Portfolio (body[data-page="portfolyo"])
   Owner: Agent C. Tokens and components come from css/style.css.
   Every JS-dependent hidden state is scoped under `.pf-ready` (added by
   js/portfolyo.js), so the page stays fully visible if this script fails.

   01 Hero                 04 Tiles · grid view       07 Lightbox · layout
   02 Toolbar              05 Tiles · list view       08 Lightbox · variants
   03 Grid                 06 Tiles · entrances       09 Reduced motion
   ========================================================================= */

/* ===== 01 · Hero ======================================================= */
.pf-hero{position:relative;isolation:isolate;overflow:clip;padding:calc(var(--header-h) + 48px) 0 var(--s-8)}
.pf-hero__ink{position:absolute;left:0;top:0;z-index:-3;width:100%;height:100%;max-width:none;pointer-events:none}
.js .pf-hero__ink{opacity:0;transition:opacity 1400ms var(--ease-out)}
.js .pf-hero.is-entered .pf-hero__ink{opacity:1}
.pf-hero__glow{position:absolute;z-index:-2;right:-18vw;top:-12vh;width:90vmin;height:90vmin;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side, rgba(184,146,90,.15), rgba(122,46,34,.07) 55%, transparent 100%)}
.pf-hero__fade{position:absolute;z-index:-1;left:0;right:0;bottom:0;height:45%;pointer-events:none;background:linear-gradient(to top, var(--ink) 0%, rgba(11,10,9,.6) 45%, transparent 100%)}
.pf-hero__grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:24px}
.pf-hero__title{max-width:11ch;transform-origin:0 100%}
.pf-hero__title .accent{color:var(--brass-2)}
.pf-hero__lede{max-width:40ch}
.pf-hero__meta{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:24px;margin-top:16px}
.pf-hero__meta > div{position:relative;display:grid;gap:10px;padding-top:18px}
.pf-hero__meta > div::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-2);transform-origin:0 50%}
.pf-hero__meta dt{color:var(--ash)}
.pf-hero__meta dd{margin:0;font-size:clamp(2.75rem, 5vw, 5.25rem)}
.pf-hero__stack{display:none}

@media (min-width:900px){
  .pf-hero{padding:calc(var(--header-h) + 12vh) 0 var(--s-9);padding-top:calc(var(--header-h) + 12svh)}
  .pf-hero__grid{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:minmax(0,1fr) auto auto;column-gap:var(--col-gap);row-gap:28px;align-items:end}
  .pf-hero__eyebrow{grid-column:1 / 9;grid-row:1}
  .pf-hero__title{grid-column:1 / 9;grid-row:2}
  .pf-hero__lede{grid-column:1 / 7;grid-row:3}
  .pf-hero__meta{grid-column:10 / 13;grid-row:3;margin:0;align-self:end}
  .pf-hero__meta[style*="--n:3"]{grid-column:9 / 13;gap:20px}
  .pf-hero__stack{position:relative;display:block;grid-column:9 / 13;grid-row:1 / 3;align-self:center;height:clamp(260px, min(30vw, 44vh), 540px);height:clamp(260px, min(30vw, 44svh), 540px);pointer-events:none}
}
/* short laptops: keep the first gallery row peeking above the fold */
@media (min-width:900px) and (max-height:820px){
  .pf-hero{padding-bottom:var(--s-7)}
  .pf-hero__card{width:clamp(140px, min(13.5vw, 24vh), 260px)}
}

/* Fanned stack of three works (decorative). Wrapper = mouse depth (core writes
   inline transform), inner = fan pose + "deal" entrance. */
.pf-hero__card{position:absolute;left:50%;top:50%;width:clamp(150px, 13.5vw, 260px);translate:-50% -50%}
.pf-hero__card--2{z-index:2}
.pf-hero__card-i{
  display:block;aspect-ratio:4/5;border-radius:var(--r-l);overflow:hidden;background:var(--exhibit);
  box-shadow:var(--sh-card),0 0 0 1px var(--line);
  transform:translate(var(--ox,0),var(--oy,0)) rotate(var(--rot,0deg));
}
.pf-hero__card-i img{width:100%;height:100%;object-fit:cover}
.pf-hero__card--1 .pf-hero__card-i{--ox:-52%;--oy:8%;--rot:-12deg}
.pf-hero__card--2 .pf-hero__card-i{--ox:2%;--oy:-6%;--rot:3deg}
.pf-hero__card--3 .pf-hero__card-i{--ox:54%;--oy:12%;--rot:13deg}
.pf-hero__badge{position:absolute;z-index:3;right:2%;top:-4%;width:112px;height:112px}

@media (prefers-reduced-motion:no-preference){
  /* P01 — h1 blur reveal + local scale(1.04 → 1) */
  .js:not(.reveal-all) .pf-hero__title[data-reveal="blur"]:not(.is-in){scale:1.04}
  .js .pf-hero__title[data-reveal="blur"].is-in:not(.reveal-done){
    scale:1;
    transition:opacity var(--t-2xl) var(--ease-out) var(--d,0ms),filter var(--t-2xl) var(--ease-out) var(--d,0ms),translate var(--t-2xl) var(--ease-out) var(--d,0ms),scale 1400ms var(--ease-expo) var(--d,0ms);
  }
  /* meta rules draw, cards are dealt from below into their fan; the counters
     fade in with their rule (never a bare "0" next to the still-blurred title) */
  .js:not(.reveal-all) .pf-ready .pf-hero:not(.is-entered) .pf-hero__meta > div::before{transform:scaleX(0)}
  .pf-ready .pf-hero.is-entered .pf-hero__meta > div::before{transition:transform 1300ms var(--ease-expo) calc(380ms + var(--mi,0) * 140ms)}
  .js:not(.reveal-all) .pf-ready .pf-hero:not(.is-entered) .pf-hero__meta dd{opacity:0;translate:0 .12em}
  .pf-ready .pf-hero.is-entered .pf-hero__meta dd{transition:opacity 600ms var(--ease-out) calc(380ms + var(--mi,0) * 140ms),translate 1000ms var(--ease-expo) calc(380ms + var(--mi,0) * 140ms)}
  .js:not(.reveal-all) .pf-ready .pf-hero:not(.is-entered) .pf-hero__card-i{opacity:0;transform:translate(calc(var(--ox,0) * .2), 70vh) rotate(calc(var(--rot,0deg) * -1.6))}
  .pf-ready .pf-hero.is-entered .pf-hero__card-i{transition:transform 1500ms var(--ease-expo) calc(420ms + var(--ci,0) * 130ms),opacity 500ms var(--ease-out) calc(420ms + var(--ci,0) * 130ms)}
  .js:not(.reveal-all) .pf-ready .pf-hero:not(.is-entered) .pf-hero__badge{opacity:0;scale:.4}
  .pf-ready .pf-hero.is-entered .pf-hero__badge{transition:opacity 600ms var(--ease-out) 1100ms,scale 900ms var(--ease-back) 1100ms}
}

/* ===== 02 · Toolbar (sticky from 600px wide AND 600px tall; static on phones,
   portrait or landscape, where a wrapped chip bar would eat the screen) ===== */
.pf-collection{position:relative}
.pf-toolbar{
  position:relative;z-index:var(--z-sticky);padding-block:12px;
  background:var(--header-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-block:1px solid var(--line);
  transition:transform 450ms var(--ease-expo);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .pf-toolbar{background:rgba(11,10,9,.94)} }
.pf-toolbar__inner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 16px}
.pf-filters{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.pf-view{display:flex;align-items:center;gap:8px}
.pf-view__btn{width:40px;height:40px}
.pf-view__btn .icon{width:18px;height:18px}
.pf-view__btn[aria-pressed="true"]{background:var(--bone);border-color:var(--bone);color:var(--ink)}
@media (hover:hover){ .pf-view__btn[aria-pressed="true"]:hover{background:var(--bone-2);border-color:var(--bone-2)} }
.pf-count{justify-self:end;margin:0;color:var(--ash);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:599px){
  .pf-filters .chip{height:38px;padding:0 15px;font-size:13px}
}
@media (min-width:600px) and (min-height:600px){
  .pf-toolbar{position:sticky;top:var(--header-h)}
  html[data-header="hidden"] .pf-toolbar.is-stuck{transform:translateY(calc(-1 * var(--header-h)))}
}
/* 600–1279 (tablets, small laptops — the chips need two rows here anyway):
   chips on the left, view toggle over the count on the right, so the sticky
   bar is two rows (~110px) instead of three */
@media (min-width:600px) and (max-width:1279px){
  .pf-toolbar__inner{grid-template-rows:auto auto;gap:6px 16px}
  .pf-filters{grid-column:1;grid-row:1 / span 2;align-self:center;gap:6px}
  .pf-filters .chip{height:38px;padding:0 14px;font-size:13px}
  .pf-view{grid-column:2;grid-row:1;justify-self:end;align-self:start}
  .pf-count{grid-column:2;grid-row:2;align-self:end;line-height:38px}
}
/* ≥1280: one row — chips · view toggle · count */
@media (min-width:1280px){
  .pf-toolbar__inner{grid-template-columns:minmax(0,1fr) auto auto;column-gap:24px}
  .pf-filters{grid-column:auto}
  .pf-count{min-width:64px;text-align:right}
}
@media (min-width:1280px) and (max-width:1439px){
  .pf-filters{gap:6px}
  .pf-filters .chip{height:38px;padding:0 14px;font-size:13px}
}
/* The floating Text button (right 16px, 56px wide) sits over the count's
   spot while the bar rests at the bottom of the first screen: until the bar is
   stuck under the header, the count slides left by the overlap (+8px). Only
   translate — no column changes, so the chips never re-wrap. In the stacked
   layout the count moves into empty chip-row space; in the one-row layout the
   shift is capped by the 24px gap to the view toggle. */
@media (min-width:600px){
  .pf-count{translate:calc(-1 * var(--fab-room, 0px)) 0;transition:translate 450ms var(--ease-expo)}
  .pf-toolbar.is-stuck .pf-count{translate:0 0}
}
@media (min-width:600px) and (max-width:1279px){ .pf-count{--fab-room:max(0px, 80px - var(--gutter))} }
@media (min-width:1280px){ .pf-count{--fab-room:clamp(0px, 80px - var(--gutter), 24px)} }
@media (prefers-reduced-motion:reduce){ .pf-toolbar,.pf-count{transition:none} }
/* without JS the chips and view buttons could not do anything: show only the count */
.no-js .pf-filters,.no-js .pf-view{display:none}
.no-js .pf-toolbar{position:relative;top:auto}
.no-js .pf-toolbar__inner{display:flex;justify-content:flex-end}
.no-js .pf-count{translate:none}

/* ===== 03 · Grid ======================================================= */
.pf-grid{--cols:1;--pf-stagger:0px;--pf-skew:0deg;padding-block:var(--s-8) var(--section-y)}
.pf-grid[data-view="grid"]{
  display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--col-gap);row-gap:clamp(40px,4.5vw,72px);
  padding-bottom:calc(var(--section-y) + var(--pf-stagger));
}
@media (min-width:480px){ .pf-grid{--cols:2;--pf-stagger:48px} }
@media (min-width:900px){ .pf-grid{--cols:3;--pf-stagger:clamp(56px,6vw,120px)} }
/* gallery-wall rhythm: JS writes data-col on visible tiles; odd columns drop */
.pf-grid[data-view="grid"] .pf-tile[data-col="1"]{translate:0 var(--pf-stagger)}

/* ===== 04 · Tiles · grid view ========================================== */
.pf-tile{position:relative;display:flex;flex-direction:column;gap:18px;min-width:0;margin:0;scroll-margin-top:calc(var(--header-h) + 24px);scroll-margin-bottom:24px}
@media (min-width:600px){ .pf-tile{scroll-margin-top:calc(var(--header-h) + 128px)} }
.pf-tile__btn{position:relative;display:block;width:100%;border-radius:var(--r-l);text-align:left;color:inherit}
.pf-tile__frame{display:block;box-shadow:var(--sh-card);transform:skewY(var(--pf-skew,0deg));transform-origin:50% 50%;backface-visibility:hidden}
/* grid frames keep the photos' own 2:3 format (the whole tattoo, no crop) — the lightbox card matches it */
.pf-grid[data-view="grid"] .pf-tile__frame{aspect-ratio:2/3}
.pf-tile__frame .pf-tile__img{transition:transform 800ms var(--ease-expo);-webkit-user-drag:none;user-select:none}
.pf-tile__frame::after{
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(to top, rgba(11,10,9,.55), transparent 50%);opacity:0;transition:opacity 600ms var(--ease-out);
}
.pf-tile__plus{
  position:absolute;z-index:2;right:14px;bottom:14px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--brass);color:var(--ink);opacity:0;scale:.4;transition:scale 500ms var(--ease-back),opacity 300ms var(--ease-out);
}
.pf-tile__plus .icon{width:18px;height:18px;stroke-width:2}
.pf-tile__btn:focus-visible .pf-tile__frame::after{opacity:1}
.pf-tile__btn:focus-visible .pf-tile__plus{opacity:1;scale:1}
@media (hover:none){ .pf-tile__plus{opacity:.92;scale:.8} }
@media (hover:hover) and (pointer:fine){
  .pf-tile__btn:hover .pf-tile__frame::after{opacity:1}
  .pf-tile__btn:hover .pf-tile__frame .pf-tile__img{transition-duration:1200ms}
}
.pf-tile__cap{display:grid;justify-items:start;gap:6px;min-width:0}
.pf-tile__no{font-size:1.125rem}
.pf-tile__title{font-size:clamp(1.375rem, 1.05rem + .9vw, 2rem);color:var(--bone)}
.pf-tile__meta{max-width:100%}
/* placard lines break only after a "·" (the HTML glues each dot to the item
   before it with   and keeps "2 seans" whole) */
.pf-tile__cat,.pf-tile__year{white-space:nowrap}
.pf-tile__desc{margin-top:4px;font-size:var(--fs-small);line-height:1.55;color:var(--ash);max-width:44ch}
/* hover layers (§6.3.2): title + placard lift into place */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .pf-grid[data-view="grid"] :is(.pf-tile__title,.pf-tile__meta){translate:0 8px;transition:translate 600ms var(--ease-expo),opacity 600ms var(--ease-expo)}
  .pf-grid[data-view="grid"] .pf-tile__title{opacity:.7}
  .pf-grid[data-view="grid"] .pf-tile:is(:hover,:focus-within) :is(.pf-tile__title,.pf-tile__meta){translate:0 0;opacity:1}
}
/* while the lightbox (variant a) borrows the thumbnail */
.pf-tile.is-lent .pf-tile__frame{visibility:hidden}

/* competition award linked to the work: a brass trophy badge on the photo + the full line in the caption */
.pf-award{
  position:absolute;z-index:2;left:12px;top:12px;display:inline-flex;align-items:center;gap:7px;max-width:calc(100% - 24px);
  padding:7px 12px 7px 9px;border-radius:var(--r-pill);background:rgba(11,10,9,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px rgba(184,146,90,.55),0 8px 24px -10px rgba(0,0,0,.6);
  font:700 11px/1.2 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--brass-2);white-space:nowrap;
}
.pf-award > span{overflow:hidden;text-overflow:ellipsis}
.pf-award .icon{width:16px;height:16px;color:var(--brass-2)}
.pf-award__more{flex:none;padding-left:6px;border-left:1px solid rgba(184,146,90,.4);color:var(--bone)}
.pf-tile__award{display:flex;align-items:flex-start;gap:8px;max-width:44ch;font-size:13px;font-weight:600;line-height:1.45;color:var(--brass-2)}
.pf-tile__award .icon{width:16px;height:16px;margin-top:.1em;flex:none}

/* ===== 05 · Tiles · list view ========================================== */
.pf-grid[data-view="list"]{display:block;padding-block:var(--s-6) var(--section-y)}
.pf-grid[data-view="list"] .pf-tile{
  display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;column-gap:16px;
  margin-top:-1px;padding-block:16px;border-block:1px solid var(--line);
  transition:background-color 300ms var(--ease-out);
}
.pf-grid[data-view="list"] .pf-tile__btn{border-radius:var(--r-s)}
.pf-grid[data-view="list"] .pf-tile__frame{border-radius:var(--r-s);transform:none;box-shadow:none}
.pf-grid[data-view="list"] .pf-tile__plus,.pf-grid[data-view="list"] .pf-award{display:none}
/* list rows stay one line: the award line is kept for screen readers only */
.pf-grid[data-view="list"] .pf-tile__award{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pf-grid[data-view="list"] .pf-tile__cap{gap:4px}
.pf-grid[data-view="list"] .pf-tile__no{font-size:1rem}
.pf-grid[data-view="list"] .pf-tile__title{font-size:1.25rem;transition:translate 600ms var(--ease-expo),color var(--t-s)}
.pf-grid[data-view="list"] .pf-tile__desc{display:none}
@media (min-width:900px){
  .pf-grid[data-view="list"] .pf-tile{grid-template-columns:96px minmax(0,1fr);column-gap:var(--col-gap);padding-inline:12px;border-radius:0}
  .pf-grid[data-view="list"] .pf-tile__cap{grid-template-columns:80px minmax(0,1fr) 220px 160px 80px;column-gap:var(--col-gap);align-items:center;justify-items:stretch}
  .pf-grid[data-view="list"] .pf-tile__meta{display:contents}
  .pf-grid[data-view="list"] .pf-tile__meta > .sep{display:none}
  .pf-grid[data-view="list"] .pf-tile__title{font-size:clamp(1.375rem, 1rem + 1vw, 2rem)}
  .pf-grid[data-view="list"] .pf-tile__year{text-align:right}
  .pf-grid[data-view="list"] .pf-tile__no{font-size:1.25rem}
}
@media (hover:hover) and (pointer:fine){
  .pf-grid[data-view="list"] .pf-tile:hover{background:var(--ink-2)}
  .pf-grid[data-view="list"] .pf-tile:hover .pf-tile__title{translate:8px 0;color:var(--brass-2)}
}

/* ===== 06 · Tiles · caption entrance (follows the frame's curtain) ===== */
.pf-tile__cap > :nth-child(2){--k:1}
.pf-tile__cap > :nth-child(3){--k:2}
.pf-tile__cap > :nth-child(4){--k:3}
@media (prefers-reduced-motion:no-preference){
  .js:not(.reveal-all) .pf-ready .pf-tile:not(.is-cap) .pf-tile__cap{clip-path:inset(-40% 100% -40% -4%)}
  .js:not(.reveal-all) .pf-ready .pf-tile:not(.is-cap) .pf-tile__cap > *{transform:translate3d(0,14px,0)}
  .pf-ready .pf-tile.is-cap .pf-tile__cap{clip-path:inset(-40% -6% -40% -4%);transition:clip-path 1100ms var(--ease-quart) var(--cd,0ms)}
  .pf-ready .pf-tile.is-cap .pf-tile__cap > *{transition:transform 1000ms var(--ease-expo) calc(var(--cd,0ms) + var(--k,0) * 70ms)}
  .pf-ready .pf-tile.is-cap.is-cap-done .pf-tile__cap{clip-path:none;transition:none}
  .pf-ready .pf-tile.is-cap.is-cap-done .pf-tile__cap > *{transition:none}
}
/* lightbox closing onto unrevealed tiles: their end state is committed with
   transitions off (js/portfolyo.js settleInView, removed two frames later) */
.pf-tile.is-instant :is(.pf-tile__frame,.pf-tile__img,.pf-tile__cap,.pf-tile__cap > *){transition:none !important}

/* ===== 07 · Lightbox · layout ========================================== */
/* --lb-ar: the card's width/height — 2:3, the format of the work photos (and of the grid frames) */
.lb{
  --lb-ar:.6667;
  position:fixed;inset:0;z-index:var(--z-lightbox);display:grid;
  grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;
  padding:calc(max(12px, env(safe-area-inset-top)) + 60px) var(--gutter) calc(max(12px, env(safe-area-inset-bottom)) + 64px);
  color:var(--bone);overscroll-behavior:contain;-webkit-tap-highlight-color:transparent;
}
.lb.is-pre{visibility:hidden}
.lb__backdrop{position:absolute;inset:0;background:var(--ink);opacity:.96}
.lb__fx{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.lb__defs{position:absolute;width:0;height:0;overflow:hidden}
.lb__stage{position:relative;z-index:1;grid-column:1;grid-row:1;min-height:0;display:grid;place-items:center;perspective:1600px;pointer-events:none;container-type:size}
.lb__card{
  position:relative;width:min(100%, calc(62vh * var(--lb-ar)));aspect-ratio:2/3;border-radius:var(--r-m);
  transform-style:preserve-3d;pointer-events:auto;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;
}
@supports (width:1cqw){ .lb__card{width:min(100cqw, 100cqh * var(--lb-ar))} }
.lb.is-dragging .lb__card{cursor:grabbing}
.lb__media{
  position:absolute;inset:0;z-index:1;border-radius:inherit;overflow:hidden;background:var(--exhibit);box-shadow:var(--sh-card);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.lb__media.is-buffer{visibility:hidden;opacity:0}
.lb__img{width:100%;height:100%;max-width:none;object-fit:contain;pointer-events:none;-webkit-user-drag:none;user-select:none}
.lb__face--back{
  position:absolute;inset:0;z-index:0;display:grid;place-items:center;border-radius:inherit;
  background:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line-2);
  transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;visibility:hidden;
}
.lb.is-flip .lb__face--back{visibility:visible}
.lb__face--back .mono{width:auto;height:64px}
.lb__rim{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;opacity:0;pointer-events:none;overflow:hidden}
.lb__rim path,.lb__rim circle{fill:var(--brass)}
.lb__blinds{position:absolute;inset:0;z-index:3;display:flex;border-radius:inherit;overflow:hidden;pointer-events:none}
/* panes overlap by 1px (no sub-pixel seams for the art to shine through);
   each pane draws the hairline on its own left edge, over the neighbour */
.lb__blind{flex:1 1 0;margin-right:-1px;background:linear-gradient(to right, var(--line) 0 1px, transparent 1px) var(--ink-3)}
.lb__blind:first-child{background:var(--ink-3)}
.lb__blind:last-child{margin-right:0}
.lb__ring{position:absolute;left:0;top:0;width:100px;height:100px;margin:-50px 0 0 -50px;border:2px solid var(--brass);border-radius:50%;pointer-events:none}

/* phones: the text (__body) scrolls inside the panel, the booking CTA (__foot)
   stays pinned below it; .is-more (JS) fades the cut edge while more text waits */
.lb__meta{
  position:relative;z-index:2;grid-column:1;grid-row:2;margin-top:14px;max-height:30vh;max-height:30svh;overflow:hidden;
  display:grid;grid-template-rows:minmax(0,1fr) auto;
}
.lb__meta-body{
  display:grid;align-content:start;gap:10px;min-height:0;overflow:auto;overscroll-behavior:contain;
  padding:18px 20px 12px;scrollbar-width:thin;
}
.lb__meta-body.is-more{
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
  mask-image:linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
}
.lb__meta-foot{display:flex;align-items:center;gap:12px;padding:6px 20px 16px}
.lb__counter{display:none;margin:0;color:var(--ash);font-variant-numeric:tabular-nums}
.lb__counter-cur{color:var(--brass-2)}
.lb__cat{margin:0;color:var(--brass-2)}
.lb__cat .sep{color:var(--dim);margin-inline:.35em}
.lb__title{font-size:clamp(1.5rem, 1.2rem + 1vw, 2.25rem);max-width:none}
.lb__desc{margin:0;font-size:var(--fs-small);line-height:1.6;color:var(--ash)}
.lb__facts{display:grid;grid-template-columns:repeat(var(--facts,3),minmax(0,1fr));gap:12px;margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
/* awards linked to the open work */
.lb__awards{display:grid;gap:8px;margin:2px 0 0;padding:0;list-style:none}
.lb__award{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border-radius:var(--r-s);background:rgba(184,146,90,.08);box-shadow:inset 0 0 0 1px rgba(184,146,90,.28)}
.lb__award .icon{width:20px;height:20px;color:var(--brass-2)}
.lb__award-txt{font-size:var(--fs-small);line-height:1.45;color:var(--bone)}
.lb__award-txt strong{color:var(--brass-2);font-weight:700}
.lb__award-where{display:block;margin-top:2px;font-size:12px;color:var(--ash)}
.lb__facts > div{display:grid;gap:4px;min-width:0}
.lb__facts dd{margin:0;font-size:15px;font-weight:600;line-height:1.35;color:var(--bone);overflow-wrap:anywhere}
.lb__book{justify-self:start}
.lb__hint{display:none;margin:0;color:var(--dim)}
.lb__hint-fine{display:none}
html.fine .lb__hint-fine{display:inline}
html.fine .lb__hint-touch{display:none}

.lb__close,.lb__prev,.lb__next{position:absolute;z-index:6;background:var(--ink-2)}
@media (hover:hover){ :is(.lb__close,.lb__prev,.lb__next):hover{background:var(--ink-3)} }
.lb__close{top:max(12px, env(safe-area-inset-top));right:var(--gutter)}
.lb__prev,.lb__next{bottom:max(12px, env(safe-area-inset-bottom))}
.lb__prev{left:var(--gutter)}
.lb__next{right:var(--gutter)}
.lb__navcount{position:absolute;z-index:6;left:50%;bottom:max(12px, env(safe-area-inset-bottom));translate:-50% 0;margin:0;line-height:48px;color:var(--ash);font-variant-numeric:tabular-nums;white-space:nowrap}
.lb__navcount-cur{color:var(--brass-2)}
/* P16: chrome hidden until the media lands */
.lb:not(.is-ui) :is(.lb__close,.lb__prev,.lb__next,.lb__meta,.lb__navcount){opacity:0;pointer-events:none}

@media (min-width:900px){
  /* The art column is capped at the card's own max width (+64px air each side)
     and the pair is centred, so on wide screens the info panel stays next to
     the work instead of being pinned to the far edge. */
  .lb{
    --lb-side:max(var(--gutter), 88px);
    --lb-art:calc(min(84vh, 1000px) * var(--lb-ar) + 128px);
    grid-template-columns:minmax(0,var(--lb-art)) 340px;grid-template-rows:minmax(0,1fr);column-gap:var(--lb-side);justify-content:center;
    padding:24px var(--lb-side);
  }
  @supports (height:1svh){ .lb{--lb-art:calc(min(84svh, 1000px) * var(--lb-ar) + 128px)} }
  .lb__card{width:min(100%, calc(min(84vh, 1000px) * var(--lb-ar)))}
  @supports (width:1cqw){ .lb__card{width:min(100cqw, min(100cqh, 84svh, 1000px) * var(--lb-ar))} }
  .lb__meta{
    grid-column:2;grid-row:1;align-self:center;margin:0;max-height:calc(100vh - 48px);max-height:calc(100svh - 48px);
    grid-template-rows:none;align-content:start;overflow:auto;overscroll-behavior:contain;padding:28px 28px 24px;gap:12px;
  }
  .lb__meta-body,.lb__meta-foot{display:contents}
  .lb__counter{display:block}
  .lb__book{margin-top:8px}
  .lb__hint{display:block;order:1;margin-top:6px}
  .lb__close{top:24px;right:var(--gutter)}
  .lb__prev,.lb__next{top:50%;bottom:auto;translate:0 -50%}
  .lb__prev{left:20px}
  .lb__next{right:20px}
  .lb__navcount{display:none}
}
@media (max-width:899px){ .lb__hint{display:block} }

/* ===== 08 · Lightbox · variants ========================================
   All five open/close choreographies are WAAPI / rAF in js/portfolyo.js;
   the static pieces they use (.lb__blinds, .lb__ring, .lb__rim, back face)
   are styled in section 07. */

/* ===== 09 · Reduced motion ============================================= */
@media (prefers-reduced-motion:reduce){
  .js:not(.reveal-all) .pf-ready .pf-tile:not(.is-cap) .pf-tile__cap{opacity:0}
  .pf-ready .pf-tile.is-cap .pf-tile__cap{transition:opacity 300ms linear var(--cd,0ms)}
  .js:not(.reveal-all) .pf-ready .pf-hero:not(.is-entered) :is(.pf-hero__card-i,.pf-hero__badge,.pf-hero__meta dd){opacity:0}
  .pf-ready .pf-hero.is-entered :is(.pf-hero__card-i,.pf-hero__badge,.pf-hero__meta dd){transition:opacity 300ms linear}
  .pf-tile__frame{transform:none}
  .pf-tile__plus,.pf-tile__frame::after{transition:none}
  .pf-grid[data-view="grid"] .pf-tile[data-col="1"]{translate:0 var(--pf-stagger)}
}

/* empty collection (no published works yet, or the database is unreachable) */
.pf-empty{grid-column:1 / -1;max-width:40ch;color:var(--ash)}