/* SELÈ STUDIO — Projects index /projects/ (SPEC §5.2, Addendum A7.2). Owner: P2. Prefix: pj-.
   Logical properties only. Without JS the controls stay hidden and the index list, then the gallery, both show. */

/* ------------------------------------------------------------------ 1. opener */
.pj-head{ padding-block:calc(var(--header-h) + var(--s-6)) var(--s-5) }
.pj-head__opener .opener__lines{ max-inline-size:52ch }

/* ------------------------------------------------------------------ 2. controls (sticky under the header at ≥ 768 px) */
.pj-controls{
  position:relative; z-index:20;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  border-block:1px solid var(--line);
}
@media (min-width:768px){
  .pj-controls{ position:sticky; inset-block-start:var(--header-h) }
}
.pj-controls__inner{ display:grid; gap:10px; padding-block:12px }
.pj-controls__row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px var(--s-5) }
.pj-controls__row--filters{ justify-content:flex-start }
.pj-controls__group{ display:flex; flex-wrap:wrap; align-items:center; gap:8px var(--s-3); min-inline-size:0 }
.pj-controls__label{ flex:none; min-inline-size:3.25rem; color:var(--fg-2) }
.pj-chips{ display:flex; flex-wrap:wrap; gap:8px }
.pj-chip{ padding-inline:14px }
.pj-chip.chip{ font-size:14px }
html[lang="en"] .pj-chip.chip{ font-size:13px }
.pj-count{ margin:0; color:var(--fg-2); font-variant-numeric:tabular-nums; white-space:nowrap }

/* segmented view toggle: role=radiogroup of two role=radio buttons */
.pj-seg{ display:inline-flex; border:1px solid color-mix(in srgb, var(--fg) 45%, transparent) }
.pj-seg__btn{
  min-block-size:44px; padding-inline:18px;   /* 44px touch target (SPEC §3.5) */
  font-family:var(--f-he-text); font-weight:600; font-size:14px; line-height:1;
  color:var(--fg-2); background:transparent;
  transition:background-color var(--d-micro) var(--ease-paper), color var(--d-micro) var(--ease-paper);
}
html[lang="en"] .pj-seg__btn{ font-family:var(--f-lat-text); font-weight:500; font-size:12px; letter-spacing:.14em; text-transform:uppercase }
.pj-seg__btn + .pj-seg__btn{ border-inline-start:1px solid color-mix(in srgb, var(--fg) 45%, transparent) }
.pj-seg__btn:hover{ color:var(--fg) }
.pj-seg__btn[aria-checked="true"]{ background:var(--fg); color:var(--bg) }

/* 768–1099 (the bar is sticky there): one line per chip group, scrolling sideways inside the bar instead of growing
   it. The strip bleeds to the screen edge and fades out at its inline end, so a cut chip reads as "there is more". */
@media (min-width:768px) and (max-width:1099px){
  .pj-controls__row--filters{ display:grid; gap:10px }
  .pj-controls__row--filters .pj-controls__group{ flex-wrap:nowrap; gap:var(--s-3) }
  .pj-chips{
    flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    scrollbar-width:none;
    margin-inline-end:calc(-1 * var(--margin)); padding-inline-end:var(--margin);
    padding-block:3px; margin-block:-3px;   /* room for the focus ring */
    padding-inline-start:3px; margin-inline-start:-3px;
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 32px), transparent);
            mask-image:linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }
  [dir="rtl"] .pj-chips{
    -webkit-mask-image:linear-gradient(to left, #000 calc(100% - 32px), transparent);
            mask-image:linear-gradient(to left, #000 calc(100% - 32px), transparent);
  }
  .pj-chips::-webkit-scrollbar{ display:none }
  .pj-chip{ flex:none }
}
/* < 768 (the bar is not sticky): every chip stays visible, the groups wrap onto a second line */
@media (max-width:767px){
  .pj-controls__row--filters{ display:grid; gap:12px }
  .pj-controls__row--filters .pj-controls__group{ flex-wrap:nowrap; align-items:baseline; gap:var(--s-3) }   /* label on the first chip row */
  .pj-chips{ flex-wrap:wrap; gap:8px; min-inline-size:0 }
}
@media (max-width:767px){
  .pj-controls__label{ min-inline-size:2.75rem }
  html[lang="en"] .pj-controls__label{ min-inline-size:5.5rem }
}

/* ------------------------------------------------------------------ results */
.pj-results{ padding-block:var(--s-6) var(--s-7) }
.pj-view:not([hidden]) + .pj-view:not([hidden]){ margin-block-start:var(--s-7) }   /* no-JS: the gallery follows the list */
.pj-view[hidden]{ display:none }
/* JS on (the boot script sets html.js before first paint): lay the page out the way projects.js will leave it, i.e.
   the controls bar's space reserved and only the default view shown, so nothing shifts when the module applies its
   state (CLS). projects.js adds .is-ready once it has. The no-JS layout above is untouched. */
html.js .pj-controls[hidden]{ display:block !important; visibility:hidden }   /* beats base.css [hidden]{display:none !important} */
html.js .pj-results:not(.is-ready) .pj-view + .pj-view{ margin-block-start:0 }
@media (max-width:767px){ html.js .pj-results:not(.is-ready) .pj-view--index{ display:none } }
@media (min-width:768px){ html.js .pj-results:not(.is-ready) .pj-view--gallery{ display:none } }
.pj-row.is-out, .pj-tile.is-out{ display:none }

.pj-empty{ display:grid; justify-items:start; gap:var(--s-4); padding-block:var(--s-6); border-block-end:1px solid var(--line) }
.pj-empty__text{ font-family:var(--f-display); font-weight:400; font-size:var(--t-d4); max-inline-size:36ch }   /* --t-d4 < 28px → FRL 400 */

/* ------------------------------------------------------------------ 3. index view */
.pj-index{ margin:0; padding:0; list-style:none; border-block-start:1px solid var(--line) }
.pj-row{ border-block-end:1px solid var(--line) }
.pj-row__link{
  display:grid;
  grid-template-columns:3rem minmax(0, 1fr) 96px;
  grid-template-areas:"num name thumb" "num meta thumb" "num status thumb";
  column-gap:var(--s-3); row-gap:4px;
  align-items:start;
  padding-block:var(--s-4);
  color:inherit; text-decoration:none;
}
.pj-row__num{
  grid-area:num;
  font-family:var(--f-he-display); font-weight:400; font-size:var(--t-d3); line-height:1.1;
  color:var(--fg-3);
  transition:translate var(--d-ui) var(--ease-paper);
}
html[lang="en"] .pj-row__num{ font-family:var(--f-lat-display) }
.pj-row__name{ grid-area:name; display:grid; gap:2px; min-inline-size:0 }
.pj-row__title{
  font-family:var(--f-display); font-weight:400; font-size:var(--t-d3); line-height:1.15;   /* --t-d3 < 28px → FRL 400 (SPEC §3.3) */
  color:var(--fg-2);
  transition:color var(--d-ui) var(--ease-paper);
}
@media (min-width:1200px){ .pj-row__title, .pj-row__num{ font-weight:300 } }   /* FRL 300 once --t-d3 is >= 28px (as Home H4) */
html[lang="en"] :is(.pj-row__title, .pj-row__num){ font-weight:400 }
/* the other-language title: Jost caps under a Hebrew title, Assistant under an English one (SPEC §5.2) */
.pj-row__alt{
  display:block; justify-self:start;   /* a bdi resolves its own direction: keep it at the page's start edge */
  font-family:var(--f-lat-text); font-weight:400; font-size:var(--t-label-lat); line-height:1.6;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--fg-3);
}
.pj-row__alt:lang(he){ font-family:var(--f-he-text); font-weight:400; font-size:var(--t-small); letter-spacing:.02em; text-transform:none }
.pj-row__meta{ grid-area:meta; display:flex; flex-wrap:wrap; align-items:baseline; gap:0 .6em; min-inline-size:0; margin-block-start:var(--s-2) }
.pj-row__materials{ font-size:var(--t-small); line-height:1.5; color:var(--fg-2) }
.pj-row__status{ grid-area:status; color:var(--fg-3) }
.pj-row__thumb{ grid-area:thumb; display:block; width:96px; align-self:center }   /* definite width, SPEC §3.4 */
.pj-row__arrow{ display:none; inline-size:24px; block-size:24px; stroke-width:1.25; color:var(--fg-2); transition:translate var(--d-ui) var(--ease-paper), color var(--d-ui) var(--ease-paper) }

.pj-row__link:is(:hover, :focus-visible) .pj-row__title{ color:var(--fg) }
/* both glyphs stay inside the link box (and its inset focus ring): the numeral, at the inline-start edge, nudges
   inward toward the title; the arrow nudges toward inline-end into the room its margin reserves (≥ 1100 px). */
.pj-row__link:is(:hover, :focus-visible) .pj-row__num{ translate:8px 0 }
[dir="rtl"] .pj-row__link:is(:hover, :focus-visible) .pj-row__num{ translate:-8px 0 }
.pj-row__link:is(:hover, :focus-visible) .pj-row__arrow{ translate:6px 0; color:var(--fg) }  /* toward inline-end */
[dir="rtl"] .pj-row__link:is(:hover, :focus-visible) .pj-row__arrow{ translate:-6px 0 }
.pj-row__link:focus-visible{ outline-offset:-2px }

@media (min-width:768px){
  .pj-row__link{
    grid-template-columns:4rem minmax(0, 1.2fr) minmax(0, 1fr) 96px;
    grid-template-areas:"num name meta thumb" "num name status thumb";
    column-gap:var(--s-4);
    align-items:center;
    min-block-size:128px;
  }
  .pj-row__meta{ margin:0; align-self:end; flex-direction:column; align-items:flex-start; gap:2px }
  .pj-row__status{ align-self:start }
}

.pj-preview{ display:none }
@media (min-width:1100px){
  .pj-view--index{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--gap); align-items:start }
  .pj-view--index[hidden]{ display:none }
  .pj-index{ grid-column:1 / 9 }
  .pj-row__link{
    grid-template-columns:4.5rem minmax(0, 1.25fr) minmax(0, 1fr) auto 36px;
    grid-template-areas:"num name meta status arrow";
    min-block-size:120px;
  }
  .pj-row__meta{ align-self:center }
  .pj-row__status{ align-self:center }
  .pj-row__thumb{ display:none }
  .pj-row__arrow{ display:block; grid-area:arrow; margin-inline-end:12px }   /* 12 = 6px nudge + 2px inset ring + 4px air */

  /* the sticky preview slot (Home H4 mechanics): five stacked frames, the active one on top */
  .pj-preview{
    grid-column:10 / 13;
    display:grid;
    position:sticky; inset-block-start:calc(var(--header-h) + 160px);
  }
  .pj-prev{ grid-area:1 / 1; visibility:hidden }
  .pj-prev.is-active{ visibility:visible }
  .pj-prev.is-wiping > .frame__clip{ animation:pj-wipe 600ms var(--ease-paper) both }
}
@keyframes pj-wipe{ from{ clip-path:inset(0% 0% 100% 100%) } to{ clip-path:inset(0% 0% 0% 0%) } }

/* ------------------------------------------------------------------ 4. gallery — a contact sheet
   Spans per breakpoint (SPEC §5.2): <768 [2,2,4] · 768–1099 [5,3,3,5] · ≥1100 [5,4,3,4,8]. data-s3/-s4/-s5 hold each
   tile's slot in those rhythms (written by gen-projects, recomputed by projects.js for the visible tiles). Every tile
   in a row gets the same height from the column width, so the sheet reads as even rows of differently cropped frames. */
.pj-gallery{
  --c:calc((min(100vw - 2 * var(--margin), var(--maxw)) - (var(--cols) - 1) * var(--gap)) / var(--cols));
  display:grid; grid-template-columns:repeat(var(--cols), minmax(0, 1fr));
  column-gap:var(--gap); row-gap:var(--s-5);
  margin:0; padding:0; list-style:none;
  align-items:start;
}
.pj-tile{ grid-column:span 2; min-inline-size:0 }
.pj-tile[data-s3="2"]{ grid-column:span 4 }
.pj-tile__link{ display:block; color:inherit; text-decoration:none }
.pj-tile__fig{ margin:0 }
.pj-tile .frame__clip{ aspect-ratio:auto; block-size:calc((2 * var(--c) + var(--gap)) * 1.25) }
.pj-tile[data-s3="2"] .frame__clip{ block-size:calc((4 * var(--c) + 3 * var(--gap)) * .78) }
.pj-tile .caption{ margin-block-start:12px }
.pj-tile .caption::before{ display:none }
.pj-tile__link:is(:hover, :focus-visible) .caption__text{ color:var(--fg) }
.pj-tile__link:focus-visible{ outline-offset:4px }
@media (max-width:479px){
  .pj-tile:not([data-s3="2"]) .caption{ font-size:.8125rem }
}
@media (min-width:768px){
  .pj-gallery{ row-gap:var(--s-6) }
  .pj-tile, .pj-tile[data-s3="2"]{ grid-column:span 3 }
  .pj-tile[data-s4="0"], .pj-tile[data-s4="3"]{ grid-column:span 5 }
  .pj-tile .frame__clip, .pj-tile[data-s3="2"] .frame__clip{ block-size:calc(4 * var(--c) + 3 * var(--gap)) }
}
@media (min-width:1100px){
  .pj-tile, .pj-tile[data-s3="2"], .pj-tile[data-s4="0"], .pj-tile[data-s4="3"]{ grid-column:span 4 }
  .pj-tile[data-s5="0"]{ grid-column:span 5 }
  .pj-tile[data-s5="2"]{ grid-column:span 3 }
  .pj-tile[data-s5="4"]{ grid-column:span 8 }
  .pj-tile .frame__clip, .pj-tile[data-s3="2"] .frame__clip{ block-size:calc(4.4 * var(--c) + 3.4 * var(--gap)) }
}

/* The sheet never ends ragged: the last visible tile (.is-last — gen-projects for no-JS, projects.js after every filter)
   stretches to the end of its row when the rhythm would leave that row short. Rows are 2·2|4 (<768), 5·3|3·5
   (768–1099) and 5·4·3|4·8 (≥1100), so only these slots can end a row early. */
@media (max-width:767px){
  .pj-tile.is-last[data-s3="0"]{ grid-column:1 / -1 }
  .pj-tile.is-last[data-s3="0"] .frame__clip{ block-size:calc((4 * var(--c) + 3 * var(--gap)) * .78) }
}
@media (min-width:768px) and (max-width:1099px){
  .pj-tile.is-last:is([data-s4="0"], [data-s4="2"]){ grid-column:1 / -1 }
}
@media (min-width:1100px){
  .pj-tile.is-last:is([data-s5="0"], [data-s5="3"]){ grid-column:1 / -1 }
  .pj-tile.is-last[data-s5="1"]{ grid-column:span 7 }
}

.pj-film{ margin-block-start:var(--s-6) }
/* 44px touch target (SPEC §9), layout and hairline unchanged (same technique as case.css .case-related .link) */
.pj-film .link{
  --tap-pad:max(2px, calc((44px - 1.4em) / 2));
  padding-block:var(--tap-pad); margin-block:calc(2px - var(--tap-pad));
  background-position:left 0 bottom calc(var(--tap-pad) - 2px);
}
.pj-film .link::after{ inset-block-end:calc(var(--tap-pad) - 2px) }

/* ------------------------------------------------------------------ 5. #built — from the site (paper-2, its own opener) */
.pj-built{ border-block-start:1px solid var(--line) }
.pj-built__grid{ row-gap:var(--s-5); align-items:center }
.pj-built__text, .pj-built__fig{ grid-column:1 / -1 }
.pj-built__p{ margin-block-start:var(--s-4); color:var(--fg-2); max-inline-size:44ch }
.pj-built__fig{ margin:0 }
@media (min-width:768px){
  .pj-built__text{ grid-column:1 / 5 }
  .pj-built__fig{ grid-column:5 / 9 }
}
@media (min-width:1100px){
  .pj-built__text{ grid-column:1 / 6 }
  .pj-built__fig{ grid-column:7 / 12 }
}

/* span-based frames: the clip must be a block for its aspect-ratio to apply */
.pj-row__thumb > .frame__clip{ display:block }