/* The home page's hash views put the world's chapter rail and gauge away. */
body[data-tab="gallery"] .o2,body[data-tab="gallery"] .chapter-nav,
body[data-tab="news"] .o2,body[data-tab="news"] .chapter-nav{display:none}

::view-transition-old(root),::view-transition-new(root){
  animation-duration:.18s;animation-timing-function:var(--ease-out);mix-blend-mode:normal;
}
::view-transition-old(root){animation-name:page-out}
::view-transition-new(root){animation-name:page-in}
@keyframes page-out{to{opacity:0}}
@keyframes page-in{from{opacity:0}}

.view{
  min-height:100svh;background:var(--ink);
  padding:clamp(112px,15vh,168px) var(--frame) clamp(80px,12vh,140px);
}
.view__label{
  display:flex;align-items:center;gap:17px;margin:0 0 clamp(28px,5vh,56px);
  color:#c2b399;font:400 9px/1.5 var(--body);letter-spacing:.23em;text-transform:uppercase;
}
.view__label i{flex:1;max-width:64px;height:1px;background:linear-gradient(90deg,#c0ab7859,transparent)}

.frame{position:relative;overflow:hidden;background:#141210}
.frame img{
  width:100%;height:auto;display:block;aspect-ratio:1920/1015;object-fit:cover;
  filter:saturate(.78) contrast(1.04) brightness(.9);
  transition:filter .22s var(--ease-out),transform .22s var(--ease-out);
}

.shots{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(12px,1.8vw,28px);row-gap:clamp(28px,5vh,64px);
}
.shots figure{margin:0;position:relative}
/* A shot opens in the viewer, so it is a button, not a download link. */
.shots__open{
  display:block;width:100%;margin:0;padding:0;border:0;background:none;
  color:inherit;font:inherit;text-align:left;cursor:zoom-in;outline-offset:6px;
}
.shots__open:focus-visible .frame img{
  filter:saturate(.9) contrast(1.03) brightness(1);
}
.shots figcaption{
  margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  color:var(--ui-text);font:400 9px/1.5 var(--body);letter-spacing:.23em;text-transform:uppercase;
}
.shots figcaption span{opacity:.62}

/* A file's download mark, the same for every file in the Gallery and the
   press kit: an arrow at the right end of the caption, out of the picture,
   under its corner. It shows only while the picture is under the pointer
   (or anything in its figure holds focus); a screen with no hover keeps it
   showing. */
.get{
  display:grid;place-items:center;width:24px;height:24px;flex:none;
  color:#a9a49a;text-decoration:none;opacity:0;
  transition:opacity .18s,color .18s;
}
.get svg{width:13px;height:13px;display:block}
figure:hover .get,figure:focus-within .get{opacity:1}
.get:focus-visible{outline:1px solid var(--ui-current);outline-offset:2px}
@media(hover:none){.get{opacity:1}}
.shots figure:nth-child(1){grid-column:1/span 7}
.shots figure:nth-child(2){grid-column:8/span 5;align-self:end}
.shots figure:nth-child(3){grid-column:1/span 5;align-self:center}
.shots figure:nth-child(4){grid-column:6/span 7;align-self:end}
.shots figure:nth-child(5){grid-column:3/span 8}
.shots figure:nth-child(n+6){grid-column:span 6}
/* The pairs start on an even shot, so an even last shot stands alone: centre it. */
@media(min-width:721px){.shots figure:nth-child(n+6):nth-child(even):last-child{grid-column:4/span 6}}

.cards{display:grid;gap:clamp(16px,2.4vh,28px);max-width:820px}

/* Chucky idles in the gutter the 820px card column leaves on wide screens. */
#news{position:relative}
.news__chucky{
  position:absolute;z-index:0;right:var(--frame);bottom:clamp(72px,11vh,132px);
  width:clamp(150px,13vw,230px);height:auto;pointer-events:none;user-select:none;
  filter:saturate(.82) contrast(1.02) brightness(.92) drop-shadow(0 26px 34px #00000073);
}
@media(max-width:1200px){.news__chucky{display:none}}
@media(prefers-reduced-motion:no-preference){
  .news__chucky{animation:chucky-idle 6s ease-in-out infinite}
  @keyframes chucky-idle{50%{transform:translateY(-7px)}}
}
.card{
  position:relative;
  /* Fixed image column: every thumbnail is the same size and, with or
     without one, every card's copy starts on the same line. */
  display:grid;grid-template-columns:180px minmax(0,1fr);
  gap:clamp(16px,2vw,28px);align-items:stretch;
  margin:0;padding:clamp(14px,1.6vw,20px);border:0;text-align:left;
  background:#12100e;color:var(--ui-text);font:inherit;
  transition:background-color .18s,transform .18s var(--ease-out);
}
.card > .frame{grid-column:1;align-self:start;width:100%;aspect-ratio:16/10}
.card > .frame img{height:100%;aspect-ratio:auto}
.card > .frame--empty{background:none}
.card__body{grid-column:2;position:relative;min-width:0}
/* Link sits on the bottom-right corner; the padding keeps copy off it. */
.card__body:has(.linkout){padding-bottom:44px}
.card__body > .linkout{position:absolute;right:0;bottom:0;margin-top:0}

/* The button owns the click target and stretches over the card, so a real
   link can sit above it and stay separately clickable. */
.card__open{
  margin:0;padding:0;border:0;background:none;
  font:inherit;color:inherit;text-align:left;cursor:pointer;
}
.card__open::after{content:'';position:absolute;inset:0;z-index:1}
.card:has(.card__open:focus-visible){background:var(--ui-ink)}
.card:has(.card__open:active){transform:translateY(1px)}
.card:has(.card__open:focus-visible) .frame img{filter:saturate(.9) contrast(1.03) brightness(1);transform:scale(1.03)}
.card__open:focus-visible{outline:none}
.card:has(.card__open:focus-visible){outline:2px solid var(--ui-current);outline-offset:3px}
.card__meta,.entry__meta{
  margin:0 0 10px;display:flex;align-items:center;gap:12px;
  color:#c2b399;font:400 9px/1.5 var(--body);letter-spacing:.23em;text-transform:uppercase;
}
.card__meta b,.entry__meta b{font-weight:400;color:var(--ui-current);letter-spacing:.2em}
.card__title{
  margin:0 0 8px;font-family:var(--display);font-weight:300;letter-spacing:.02em;
  font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.24;color:#e8e5dc;text-wrap:pretty;
}
.card__lead{margin:0;font-size:13px;line-height:1.7;color:#a9a49a;max-width:52ch}

.linkout{
  position:relative;z-index:2;justify-self:start;
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  padding:10px 15px;border:1px solid #ffffff1f;
  background:var(--ui-ink);color:var(--ui-text-hi);text-decoration:none;
  font:400 9px/1 var(--body);letter-spacing:.23em;text-transform:uppercase;
  transition:background-color .18s,color .18s,border-color .18s;
}
.linkout::after{content:'\2197';font-size:12px;letter-spacing:0;line-height:1}
.linkout--sm{margin-top:13px;padding:8px 12px}
.linkout:hover,.linkout:focus-visible{
  background:var(--ui-current);color:#120e09;border-color:transparent;
}
.linkout:focus-visible{outline:2px solid var(--ui-current);outline-offset:3px}

.entry{
  border:0;padding:clamp(28px,4vw,48px);margin:auto;
  width:min(720px,calc(100vw - 2 * var(--frame)));max-height:min(86svh,900px);
  background:#0f0d0c;color:var(--ui-text);box-shadow:0 40px 120px #000000b8;
  opacity:1;transform:scale(1);transform-origin:center;
  transition:opacity .22s var(--ease-out),transform .22s var(--ease-out),display .22s allow-discrete,overlay .22s allow-discrete;
}
.entry:not([open]){opacity:0;transform:scale(.96)}
.entry::backdrop{
  background:#06050599;backdrop-filter:blur(3px);opacity:1;
  transition:opacity .22s var(--ease-out),display .22s allow-discrete,overlay .22s allow-discrete;
}
.entry:not([open])::backdrop{opacity:0}
@starting-style{
  .entry[open]{opacity:0;transform:scale(.96)}
  .entry[open]::backdrop{opacity:0}
}
body:has(.entry[open]){overflow:hidden}
.entry__title{
  margin:0 0 clamp(18px,2.4vh,26px);font-family:var(--display);font-weight:200;
  letter-spacing:.03em;font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.16;color:#f2ebdc;
}
/* Sits to the left of the close button, sharing its 38px band so the two
   line up horizontally. */
.entry > .linkout{
  /* Centred on the close button's mid-line (12px top + half its 38px box),
     so the two align without matching heights. */
  position:absolute;top:31px;right:56px;transform:translateY(-50%);
  margin-top:0;
}
.entry .frame{margin-bottom:clamp(18px,2.6vh,28px)}
.entry__lead{color:#ddd6c8;font-size:15px;line-height:1.75}
.entry p{margin:0 0 1.1em;font-size:14px;line-height:1.85;color:#a9a49a;max-width:62ch}
.entry p:last-child{margin-bottom:0}
.entry__close{
  position:absolute;top:12px;right:12px;width:38px;height:38px;padding:0;
  border:0;background:none;cursor:pointer;color:var(--ui-text);
  transition:background-color .15s,color .15s;
}
.entry__close::before,.entry__close::after{
  content:'';position:absolute;left:11px;top:18px;width:16px;height:1px;background:currentColor;
}
.entry__close::before{transform:rotate(45deg)}
.entry__close::after{transform:rotate(-45deg)}
.entry__close:focus-visible{background:var(--ui-ink);color:var(--ui-text-hi)}

@media(hover:hover) and (pointer:fine){
  .shots figure:hover .frame img{filter:saturate(.9) contrast(1.03) brightness(1)}
  .get:hover{color:var(--ui-text-hi)}
  .card:hover{background:var(--ui-ink)}
  .card:hover .frame img{filter:saturate(.9) contrast(1.03) brightness(1);transform:scale(1.03)}
  .card:has(.linkout:hover){background:#12100e}
  .entry__close:hover{background:var(--ui-ink);color:var(--ui-text-hi)}
  .colophon a:hover,.colophon__link:hover{color:var(--ui-text-hi);text-decoration-color:var(--ui-text-hi)}
}
@media(prefers-reduced-transparency:reduce){.entry::backdrop{backdrop-filter:none}}

/* Colophon: the page-end line under the creed nav and at the foot of each view. */
.colophon{
  margin:clamp(28px,5vh,56px) 0 0;display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;
  color:#a9a49a;font:400 8px/1.5 var(--body);letter-spacing:.22em;text-transform:uppercase;
}
/* Plain text link: the label gold against the grey copyright, hairline underline. */
.colophon__link{margin:0;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.colophon a,.colophon__link{color:#c2b399;text-decoration:underline;text-decoration-color:#c2b39966;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .15s,text-decoration-color .15s}
.colophon a:focus-visible,.colophon__link:focus-visible{outline:1px solid #dfc49f;outline-offset:6px}
.colophon i{width:1px;height:9px;background:var(--ui-rule)}
.view .colophon{justify-content:flex-start;margin-top:clamp(48px,8vh,80px)}
.creed .colophon{justify-self:center}

/* The privacy policy overlay. It runs much longer than a news entry, so the
   copy scrolls under a title and close button that stay put. */
.entry--legal{
  display:flex;flex-direction:column;
  width:min(760px,calc(100vw - 2 * var(--frame)));
}
/* That flex outranks the browser's own hiding of a closed dialog, which
   would leave an invisible box at the foot of the page after one visit. */
.entry--legal:not([open]){display:none}
.entry--legal .entry__title{margin-bottom:clamp(14px,2vh,20px);font-size:clamp(1.5rem,2.6vw,2.1rem)}
.entry__scroll{overflow-y:auto;min-height:0;margin-right:-8px;padding-right:8px}
.entry__scroll h3{
  margin:clamp(24px,3.4vh,34px) 0 10px;font-family:var(--display);font-weight:300;letter-spacing:.03em;
  font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.3;color:#e8e5dc;
}
.entry__scroll h3:first-child{margin-top:0}
.entry__scroll p{text-wrap:pretty}

@media(max-width:720px){
  .view{padding-top:clamp(84px,13vh,120px)}
  .shots{grid-template-columns:1fr;row-gap:26px}
  .shots figure:nth-child(n){grid-column:1;align-self:auto}
  .card{grid-template-columns:1fr;gap:14px}
  .card > .frame{grid-column:1;aspect-ratio:16/9}
  .card > .frame--empty{display:none}
  .card__body{grid-column:1}
  .colophon{gap:10px}
  .entry{width:100vw;max-width:none;max-height:100svh;height:100svh}
}
@media(prefers-reduced-motion:reduce){
  .frame img,.card,.get,.colophon a,.colophon__link{transition:none}
  .card:hover .frame img,.card:focus-visible .frame img{transform:none}
  .entry{transform:none;transition:opacity .16s var(--ease-out),display .16s allow-discrete,overlay .16s allow-discrete}
  .entry:not([open]){transform:none}
  .entry::backdrop{backdrop-filter:none;transition:opacity .16s var(--ease-out),display .16s allow-discrete,overlay .16s allow-discrete}
}

/* Press kit, in pages that snap like the world's. Page one is the trailer,
   with the masthead (title, hook and the way down) at its foot. Page two is headed by that same masthead, carried up by the snap,
   and fills its screen down to the end of the key features; from there the
   download sets and links scroll freely to the end, since a snap area
   taller than the screen can be scrolled within. The whole page keeps to
   one column (--w): the trailer's width, which is also the page frame, and
   so the nav's. The snap and that frame are for landscape screens with room
   for them; anywhere else the page scrolls straight through on the site's
   own frame. The page sets its own rhythm, so the shared view padding and
   colophon margin step aside. */
body[data-page="press"]{
  --press-pad:clamp(84px,9.5vh,104px);
  --w:calc(100vw - 2 * var(--frame));
  --title:clamp(2.9rem,calc(var(--w) * .08),8rem);
}
@media(min-aspect-ratio:4/3) and (min-height:560px){
  /* The title is 8% of the column, so .072 of it tall against the video's
     .5625: the column takes the full width less a narrow gutter, or what the
     header, the title and about 54px of gap and foot padding leave,
     whichever is smaller. */
  body[data-page="press"]{
    --w:min(calc(100vw - 2 * clamp(16px,3.2vw,48px)),calc((100svh - var(--press-pad) - 54px) / .6345));
    --frame:calc((100vw - var(--w)) / 2);
  }
}
/* Its own display is also what shows it, over the hidden attribute the
   view markup carries. */
#press{display:block;padding:0}
/* The trailer leads the page, so the Press Kit label is for screen readers only. */
#press > .view__label{
  position:absolute;width:1px;height:1px;margin:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
/* Page two snaps --snap-top below the screen's top: the header's clearance,
   or less where js/press.js finds page two would not otherwise end on
   screen. */
.press__body{
  display:grid;align-content:start;gap:clamp(40px,6.5vh,80px);
  padding:0 var(--frame) clamp(80px,12vh,140px);
  scroll-margin-top:var(--snap-top,var(--press-pad));
}
.press__body > .colophon{margin-top:0}
.press__page{display:grid;align-content:start;gap:clamp(28px,4.4vh,48px)}
/* Past page two's snap line js/press.js stops the snapping, since Safari
   will not scroll freely inside a snap area taller than the screen. */
html.press-free{scroll-snap-type:none}
@media(min-aspect-ratio:4/3) and (min-height:560px){
  .press__screen,.press__body{scroll-snap-align:start}
  .press__screen{scroll-snap-stop:always}
  /* Page two's screen holds the masthead through the key features, so its
     rhythm is a step tighter than the free-scrolling sets below. */
  .press__page{min-height:calc(100svh - var(--snap-top,var(--press-pad)));gap:clamp(22px,3vh,36px)}
  .press__page .press__editorial{gap:clamp(28px,3.6vh,44px)}
  .press__page .press__band{margin-bottom:clamp(14px,2.2vh,22px)}
}

.press__band{
  display:flex;align-items:center;gap:17px;margin:0 0 clamp(18px,3vh,30px);
  color:#c2b399;font:400 9px/1.5 var(--body);letter-spacing:.23em;text-transform:uppercase;
}

/* Pulled left by the B's side bearing, so its stem, not its box, lines up
   with the column's edge. */
.press__title{
  margin:0 0 0 -.063em;font-family:var(--display);font-weight:200;text-transform:uppercase;
  font-size:var(--title);line-height:.9;letter-spacing:.055em;
  color:#f2ebdc;text-wrap:balance;
}
.press__hook{
  margin:clamp(20px,3vh,32px) 0 0;max-width:32ch;
  font-size:clamp(1rem,1.55vw,1.28rem);font-weight:300;letter-spacing:.02em;color:#ddd6c8;
}

.press__cols{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,5.5vh,60px) clamp(28px,4vw,72px)}
@media(min-width:900px){
  .press__cols{grid-template-columns:clamp(208px,21vw,284px) minmax(0,1fr);align-items:start}
}

.facts{display:grid;gap:clamp(16px,2.4vh,24px);margin:0}
.fact{display:grid;gap:6px}
.fact dt{color:#c2b399;font:400 9px/1.5 var(--body);letter-spacing:.23em;text-transform:uppercase}
.fact dd{margin:0;font-size:14px;line-height:1.62;color:var(--ui-text)}
.fact__sub{color:#a9a49a}
.fact__qual{display:block;margin-top:3px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8d867c}
.fact--note dd{font-size:13px;line-height:1.72;color:#a9a49a}
.fact__mail{
  color:var(--ui-text-hi);text-decoration:underline;text-decoration-color:#d9d3c666;
  text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color .15s,text-decoration-color .15s;
}
.fact__mail:focus-visible{outline:1px solid var(--ui-current);outline-offset:4px}

.press__editorial{display:grid;gap:clamp(40px,6vh,76px)}
.press__lead{margin:0 0 1.1em;max-width:58ch;font-size:15px;line-height:1.75;color:#ddd6c8}
.press__copy{margin:0 0 1.1em;max-width:62ch;font-size:14px;line-height:1.85;color:#a9a49a}
.press__copy:last-child{margin-bottom:0}
.press__shown{
  margin:clamp(18px,2.6vh,28px) 0 0;max-width:52ch;
  font-size:13px;line-height:1.7;color:#d3cabb;
}

.feats{
  display:grid;gap:clamp(22px,3.4vh,36px) clamp(28px,3vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
.feat{display:grid;gap:9px;padding-top:15px;border-top:1px solid var(--ui-rule)}
.feat__title{
  margin:0;font-family:var(--display);font-weight:300;letter-spacing:.025em;
  font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.2;color:#e8e5dc;text-wrap:pretty;
}
.feat__body{margin:0;max-width:46ch;font-size:13px;line-height:1.8;color:#a9a49a}

/* Download sets. Dashed until the files land; solid once they have. An
   opened set brings the section to the top of the screen (js/views.js), to
   page two's top line, and while one is open the section is at least a
   screen tall, so the page can always scroll that far. */
.press__downloads{scroll-margin-top:var(--snap-top,var(--press-pad))}
.press__downloads:has(.kit__panel:not([hidden])){min-height:calc(100svh - var(--snap-top,var(--press-pad)))}
/* One line heads the sets: the heading, and the whole kit's zip beside it. */
.press__dlhead{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;
  margin-bottom:clamp(18px,2.6vh,26px);
}
.press__sub{
  margin:0;font-family:var(--display);font-weight:300;letter-spacing:.03em;
  font-size:clamp(1.45rem,2.4vw,2.1rem);line-height:1.15;color:#e8e5dc;text-wrap:balance;
}
/* The whole kit in one zip, the one solid button in the download section. */
.kits__all{
  display:inline-flex;align-items:center;gap:11px;
  padding:13px 18px;background:var(--ui-current);color:#120e09;text-decoration:none;
  font:400 10px/1 var(--body);letter-spacing:.23em;text-transform:uppercase;
  transition:background-color .18s;
}
.kits__all svg{width:15px;height:15px;flex:none}
.kits__all small{padding-left:11px;border-left:1px solid #120e0940;font-size:9px;letter-spacing:.2em;opacity:.72}
.kits__all:focus-visible{outline:2px solid var(--ui-current);outline-offset:3px}
.kits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
@media(min-width:760px){.kits{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kit{
  position:relative;display:flex;flex-direction:column;
  border:1px dashed var(--ui-rule);background:#12100e;
  transition:background-color .18s,border-color .18s;
}
.kit[data-ready="1"]{border-style:solid;border-color:#ffffff1f}
/* The button owns the tile's click target; the one-click download sits above it. */
.kit__open{
  flex:1;display:flex;flex-direction:column;gap:5px;min-height:96px;
  margin:0;padding:clamp(13px,1.6vw,17px);border:0;background:none;
  font:inherit;color:inherit;text-align:left;cursor:pointer;
}
.kit__open::after{content:'';position:absolute;inset:0;z-index:1}
.kit__open:focus-visible{outline:none}
.kit:has(.kit__open:focus-visible){outline:2px solid var(--ui-current);outline-offset:3px}
.kit:has(.kit__open:active){transform:translateY(1px)}
.kit__name{
  font-family:var(--display);font-weight:300;letter-spacing:.03em;
  font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.2;color:#e8e5dc;
}
.kit__fmt{font:400 9px/1.6 var(--body);letter-spacing:.23em;text-transform:uppercase;color:#c2b399}
/* The count sits in the tile's bottom-right corner; the negative margin
   takes back the letter-spacing after its last letter, so the letters
   themselves end on the edge. */
.kit__state{
  align-self:flex-end;margin:auto -.23em 0 0;padding-top:12px;
  font:400 9px/1 var(--body);letter-spacing:.23em;text-transform:uppercase;color:#8d867c;
}
.kit[data-ready="1"] .kit__state{color:var(--ui-text)}
/* Download marks stay quiet: no box, a muted line, brightening under the
   pointer. Like a file's mark, the set's shows only while its tile is
   under the pointer or holds focus, and always on a screen with no hover. */
/* Its 14px arrow, centred in a 28px box, ends on the tile's padding line,
   the same right edge the count's letters end on. */
.kit__all{
  position:absolute;z-index:2;
  top:calc(clamp(13px,1.6vw,17px) - 7px);right:calc(clamp(13px,1.6vw,17px) - 7px);
  display:grid;place-items:center;width:28px;height:28px;
  background:none;color:#8d867c;text-decoration:none;opacity:0;
  transition:opacity .18s,background-color .18s,color .18s;
}
.kit:hover .kit__all,.kit:focus-within .kit__all{opacity:1}
@media(hover:none){.kit__all{opacity:1}}
.kit__all svg{width:14px;height:14px;display:block}
.kit__all:focus-visible{outline:2px solid var(--ui-current);outline-offset:3px}
/* Keep the set's name clear of that corner. */
.kit:has(.kit__all) .kit__name{padding-right:30px}

.kit__panel{
  --kit-ratio:1920/1015;--kit-fit:cover;
  margin-top:clamp(20px,3vh,32px);
}
.kit__note{margin:0 0 clamp(16px,2.4vh,22px);max-width:60ch;font-size:13px;line-height:1.75;color:#a9a49a}
.kit__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));
  column-gap:clamp(12px,1.6vw,20px);row-gap:clamp(18px,2.6vh,28px);
}
.kit__grid figure{margin:0}
.kit__grid .frame img{aspect-ratio:var(--kit-ratio);object-fit:var(--kit-fit)}
.kit__get{display:block;text-decoration:none;outline-offset:6px}
/* A shot is a button that opens the viewer. */
button.kit__get{
  width:100%;margin:0;padding:0;border:0;background:none;
  color:inherit;font:inherit;text-align:left;cursor:zoom-in;
}
.kit__get:focus-visible .frame img{filter:saturate(.9) contrast(1.03) brightness(1)}
.kit__grid figcaption{
  margin-top:11px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  color:var(--ui-text);font:400 9px/1.5 var(--body);letter-spacing:.23em;text-transform:uppercase;
}
.kit__grid figcaption span{opacity:.62}
/* A file that has not arrived reads as a label, not as a button. */
.kit__grid figcaption b{font-weight:400;padding:4px 0;color:#8d867c}
.frame--soon{
  aspect-ratio:var(--kit-ratio,1920/1015);display:grid;place-items:center;
  background:repeating-linear-gradient(135deg,#ffffff08 0 1px,transparent 1px 9px),#141210;
}
.frame--soon span{color:#8d867c;font:400 9px/1 var(--body);letter-spacing:.23em;text-transform:uppercase}

.press__links{display:flex;flex-wrap:wrap;gap:12px}
.press__links .linkout{margin-top:0}

@media(hover:hover) and (pointer:fine){
  .kit:hover{background:var(--ui-ink)}
  .kit:has(.kit__all:hover){background:#12100e}
  .kit__all:hover{background:var(--ui-ink);color:var(--ui-text-hi)}
  .kits__all:hover{background:var(--ui-current-hi)}
  .kit__get:hover .frame img{filter:saturate(.9) contrast(1.03) brightness(1)}
  .fact__mail:hover{color:var(--ui-text-hi);text-decoration-color:var(--ui-current)}
}
@media(prefers-reduced-motion:reduce){
  .kit,.kit__all{transition:none}
  .kit:has(.kit__open:active){transform:none}
}

/* Logos are dark artwork, so their set sits on paper, untinted, and the
   transparent cuts on a checkerboard that shows they are. */
.kit__panel--paper .frame{background:#efebe3}
.kit__panel--paper .kit__get .frame img{filter:none}
.kit__panel--paper .frame--checker{background:repeating-conic-gradient(#e2ddd2 0 25%,#f3f0e9 0 50%) 0 0/14px 14px}

/* Page one: the trailer, the column's width, and under it the room the
   masthead's title line takes plus a foot gap, so that the title, the first
   thing in page two, closes this screen. */
.press__screen{
  display:grid;grid-template-columns:var(--w);align-content:center;justify-content:center;
  padding:var(--press-pad) 0 clamp(14px,2.2vh,22px);
}
@media(min-aspect-ratio:4/3) and (min-height:560px){
  .press__screen{min-height:calc(100svh - var(--title) * .9 - clamp(20px,3vh,32px))}
}
.press__trailer{margin:0}

/* The masthead: the title and hook on the left, and on the right the way
   down, its word on the title's baseline. */
.press__masthead{display:flex;flex-wrap:wrap;align-items:first baseline;justify-content:space-between;gap:16px 24px}
.press__cta{display:flex;margin-left:auto}

/* Between the two pages, --p (set by js/press.js from the scroll: 0 on the
   trailer, 1 on page two) fades the trailer out as the masthead rises over
   where it was, fades the hook in under the title, and fades the way down
   out by halfway; past that, js/press.js marks it gone, so page two has no
   way down to reach. (The link's own pulse is on its opacity, so the fade
   is on its wrapper.) */
@media(min-aspect-ratio:4/3) and (min-height:560px){
  .press__trailer{opacity:calc(1 - var(--p,0) * 1.2)}
  .press__hook{opacity:var(--p,1)}
  .press__cta{opacity:calc(1 - var(--p,0) * 2)}
  .press__cta.is-gone{visibility:hidden}
}
/* The way down is a word and an arrow, no box, the arrow centred on the
   word. */
.press__more{
  display:inline-flex;align-items:center;gap:9px;padding:6px 0;
  color:#c2b399;text-decoration:none;
  font:400 10px/1 var(--body);letter-spacing:.23em;text-transform:uppercase;
  transition:color .18s;
}
.press__more svg{width:12px;height:12px;display:block}
.press__more:focus-visible{outline:1px solid var(--ui-current);outline-offset:6px}
@media(prefers-reduced-motion:no-preference){
  /* Word and arrow breathe together, in place: a fade, no travel. It holds
     still under the pointer or the keyboard. */
  .press__more{animation:press-more 2.4s var(--ease-in-out) infinite}
  .press__more:hover,.press__more:focus-visible{animation:none}
  @keyframes press-more{50%{opacity:.3}}
}
@media(hover:hover) and (pointer:fine){
  .press__more:hover{color:var(--ui-text-hi)}
}
.press__video{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;background:#000}
/* The player fills the frame; the poster lies over it until the trailer is
   playing, then fades away (js/press.js). */
.press__player{position:relative;overflow:hidden}
.press__player iframe,.press__slot{position:absolute;inset:0;width:100%;height:100%;border:0}
.press__play{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;
  padding:0;border:0;background:#000;cursor:pointer;
  transition:opacity .45s var(--ease-out),visibility 0s linear .45s;
}
.press__player.is-playing .press__play{opacity:0;visibility:hidden}
.press__play img{display:block;width:100%;height:100%;object-fit:cover}
/* The play control sits in the middle of the poster, in the page's button
   style: a play mark in a hairline square on a see-through dark ground,
   which takes the accent only under the pointer. The whole poster takes
   the press. (Its triangle sits a pixel right of centre, where its weight
   looks centred.) */
.press__play-cue{
  position:absolute;z-index:1;left:50%;top:50%;translate:-50% -50%;
  display:grid;place-items:center;width:clamp(52px,4.4vw,64px);aspect-ratio:1;
  border:1px solid #f2ebdc40;background:#0a090873;backdrop-filter:blur(3px);color:#f2ebdc;
  transition:background-color .18s,border-color .18s,color .18s;
}
.press__play-cue svg{width:16px;height:16px;display:block;fill:currentColor;translate:1px 0}
.press__play:focus-visible{outline:2px solid var(--ui-current);outline-offset:4px}
.press__play:focus-visible .press__play-cue{background:var(--ui-current);border-color:transparent;color:#120e09}
@media(hover:hover) and (pointer:fine){
  .press__play:hover .press__play-cue{background:var(--ui-current);border-color:transparent;color:#120e09}
}
@media(prefers-reduced-motion:reduce){.press__play-cue{transition:none}}
@media(prefers-reduced-transparency:reduce){.press__play-cue{backdrop-filter:none;background:#0a0908cc}}

/* Screenshot viewer: the whole screen, the shot fitted inside it, and above
   it the shot's own download and the whole set's. */
.viewer{
  position:fixed;inset:0;width:100vw;height:100svh;max-width:none;max-height:none;
  margin:0;padding:0;border:0;
  display:grid;grid-template-rows:auto minmax(0,1fr);
  background:#070605f2;color:var(--ui-text);opacity:1;
  transition:opacity .22s var(--ease-out),display .22s allow-discrete,overlay .22s allow-discrete;
}
.viewer:not([open]){display:none;opacity:0}
.viewer::backdrop{background:#000000b3}
@starting-style{.viewer[open]{opacity:0}}
body:has(.viewer[open]){overflow:hidden}

.viewer__bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;
  padding:12px clamp(12px,2.4vw,28px);
}
.viewer__meta{
  flex:1 1 180px;min-width:0;margin:0;display:flex;align-items:baseline;gap:14px;
  font:400 9px/1.5 var(--body);letter-spacing:.23em;text-transform:uppercase;
}
.viewer__count{flex:none;color:#c2b399;font-variant-numeric:tabular-nums}
.viewer__cap{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.viewer__acts{display:flex;align-items:center;gap:10px;margin-left:auto}
.viewer__get{
  display:inline-flex;align-items:center;gap:9px;padding:10px 14px;
  border:1px solid #ffffff1f;background:var(--ui-ink);color:var(--ui-text-hi);text-decoration:none;
  font:400 9px/1 var(--body);letter-spacing:.23em;text-transform:uppercase;white-space:nowrap;
  transition:background-color .18s,color .18s,border-color .18s;
}
.viewer__get[hidden]{display:none}
.viewer__get svg{width:14px;height:14px;flex:none}
.viewer__get--all{background:var(--ui-current);color:#120e09;border-color:transparent}
.viewer__get:focus-visible{outline:2px solid var(--ui-current);outline-offset:3px}
.viewer__close{position:relative;top:auto;right:auto;flex:none}

.viewer__stage{
  min-height:0;display:flex;align-items:center;justify-content:center;
  padding:0 clamp(60px,6vw,104px) clamp(16px,3.4vh,36px);
  touch-action:pan-y pinch-zoom;
}
.viewer__img{
  display:block;max-width:100%;max-height:100%;width:auto;height:auto;
  box-shadow:0 30px 90px #000000b3;user-select:none;
  transition:opacity .2s var(--ease-out);
}
.viewer__img.is-loading{opacity:.3}

.viewer__nav{
  position:absolute;top:50%;translate:0 -50%;
  display:grid;place-items:center;width:44px;height:64px;padding:0;
  border:0;background:#ffffff0d;color:var(--ui-text-hi);cursor:pointer;
  transition:background-color .15s,color .15s;
}
.viewer__nav svg{width:18px;height:18px;display:block}
.viewer__nav--prev{left:clamp(8px,1.4vw,22px)}
.viewer__nav--next{right:clamp(8px,1.4vw,22px)}
.viewer__nav:focus-visible{outline:2px solid var(--ui-current);outline-offset:2px}
.viewer.is-single .viewer__nav{display:none}

@media(hover:hover) and (pointer:fine){
  .viewer__get:hover{background:var(--ui-current);color:#120e09;border-color:transparent}
  .viewer__get--all:hover{background:var(--ui-current-hi)}
  .viewer__nav:hover{background:var(--ui-ink)}
}
@media(max-width:720px){
  .viewer__stage{padding:0 0 64px}
  .viewer__nav{top:auto;bottom:10px;translate:none;height:44px}
  .viewer__get{padding:10px 11px}
}
@media(prefers-reduced-motion:reduce){
  .viewer,.viewer__img{transition:opacity .16s var(--ease-out),display .16s allow-discrete,overlay .16s allow-discrete}
}

/* Chucky, on the press kit. He takes the third column of the fact grid and
   floats down it as the page scrolls on: sticky to the place he stands when
   page two snaps (--chucky-top, from js/press.js; level with the
   Description label), so he holds still there, and released where the key
   features end, since a sticky box never leaves its grid cell, so he never
   sits over the downloads. Below the breakpoint there is no gutter to stand
   in, so he steps out. */
.press__chucky{display:none}
@media(min-width:1200px){
  .press__cols{grid-template-columns:clamp(208px,21vw,284px) minmax(0,1fr) clamp(112px,9vw,152px)}
  .press__chucky{
    display:block;grid-column:3;grid-row:1;
    position:sticky;top:var(--chucky-top,var(--press-pad));
    align-self:start;justify-self:end;
    width:100%;height:auto;pointer-events:none;user-select:none;
    filter:saturate(.82) contrast(1.02) brightness(.92) drop-shadow(0 26px 34px #00000073);
  }
}
@media(min-width:1200px) and (prefers-reduced-motion:no-preference){
  .press__chucky{animation:chucky-idle 6s ease-in-out infinite}
}