/* The home page (site/tools/pages/home.mjs), after styles.css and css/pages.css. Works first: a compact hero beside the BR-mark canvas,
   the grid and its «Show more work» row, then the services, finishing, about, support and the form. Paper language: hairlines, mono
   labels, square chips, accent cells; no rounded cards, no shadows. */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- hero: text on the left, the mark's canvas on the right (its dither field thins out towards the text and the grid: hero.js fade);
   compact, so the first grid row is on screen at 1440 × 900 and the grid starts inside the first screen of a phone */
main.home .hero{height:auto;margin-top:var(--header);display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);overflow:hidden}
main.home .hero-text{position:relative;z-index:1;min-width:0;padding:clamp(32px,5vh,56px) 0 clamp(28px,4.5vh,44px) var(--gut)}
main.home .hero .label{margin-bottom:20px}
/* .h1: a share page's headline, a <p> there (home.mjs: the player's work title is that page's H1), same look */
main.home .hero :is(h1,.h1){font-size:clamp(34px,4.25vw,64px);line-height:.97;letter-spacing:-.035em;margin:0;font-weight:700;text-transform:uppercase;text-wrap:balance;overflow-wrap:break-word}
main.home .hero-lead{font-size:var(--t-lead);line-height:1.4;color:var(--body-ink);margin:22px 0 0;max-width:46ch;text-wrap:pretty}
main.home .hero .ctas{margin-top:28px}
main.home .hero-mark{position:relative;min-width:0}
main.home .hero-mark canvas{cursor:grab}

/* ---- the work: filters, grid, «Show more work» */
main.home section.work{padding:0 var(--gut) 72px}
main.home .filters{padding:16px 0 14px}
main.home .grid{position:relative}
main.home .tile{scroll-margin-top:96px}   /* keyboard focus brings a tile out from under the sticky filters (on top of the page's scroll padding) */
/* the server-rendered list of works is the base without JS; with JS the grid replaces it, so it never flashes up first (main.js shows
   it again when works.json cannot be loaded), and the empty grid holds about two rows of space meanwhile */
@media (scripting:enabled){main.home .worklist:not(.shown){display:none}main.home .worklist:not(.shown)+.grid:empty{min-height:min(60vh,560px)}}
.grid .sweep{position:absolute;left:0;z-index:3;pointer-events:none;image-rendering:pixelated}
.tile.arriving>img,.tile.arriving>video,.tile.arriving>.cap,.tile.arriving>.pin,.tile.arriving>.soon,.tile.arriving>.state{visibility:hidden}
.more{position:relative;margin-top:var(--gap)}
.more[hidden]{display:none}
.more-btn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:60px;border:1px solid var(--line);color:var(--ink);
  font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;transition:color .2s,border-color .2s}
.more-btn::before{content:'';width:6px;height:6px;background:var(--accent);transition:transform .2s}
.more-btn .n{color:var(--accent)}
.more-btn:hover{color:var(--accent);border-color:var(--accent)}
.more-btn:hover::before{transform:scale(1.5)}
.more-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.more.charging .more-btn{color:transparent;border-color:transparent;transition:none}
.more.charging .more-btn::before,.more.charging .more-btn .n{visibility:hidden}
.more .more-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated}

/* ---- two services: a large real picture each, a line, a link */
main.home .services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px var(--gut)}   /* four cards, two rows */
main.home .services>.label{grid-column:1/-1;margin-bottom:-44px}   /* the row gap minus the label's own 28 px */
.svc{display:flex;flex-direction:column;min-width:0}
.svc-media{display:block;overflow:hidden;background:#E4E6EB}
.svc-media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.svc:hover .svc-media img{transform:scale(1.015)}
.svc-title{font-size:clamp(28px,3.3vw,46px);line-height:1;letter-spacing:-.03em;margin:30px 0 0;font-weight:700;text-transform:uppercase;text-wrap:balance}
.svc-title a:hover{color:var(--accent)}
.svc-line{font-size:var(--t-lead);line-height:1.4;color:var(--body-ink);margin:16px 0 0;max-width:38ch;text-wrap:pretty}
.svc .ctas{margin-top:auto;padding-top:26px}   /* both buttons of a pair on one line, like the crafts below */

/* ---- post-production & motion: two crafts side by side (like the services), each a finished piece with its title (the services'
   caption style), a line, a CTA */
main.home .finishing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px var(--gut);align-items:start}
main.home .finishing>.label{grid-column:1/-1;margin-bottom:-20px}
.craft{display:flex;flex-direction:column;min-width:0}
.craft .sec-title{margin-top:30px;font-size:clamp(28px,3.3vw,46px);line-height:1}   /* the services' title size: the two pairs read as one rhythm */
.craft .sec-lead{max-width:44ch;margin-top:16px}   /* the services' line rhythm */
/* the two CTAs sit on one line whatever the length of the texts above them */
main.home .finishing{align-items:stretch}
.craft .ctas{margin-top:auto;padding-top:26px}
.fin-media{margin:0;display:block;min-width:0}
.fin-media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#0B0D14}
.fin-media .media-play{width:100%}   /* a block button shrinks to its content: 0 × 0 until the lazy image loads, then the page jumps */
dl.roles{margin:0;display:grid;gap:5px}
dl.roles div{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px}
dl.roles dt{color:var(--mid);min-width:13ch}
dl.roles dd{margin:0;font-size:15px;line-height:1.4}

/* ---- about: the old intro + portrait layout (styles.css), new copy */
main.home .about h2 span{margin-top:12px;text-wrap:balance}
main.home .about .intro p,main.home .cap-grid p{text-wrap:pretty}
.nw{white-space:nowrap}

/* ---- ongoing production support: a short band */
main.home .support{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:20px 64px;align-items:end}
main.home .support .sec-title{text-wrap:balance}
main.home .support .sec-lead{margin-top:0}

@media (max-width:1024px){
  main.home .support{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  main.home .hero{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
  /* one swipeable line per filter row instead of two or three wrapped ones; the fade on the right says there is more */
  main.home .filters .row{flex-wrap:nowrap;gap:0 18px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin-right:calc(-1 * var(--gut));padding-right:40px;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
  main.home .filters .row::-webkit-scrollbar{display:none}
  main.home .filters button{flex:0 0 auto;padding:8px 0 6px;white-space:nowrap}
}
@media (max-width:720px){
  main.home .finishing{grid-template-columns:minmax(0,1fr);gap:56px}
  main.home .finishing>.label{margin-bottom:-36px}
  main.home .hero{grid-template-columns:minmax(0,1fr)}
  main.home .hero-mark{display:none}
  main.home .hero-text{padding:28px var(--gut) 26px}
  main.home .hero .label{margin-bottom:16px}
  main.home .hero :is(h1,.h1){font-size:clamp(30px,8.6vw,40px);line-height:1}
  main.home .hero-lead{font-size:17px;margin-top:16px}
  main.home .hero .ctas{margin-top:22px;gap:10px}
  main.home .hero .cta{padding:10px 16px}
  main.home section.work{padding:0 var(--gut) 56px}
  main.home .filters{padding:10px 0 8px;gap:2px}
  main.home .services{grid-template-columns:minmax(0,1fr);gap:56px}
  main.home .services>.label{margin-bottom:-28px}
  .svc-title{margin-top:24px}
  .more-btn{height:56px}
}
@media (prefers-reduced-motion:reduce){.svc-media img{transition:none}.svc:hover .svc-media img{transform:none}}