/* 2026-10-25 "New work" (Adam: "a ton of new projects, cool motion graphics, creations, website builds ... I would
   like them all added on to my website"). Work page: filter buttons and grouped cards; home: a row of six picks.
   Pictures keep their own shape (never cropped or tilted), nothing hides before it is on screen, and films only
   play when tapped. Colours and type come from portfolio-tokens.css, with fallbacks for pages without it. */
.nw { --nw-ink: var(--ink, #f4efe4); --nw-soft: var(--ink-soft, #c2c5cb); --nw-dim: var(--ink-dim, #a2a7b0);
  --nw-accent: var(--accent, #ffb56b); --nw-rule: var(--rule, #333b46); --nw-raised: var(--raised, #111720);
  --nw-focus: var(--focus, #ffcc98); }
.nw-head { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.nw-head h2 { font: 400 clamp(2.25rem, 4.6vw, 3.75rem)/1 var(--face-display, Fraunces, Georgia, serif); letter-spacing: -.03em; margin: 0; color: var(--nw-ink); }
.nw-head h2 em { color: var(--nw-accent); }
.nw-head p { max-width: 46rem; margin: 0; color: var(--nw-soft); font-size: 1.0625rem; line-height: 1.6; }
.nw-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2.5rem; padding: 0; list-style: none; }
.nw-chip { min-height: 44px; padding: .5rem 1rem; border: 1px solid var(--nw-rule); border-radius: 999px; background: transparent;
  color: var(--nw-soft); font: 500 .8125rem/1.2 var(--face-mono, 'JetBrains Mono', Consolas, monospace); letter-spacing: .04em; cursor: pointer; }
.nw-chip:hover { color: var(--nw-ink); border-color: var(--nw-dim); }
.nw-chip[aria-pressed="true"] { background: var(--nw-accent); border-color: var(--nw-accent); color: #14100a; }
.nw-chip:focus-visible, .nw-media:focus-visible, .nw-link:focus-visible { outline: 3px solid var(--nw-focus); outline-offset: 3px; }
.nw-group { margin-bottom: 3.5rem; }
.nw-group > h3 { display: flex; align-items: baseline; gap: .75rem; margin: 0 0 1.25rem; padding-top: 1rem; border-top: 1px solid var(--nw-rule);
  font: 500 .75rem/1.3 var(--face-mono, 'JetBrains Mono', Consolas, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--nw-dim); }
.nw-group > h3 span { color: var(--nw-soft); letter-spacing: .02em; text-transform: none; font-family: var(--face-body, Inter, Arial, sans-serif); font-size: .9375rem; }
.nw-grid { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); align-items: start; }
/* Mixed shapes (tall films beside wide ones) sit in rows of even height: each card grows in proportion to its
   own width-to-height ratio (--r), so a 9:16 reel and a 16:9 film share a row at the same picture height. */
.nw-grid.is-rows { display: flex; flex-wrap: wrap; gap: 2rem 1.25rem; --nw-row: clamp(13rem, 24vw, 19rem); }
.nw-grid.is-rows > .nw-card { flex: var(--r) 1 calc(var(--r) * var(--nw-row)); min-width: 0; }
/* An invisible filler soaks up the last row's spare width, so a lone last card keeps the row height. */
.nw-grid.is-rows::after { content: ''; flex: 999 1 0; }
.nw-grid.is-thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .nw-grid.is-thirds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Tablets: a lower row height lets two wide films share a row; at 24vw a lone wide card filled the whole width. */
  .nw-grid.is-rows, .nw-home .nw-grid.is-rows { --nw-row: 9rem; }
}
/* ...but on tablets a tall card that narrow wrapped its words one or two to a line (reviewer, 10-25). Phones use the
   two-column grid below instead; this minimum there pushed the page sideways. */
@media (min-width: 601px) and (max-width: 1000px) { .nw-grid.is-rows > .nw-card:not(.is-wide) { min-width: 12rem; } }
.nw-grid.is-rows > .nw-card:not(.is-wide) .nw-meta :is(h3, h4) { font-size: 1.125rem; }
.nw-grid.is-rows > .nw-card:not(.is-wide) .nw-meta p { font-size: .875rem; }
.nw-card { margin: 0; display: grid; gap: .75rem; }
/* The picture box takes the work's own shape from --ar, so nothing is cropped; the image fills it exactly. */
.nw-media { position: relative; display: block; aspect-ratio: var(--ar, 16 / 9); overflow: hidden; border-radius: 10px;
  background: var(--nw-raised); border: 1px solid var(--nw-rule); color: var(--nw-ink); text-decoration: none; }
.nw-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Hover lifts the frame instead of zooming the picture, which trimmed its edges (reviewer, 10-25). */
.nw-media { transition: border-color .2s ease, box-shadow .2s ease; }
.nw-media:hover { border-color: var(--nw-dim); box-shadow: 0 8px 24px #0008; }
.nw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* "Watch with sound" sits under the picture, not on it: on the picture it covered the logos' own wordmarks. */
.nw-play { display: inline-flex; align-items: center; gap: .35rem; order: 3; color: var(--nw-dim); font: 500 .75rem/1.3 var(--face-mono, 'JetBrains Mono', Consolas, monospace); }
.nw-play svg { width: .7rem; height: .7rem; fill: var(--nw-accent); }
.nw-meta > .nw-cat { order: 0; } .nw-meta > h4 { order: 1; } .nw-meta > p { order: 2; } .nw-meta > .nw-link { order: 4; }
.nw-meta { display: grid; gap: .3rem; }
.nw-cat { font: 500 .6875rem/1.3 var(--face-mono, 'JetBrains Mono', Consolas, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--nw-accent); }
.nw-meta h4, .nw-meta h3 { margin: 0; font: 400 clamp(1.25rem, 2vw, 1.5rem)/1.15 var(--face-display, Fraunces, Georgia, serif); color: var(--nw-ink); }
.nw-meta p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--nw-soft); }
.nw-link { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; color: var(--nw-ink); font: 500 .8125rem/1.2 var(--face-mono, 'JetBrains Mono', Consolas, monospace); text-underline-offset: 4px; }
/* Filtering hides whole groups and sections; [hidden] must win over any display rule above. */
.nw [hidden], .nw-hidden-by-filter { display: none !important; }
/* Home: six picks in even-height rows, a little shorter than on the Work page. */
.nw-home .nw-grid.is-rows { --nw-row: clamp(11rem, 17vw, 15rem); }
.nw-home .nw-more { margin-top: 1.5rem; }
@media (max-width: 600px) {
  .nw-filters { gap: .4rem; margin-bottom: 2rem; }
  .nw-chip { padding: .45rem .8rem; }
  .nw-grid { gap: 1.75rem; }
  /* Phones: two columns, wide pictures across both, tall ones side by side (a 9:16 card in an even-height row
     shrank to about 100 px wide). */
  .nw-grid.is-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem .75rem; }
  .nw-grid.is-rows::after { display: none; }
  .nw-grid.is-rows > .nw-card.is-wide { grid-column: 1 / -1; }
  /* A tall card with no tall partner (just before a wide one, or last in its group) left the right column empty;
     it takes the whole row at a readable width instead. A pair of tall cards before a wide one is matched by
     .nw-solo, which build.mjs sets on cards whose tall run has an odd count. */
  .nw-grid.is-rows > .nw-card.nw-solo { grid-column: 1 / -1; width: 62%; }
  /* Nine logo films one per line ran over three phone screens; two across keeps each logo readable. */
  .nw-grid.is-thirds { grid-template-columns: 1fr 1fr; gap: 1.5rem .75rem; }
  .nw-grid.is-thirds .nw-meta h4 { font-size: 1.125rem; }
  .nw-grid.is-thirds .nw-meta p { font-size: .875rem; }
  .nw-meta p { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) { .nw-media { transition: none; } }