/* ============================================================================
   portfolio.css : the record.
   Loads AFTER work.css and uses its tokens, topbar, buttons and footer, so the
   portfolio is the same object as the rest of the site rather than a microsite.
   Everything here is prefixed pf- because this page needs its own layout
   vocabulary and must not collide with the marketing pages.
   ========================================================================== */

/* ---------- hero ---------- */
.pf-hero{
  min-height:76svh;display:flex;flex-direction:column;justify-content:flex-end;
  max-width:var(--maxw);margin:0 auto;padding:clamp(40px,7vh,90px) 28px clamp(24px,4vh,48px);
}
.pf-tag{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);display:flex;gap:2ch;flex-wrap:wrap;margin:0;
}
.pf-tag em{color:var(--c-agent);font-style:normal;}
.pf-hero h1{
  font-family:var(--serif);font-weight:840;font-stretch:118%;text-transform:uppercase;
  font-size:clamp(38px,8.4vw,132px);line-height:.9;letter-spacing:-.022em;
  margin:18px 0 26px;max-width:14ch;
}
.pf-hero h1 .dim{color:var(--ink-faint);}
.pf-lede{max-width:58ch;color:var(--ink-dim);font-size:clamp(16px,1.5vw,19px);margin:0;}
.pf-rule{height:1px;background:var(--rule);margin-top:clamp(28px,5vh,60px);position:relative;}
.pf-rule i{position:absolute;left:0;top:-1px;height:3px;width:112px;background:var(--c-agent);}

/* ---------- era index ---------- */
.pf-idx{
  display:flex;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.pf-idx::-webkit-scrollbar{display:none;}
.pf-idx a{
  flex:1 0 auto;text-decoration:none;padding:13px 18px;border-right:1px solid var(--rule);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-faint);white-space:nowrap;
}
.pf-idx a b{display:block;color:var(--ink);font-weight:500;letter-spacing:.02em;}
.pf-idx a:hover,.pf-idx a:focus-visible{background:var(--paper-2);color:var(--ink);}

/* ---------- era ---------- */
.pf-era{
  position:relative;border-bottom:1px solid var(--rule);
  padding:clamp(48px,8vh,104px) 28px clamp(36px,5vh,72px);
  max-width:var(--maxw);margin:0 auto;scroll-margin-top:76px;
}
/* the year is the spine of the ledger: enormous, hollow, behind everything */
.pf-year{
  position:absolute;top:6px;right:14px;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--serif);font-weight:860;font-stretch:120%;
  font-size:clamp(96px,19vw,300px);line-height:.8;letter-spacing:-.035em;
  color:transparent;-webkit-text-stroke:1px var(--rule);
}
.pf-head{position:relative;z-index:1;}
.pf-meta{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);display:flex;gap:2ch;flex-wrap:wrap;margin:0;
}
.pf-meta .yr{color:var(--c-agent);}
.pf-era h2{
  font-family:var(--serif);font-weight:800;font-stretch:114%;text-transform:uppercase;
  letter-spacing:-.014em;font-size:clamp(27px,4.2vw,58px);line-height:1;
  margin:12px 0 14px;max-width:20ch;text-wrap:balance;
}
.pf-story{max-width:64ch;color:var(--ink-dim);margin:0 0 clamp(24px,4vh,40px);text-wrap:pretty;}
.pf-award{
  font-family:var(--mono);font-size:12.5px;color:var(--c-shop);letter-spacing:.04em;
  margin:-16px 0 28px;position:relative;z-index:1;
}

/* ---------- artifact ---------- */
.pf-af{
  position:relative;z-index:1;background:var(--paper-2);border:1px solid var(--rule);
  display:flex;flex-direction:column;height:100%;min-width:0;
}
.pf-af .pf-frame{overflow:hidden;background:#000;aspect-ratio:16/10;width:100%;}
.pf-af .pf-frame img,.pf-af .pf-frame video{
  width:100%;height:100%;object-fit:cover;object-position:left top;display:block;
}
.pf-af.ctr .pf-frame img,.pf-af.ctr .pf-frame video{object-position:center;}
.pf-af.natural .pf-frame{aspect-ratio:auto;}
.pf-af.natural .pf-frame img,.pf-af.natural .pf-frame video{height:auto;object-fit:contain;}
.pf-af figcaption{
  display:flex;gap:1.5ch;justify-content:space-between;align-items:baseline;
  padding:10px 12px;border-top:1px solid var(--rule);margin-top:auto;min-width:0;
}
.pf-af figcaption b{
  /* flex:1 1 auto + min-width:0 is what actually lets this shrink. Without the
     min-width a flex item refuses to go below its content size, so the
     reference beside it was pushed off the page on narrow screens. */
  flex:1 1 auto;min-width:0;
  font-weight:640;font-size:14px;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pf-af figcaption span{
  font-family:var(--mono);font-size:11px;color:var(--ink-faint);text-align:right;flex:0 0 auto;
}
/* two lines, always: an even baseline across a row beats a ragged one.
   The full-width lead has no row to align to, so it drops the reservation. */
.pf-af .pf-cap{
  padding:0 12px 12px;color:var(--ink-dim);font-size:13.5px;line-height:1.5;
  min-height:calc(2 * 1.5 * 13.5px + 12px);margin:0;
}
.pf-af .pf-cap span{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pf-af.full .pf-cap{min-height:0;}
.pf-af.sel{border-color:var(--c-agent);}
.pf-af.sel figcaption b::before{content:"\25A0\00A0";color:var(--c-agent);font-size:10px;vertical-align:2px;}

/* ---------- layouts ---------- */
.pf-grid{display:grid;gap:14px;position:relative;z-index:1;}
.pf-grid .full{grid-column:1 / -1;}
.pf-boards{grid-template-columns:1fr 1fr;}
/* column counts live in classes, never inline: an inline style would outrank
   the phone breakpoint below and strand three columns on a 390px screen */
.pf-cols-1{grid-template-columns:1fr;}
.pf-cols-2{grid-template-columns:repeat(2,1fr);}
.pf-cols-3{grid-template-columns:repeat(3,1fr);}
.pf-wall{grid-template-columns:repeat(3,1fr);}
.pf-wall .wide{grid-column:span 2;}
.pf-wall .pf-af .pf-frame{aspect-ratio:4/3;}
/* three to a row leaves no space for a title and a reference side by side,
   and truncating the title is the worse trade. Stack them. */
.pf-wall .pf-af:not(.full) figcaption{flex-direction:column;align-items:flex-start;gap:3px;}
.pf-wall .pf-af:not(.full) figcaption b{white-space:normal;line-height:1.2;}
.pf-wall .pf-af:not(.full) figcaption span{text-align:left;}
.pf-boards .full .pf-frame,.pf-wall .full .pf-frame{max-height:72vh;}
.pf-scrollwrap{
  overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity;
  scrollbar-color:var(--rule) transparent;
}
.pf-scroll{display:flex;gap:14px;}
.pf-scroll .pf-af{flex:0 0 clamp(280px,38vw,540px);scroll-snap-align:start;}
.pf-scrollnote{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);margin:10px 0 0;
}

@media(max-width:900px){
  .pf-boards,.pf-cols-2,.pf-cols-3{grid-template-columns:1fr;}
  /* one card per row: nothing to line up with, so let the caption finish */
  .pf-af .pf-cap{min-height:0;}
  .pf-af .pf-cap span{-webkit-line-clamp:4;}
  .pf-wall{grid-template-columns:1fr 1fr;}
  .pf-wall .wide,.pf-wall .full{grid-column:1 / -1;}
  .pf-year{font-size:clamp(80px,24vw,150px);right:8px;}
}
@media(max-width:560px){
  .pf-wall{grid-template-columns:1fr;}
  .pf-af .pf-frame{aspect-ratio:4/3;}
  /* a phone has no room for a title and a reference on one line */
  .pf-af figcaption{flex-direction:column;align-items:flex-start;gap:3px;}
  .pf-af figcaption b{white-space:normal;line-height:1.2;}
  .pf-af figcaption span{text-align:left;}
}

/* ---------- close ---------- */
.pf-close{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(56px,10vh,120px) 28px clamp(48px,8vh,90px);
}
.pf-close h2{
  font-family:var(--serif);font-weight:840;font-stretch:118%;text-transform:uppercase;
  font-size:clamp(28px,5.4vw,76px);line-height:.94;letter-spacing:-.018em;max-width:16ch;margin:0;
  text-wrap:balance;
}
.pf-close p{font-family:var(--mono);font-size:12.5px;color:var(--ink-faint);margin:20px 0 0;max-width:60ch;}
.pf-close .btn{margin-top:28px;}
.pf-note{
  max-width:var(--maxw);margin:0 auto;padding:0 28px 60px;
  font-family:var(--mono);font-size:11px;color:var(--ink-faint);line-height:1.7;
}

@media (prefers-reduced-motion:reduce){
  .pf-scrollwrap{scroll-snap-type:none;}
}