/* now.css — Polaroids & stats: the sheet (.now--sheet), now/ (.now--page) and the A5 print card (.print-card). */

/* lead: intake strip, stat line, status, primary booking link */
.now-lead .now-body{display:grid;justify-items:start;gap:var(--s3)}
/* each item starts with a 1.3em dot; the strip of every line's first dot sits in the clipped margin */
.now-in{display:flex;flex-wrap:wrap;margin-left:-1.3em;clip-path:inset(0 0 0 1.3em);color:var(--ink)}
.now-in .sep{display:inline-block;width:1.3em;padding:0;text-align:center;text-indent:.1em}
.now-st{color:var(--ink);margin-top:calc(var(--s2) - var(--s3))}
/* hall line: the credits in words, each name opening its photographs */
.now-back{color:var(--ink);max-width:24em}
.now-hall{color:var(--muted);max-width:34rem}
.now-hall a{color:var(--ink)}
.now-status{display:grid;justify-items:start;margin-top:var(--s1)}
.now-status .t-13{color:var(--ink)}
/* small caps actions: 44px tap area without changing the line */
.now-act,.now-acts .ui{position:relative;display:inline-block;text-decoration-color:var(--hairline)}
.now-act::after,.now-acts .ui::after{content:"";position:absolute;inset:50% 0 auto;height:max(100%, 44px);translate:0 -50%}
.now-status .now-act{margin-top:var(--s2)}
@media (hover:hover){ .now-act:hover{text-decoration-color:currentColor} }

.now-cta{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);width:100%;min-height:48px;
  padding:0 16px;border:1px solid var(--ink);color:var(--ink);text-decoration:none;line-height:1;
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
@media (hover:hover){ .now-cta:hover{background:var(--ink);color:var(--paper)} }
.now-cta:active{opacity:.7}
.now-lead .now-cta{margin-top:var(--s1)}
.now--page .now-cta{max-width:26rem}

/* sections: hairline, heading line, body */
.now-sec{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--hairline)}
.now-rail{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s3);row-gap:var(--s2);margin-bottom:var(--s3)}
.now-h{color:var(--ink);margin-right:auto}
.now-us{display:flex;flex-wrap:wrap;column-gap:var(--s4)}
.now-us:empty{display:none}
.now-u{display:inline-flex;align-items:center}
.now-u .chip{padding-inline:7px}
.now-u .chip:first-of-type{margin-left:-7px}
.now-u .sep{padding:0;color:var(--hairline)}

/* label / value tables: measurements, identity, representation */
.now-dl{max-width:30rem}
.now-row{display:grid;grid-template-columns:9rem minmax(0,1fr);column-gap:var(--s3);align-items:baseline;padding-block:10px 9px}
.now-row + .now-row{border-top:1px solid var(--hairline)}
.now-row dt{color:var(--muted)}
.now-row dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.now-row dd > span{display:block}
.now-row .now-v > span{display:inline}
/* a link cue of at least 3:1 against the paper, solid on hover */
.now-row .link,.now-hall .link{text-decoration-color:color-mix(in srgb, currentColor 50%, transparent)}
@media (hover:hover){ .now-row .link:hover,.now-hall .link:hover{text-decoration-color:currentColor} }
.now-body > .now-cta{margin-top:var(--s4)}
.now-rep{color:var(--muted);margin-top:var(--s3)}
.now-acts{display:flex;flex-wrap:wrap;column-gap:var(--s4);row-gap:var(--s3)}
.now-body > * + .now-acts{margin-top:var(--s4)}
@media (hover:hover){ .now-acts .ui:hover{text-decoration-color:currentColor} }
.now [aria-busy="true"]{opacity:.45;cursor:progress}
.now-note{color:var(--muted);margin-top:var(--s3)}
.now-files .now-acts{margin-top:0}

/* polaroids: nine 4:5 stitched slots; a filled slot fades its file in inside the same box */
.now-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.now-slot{display:grid;align-content:start;gap:10px;min-width:0}
.now-pf{position:relative;display:block;aspect-ratio:4/5;background:var(--slot);color:inherit}
.now-pf:has(img.is-in){background:none}
.now-pf img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;
  transition:opacity calc(300ms * var(--motion)) var(--ease)}
.now-pf img.is-in{opacity:1}
.now-pl{color:var(--muted)}
.now-sn{display:inline-block}
/* all nine empty: a strip of small stitched boxes, the shot list in words below it */
.now .now-slots.is-empty{grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;max-width:560px;width:auto}
.now .now-slots.is-empty .slot-label{display:none}
.now .now-slots.is-empty .corners::before{display:none}
.now-plist{color:var(--muted);margin-top:var(--s3)}
.now-walk{margin-top:var(--s4);display:grid;gap:10px}
.now-walk video{width:100%;aspect-ratio:16/9;object-fit:contain;background:var(--slot)}
.now-walk figcaption{color:var(--muted)}

/* selected frames (now/ only): 4:5 cells, contain, bottom-aligned on a shared baseline */
.now-cast{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) 12px}
.now-cast .fig{width:100%}
.now-cast .fig-link{display:flex;align-items:flex-end;justify-content:center;aspect-ratio:4/5}
.now-cast .fig img{width:calc(min(1, var(--ar) / .8) * 100%)}
.now-cast .fig-cap{padding-top:8px;align-items:flex-start}
/* 'Polder Noon — September 2018' breaks into even lines and never pushes the frame code out of the cell */
.now-ct{text-wrap:balance}
.now-cast .fig-code{flex:none}

/* now/ page; main fills the first screen so the footer never jumps when the page renders */
.now-page{min-height:calc(100svh - var(--header))}
/* now/ has no thumb bar: no space kept for it under the footer, the toast or a scrolled-to section */
html:has(body.page-now){--bar-h:0px}
.page-now .site-footer{padding-bottom:calc(var(--s5) + var(--safe-b))}
.page-now .lockup{align-items:center;min-height:var(--header);padding-block:0}
.now--page{padding:var(--s5) var(--m) 0}
.now-no{color:var(--muted)}
.now--page .now-lead > .now-rail{margin-bottom:var(--s3)}
.now-name{color:var(--ink);margin:0 0 var(--s2) -.03em;font-size:clamp(44px, 12.5vw, 132px)}
.now--page .now-sec{margin-top:var(--s6)}
/* no JavaScript: the name, role and base, one line on what is missing */
.now-page .noscript{display:grid;justify-items:start;gap:var(--s3);padding-top:var(--s5)}

@media (min-width:768px){
  .now--page,.now-page .noscript{padding-top:var(--s6)}
  .now--page .now-slots{grid-template-columns:repeat(3,minmax(0,1fr))}
  .now-cast{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5) var(--g)}
  .now--page .now-slots{gap:var(--g)}
}
@media (min-width:1024px){
  /* a left rail for the labels (columns 1–6), the content from column 8 */
  .now--page > *{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:var(--g)}
  .now--page .now-rail{grid-column:1/7;align-self:start;flex-direction:column;align-items:flex-start;margin:0;
    position:sticky;top:calc(var(--header) + var(--s4))}
  .now--page .now-lead > .now-rail{position:static;padding-top:.6em}
  .now--page .now-body{grid-column:8/-1;min-width:0}
  .now--page .now-sec{margin-top:var(--s7);padding-top:var(--s4)}
  .now--page .now-us{flex-direction:column;row-gap:0}
  .now-name{font-size:clamp(64px, 9vw, 168px)}
}
@media (min-width:1280px){
  /* three polaroid columns line up with three of the four frame columns */
  .now--page :is(.now-slots,.now-walk){width:calc(75% - var(--g) / 4)}
}

/* A5 comp card, two pages (spec 8.4). Hidden on screen; only it prints when present. */
.print-card{display:none}
@page card{size:A5;margin:0}
@media print{
  html:has(body > .print-card),body:has(> .print-card){overflow:visible !important;height:auto;min-height:0;display:block;background:#fff !important}
  body:has(> .print-card) > :not(.print-card){display:none !important}
  .print-card{display:block;color:#000;font-size:8pt;line-height:1.35;print-color-adjust:exact;-webkit-print-color-adjust:exact;
    --ink:#000;--muted:#555;--hairline:#d6d4ce}
  .card-page{page:card;display:grid;gap:5mm;width:148mm;height:209.9mm;padding:8mm;overflow:hidden;break-inside:avoid}
  .card-page + .card-page{break-before:page}
  .card-page img{width:100%;height:100%;min-height:0;object-fit:contain}
  .card-front{grid-template-rows:minmax(0,1fr) auto}
  .card-front img{object-position:left bottom}
  .card-name{font-stretch:62%;font-weight:760;font-size:28pt;line-height:.9;letter-spacing:.02em;text-transform:uppercase;margin-left:-.03em}
  .card-k{font-size:6.5pt;letter-spacing:.1em;text-transform:uppercase;color:#555;margin-top:2.5mm}
  .card-back{grid-template-rows:minmax(0,1fr) auto auto}
  .card-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3mm;min-height:0}
  /* the four frames hug the centre gutters as one block */
  .card-grid img:nth-child(1){object-position:right bottom} .card-grid img:nth-child(2){object-position:left bottom}
  .card-grid img:nth-child(3){object-position:right top} .card-grid img:nth-child(4){object-position:left top}
  .card-info{display:grid;grid-template-columns:1fr 1fr;gap:6mm;align-items:start}
  .card-info > :only-child{grid-column:1/-1}
  .print-card .now-row{grid-template-columns:23mm minmax(0,1fr);column-gap:2mm;padding-block:1.1mm .9mm}
  .print-card a{text-decoration:none;color:inherit}
  .print-card .now-row dt{font-size:6pt;letter-spacing:.1em;text-transform:uppercase;color:#555}
  .print-card .now-row dd{font-size:7.5pt}
  .print-card .now-row + .now-row{border-top:.5pt solid #d6d4ce}
  .print-card .sep{padding-inline:.4em;color:#555}
  .print-card .card-k:last-child{margin-top:0}
}