/* Squeeze Carousel (see carousel-squeeze.js). Widths come from container-query units, so the row sizes itself to
   the column it is dropped into, not to the window. */
.sq{
  /* Colors: the button, the arrows and the focus ring. Override on the element or a parent. */
  --sq-accent:var(--sq-accent-color,#FB8322);
  --sq-accent-foreground:var(--sq-accent-on,#030303);
  --sq-fill:var(--sq-accent);--sq-on-fill:var(--sq-accent-foreground);
  display:flex;flex-direction:column;width:100%;container-type:inline-size;margin:22px 0;
}

/* Without JavaScript: a plain list of pictures and sentences. */
.sq:not(.is-ready) ol{list-style:none;margin:0;padding:0;display:grid;gap:22px;}
.sq:not(.is-ready) li{display:grid;gap:8px;}
.sq:not(.is-ready) .sq-title{font-weight:700;}
.sq:not(.is-ready) .sq-ey{font-family:var(--mono,'Space Mono'),monospace;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;}
.sq:not(.is-ready) li img{display:block;width:100%;height:auto;}

.sq-controls{display:flex;justify-content:flex-end;gap:8px;margin-bottom:16px;}
.sq-arrow{
  display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:6px;cursor:pointer;
  background:var(--sq-fill);color:var(--sq-on-fill);transition:opacity .2s;
}
.sq-arrow:hover{opacity:.85;}
.sq-arrow:focus-visible,.sq-action:focus-visible,.sq-card:focus-visible{outline:2px solid var(--sq-fill);outline-offset:2px;}

.sq-view{width:100%;overflow:hidden;height:var(--sq-h);}
.sq-strip{display:flex;height:100%;width:max-content;}
.sq-card{
  position:relative;isolation:isolate;flex:0 0 auto;height:100%;padding:0;border:0;overflow:hidden;cursor:pointer;
  background:#D8D2C0;transition-property:width,margin-left;transition-timing-function:var(--sq-ease);
}
/* Drawn at a fixed 16:9 block and centred, never at the width of its card, so a picture keeps one scale however
   narrow the card gets: the card only changes how much of it you can see. */
.sq-pic{
  position:absolute;top:0;bottom:0;left:50%;height:100%;width:var(--sq-hero);min-width:100%;max-width:none;
  object-fit:cover;transform:translateX(-50%);
}
.sq-overlay{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;padding:56px 16px 14px;pointer-events:none;
  background-image:linear-gradient(to top,rgba(0,0,0,.55),transparent);color:#fff;
  font-family:var(--mono,'Space Mono'),monospace;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  transition-property:opacity;transition-timing-function:var(--sq-ease);
}

.sq-panel{display:grid;margin-top:22px;}
.sq-text{
  grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:16px;
  transition:opacity var(--sq-ms) var(--sq-ease),visibility var(--sq-ms);
}
.sq-copy{
  margin:0;max-width:46rem;font-family:var(--body-serif,Georgia,serif);font-size:17px;line-height:1.55;text-wrap:balance;
}
.sq-eyebrow{margin:0 0 8px;font-family:var(--mono,'Space Mono'),monospace;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember-ink,#C0331A);}
.sq-body{min-width:0;}
.sq-t{color:var(--ink,#030303);font-weight:600;}
.sq-d{color:rgba(3,3,3,.6);}
.sq-action{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;flex:0 0 auto;cursor:pointer;border:0;border-radius:6px;
  padding:10px 16px;background:var(--sq-fill);color:var(--sq-on-fill);text-decoration:none;
  font-family:var(--display-heavy,'Archivo Black'),sans-serif;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  transition:opacity .2s;
}
.sq-action:hover{opacity:.85;}
.sq-action svg{transition:transform .2s;}
.sq-action:hover svg{transform:translateX(2px);}

@container (min-width:36rem){
  .sq-panel{margin-top:26px;}
  .sq-text{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:40px;}
}
@container (max-width:30rem){
  .sq-copy{font-size:15px;}
}
@media (prefers-reduced-motion:reduce){
  .sq-card,.sq-strip,.sq-text,.sq-overlay{transition:none !important;}
}