/* ============================================================
   /work/: the listing

   One card, three sizes. The feature, the pair and the tiles are the same
   object with a different span, which is what lets work.js re-shape the
   list after a filter without touching the markup.
   ============================================================ */

.ap-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------- hero ---------- */
/* the header is fixed, so the page has to start below it */
.ap-work-hero{padding:clamp(112px,15vh,170px) 0 clamp(34px,5vh,56px)}
.ap-work-hero .ap-display{
  font-size:clamp(36px,6vw,86px); line-height:.97; margin-top:16px; max-width:16ch;
}
.ap-work-hero .ap-lead{margin:22px 0 0; max-width:56ch}

/* ---------- filters ---------- */
.ap-work-list{padding-bottom:clamp(70px,10vh,120px)}
.ap-work-filters{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px 24px; flex-wrap:wrap; margin-bottom:clamp(24px,4vh,38px);
}
.ap-work-pills{display:flex; gap:10px; flex-wrap:wrap}
.ap-work-pill{
  padding:10px 20px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:rgba(12,14,19,.6);
  font-family:inherit; font-size:13.5px; font-weight:400; letter-spacing:.02em;
  color:var(--muted);
  transition:color .25s ease, border-color .25s ease, background .25s ease;
}
.ap-work-pill:hover{color:var(--paper); border-color:rgba(255,90,20,.45)}
.ap-work-pill.is-on{background:var(--orange); border-color:var(--orange); color:#120c07; font-weight:500}

.ap-work-tools{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.ap-work-select{position:relative; display:inline-flex; align-items:center}
.ap-work-select select{
  appearance:none; -webkit-appearance:none;
  padding:11px 42px 11px 18px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:rgba(12,14,19,.6); color:var(--paper);
  font-family:inherit; font-size:13.5px;
  transition:border-color .25s ease;
}
.ap-work-select select:hover{border-color:rgba(255,90,20,.45)}
.ap-work-select select:focus-visible{outline:2px solid var(--orange); outline-offset:2px}
.ap-work-select option{background:#0c0e13; color:var(--paper)}
.ap-work-select i{
  position:absolute; right:16px; display:inline-flex; font-size:10px;
  color:var(--muted); pointer-events:none;
}
.ap-work-count{
  margin:0; font-family:'Space Mono',monospace; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* ---------- the feature ----------
   Above the filters and outside them: it is the one piece of work we are
   choosing to put in front of everyone, so a filter has no business
   hiding it. Copy over the artwork, figures along the foot. */
.ap-work-feat-wrap{padding-bottom:clamp(38px,6vh,66px)}
.ap-work-feat{
  position:relative; overflow:hidden; border-radius:20px;
  border:1px solid var(--line); background:#07080c;
  min-height:clamp(380px,46vw,560px);
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:border-color .35s ease;
}
/* the whole box is the link, so it behaves like one: one cursor, one
   hover, one focus ring around the card rather than around the button */
a.ap-work-feat{display:flex; text-decoration:none; color:inherit; cursor:pointer}
a.ap-work-feat:focus-visible{outline:2px solid var(--orange); outline-offset:4px}
.ap-work-feat:hover{border-color:rgba(255,90,20,.42)}
a.ap-work-feat:hover .ap-btn{background:var(--orange); border-color:var(--orange); color:#120c07}
a.ap-work-feat:hover .ap-btn span{color:#120c07}
.ap-work-feat-media{position:absolute; inset:0; display:block; overflow:hidden}
.ap-work-feat-media img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
  transition:scale .7s cubic-bezier(.2,.7,.3,1);
}
.ap-work-feat:hover .ap-work-feat-media img{scale:1.03}
/* one scrim across the foot and a softer one from the left, so the copy
   holds on artwork we do not control */
.ap-work-feat-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(3,3,5,.35) 0%,rgba(3,3,5,.1) 34%,rgba(3,3,5,.86) 78%,rgba(3,3,5,.96) 100%),
    linear-gradient(90deg,rgba(3,3,5,.86) 0%,rgba(3,3,5,.3) 48%,transparent 72%);
}
.ap-work-feat-body{
  position:relative; z-index:2; max-width:min(620px,86%);
  padding:clamp(26px,3.4vw,44px) clamp(22px,3vw,44px) clamp(18px,2.4vw,28px);
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
}
/* the pill glows rather than sitting flat: it is a label the eye should
   find first, and a flat chip on busy artwork does not get found */
.ap-work-flag{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px 7px 13px; border-radius:999px;
  background:linear-gradient(180deg,#ff7a3d,var(--orange));
  color:#140802; font-family:'Space Mono',monospace; font-size:10.5px;
  font-weight:700; letter-spacing:.18em;
  box-shadow:0 0 0 1px rgba(255,160,110,.55) inset, 0 0 26px 2px rgba(255,90,20,.55), 0 10px 30px -12px rgba(255,90,20,.9);
}
.ap-work-flag i{
  width:7px; height:7px; border-radius:50%; background:#140802;
  box-shadow:0 0 0 3px rgba(20,8,2,.22);
}
.ap-work-feat-name{
  margin:6px 0 0; font-family:'Anton',sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.01em; line-height:.98;
  font-size:clamp(34px,4.6vw,66px); color:var(--paper);
}
.ap-work-feat-meta{
  margin:0; font-family:'Space Mono',monospace; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.ap-work-feat-lead{
  margin:6px 0 0; font-size:clamp(15px,1.2vw,17.5px); font-weight:300;
  line-height:1.6; color:rgba(238,240,246,.82); max-width:52ch; text-wrap:pretty;
}
.ap-work-feat-body .ap-btn{margin-top:14px; text-transform:uppercase}  /* same as every other button */

.ap-work-feat-stats{
  position:relative; z-index:2; display:flex; flex-wrap:wrap;
  gap:1px; background:var(--line);
  border-top:1px solid var(--line);
}
.ap-work-feat-stat{
  flex:1 1 180px; padding:20px clamp(22px,3vw,44px);
  background:rgba(6,7,10,.82);
}
.ap-work-feat-stat b{
  display:block; font-family:'Anton',sans-serif; font-weight:400;
  font-size:clamp(28px,3.2vw,44px); line-height:1; color:var(--orange);
  font-variant-numeric:tabular-nums;
}
.ap-work-feat-stat span{
  display:block; margin-top:7px; font-family:'Space Mono',monospace;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

/* ---------- the grid ----------
   Six columns, and each size spans a share: the pair three each, the tiles
   two. One grid, so the rows always close. The card itself lives in
   global.css: three pages use it now. */
/* align-items is left to stretch on purpose: every card in a row is as
   tall as the tallest one in it, however much copy it carries. */
.ap-work-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:22px}
.ap-work-card--pair{grid-column:span 3}
.ap-work-card--tile{grid-column:span 2}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .ap-work-grid{grid-template-columns:repeat(4,1fr)}
  .ap-work-card--pair,.ap-work-card--tile{grid-column:span 2}
  .ap-work-card--pair .ap-work-media{aspect-ratio:16/10}
  .ap-work-feat-body{max-width:none}
  /* From here down the copy runs the full width of the card, but the desktop
     scrim only darkens the left half, because that is where the copy sits on a
     wide screen. On a phone the lead ran straight over the lit facade of the
     building and measured 1.7:1. The scrim follows the copy instead: a
     vertical one that is already heavy where the text starts. */
  .ap-work-feat-media::after{
    background:linear-gradient(180deg,
      rgba(3,3,5,.5) 0%, rgba(3,3,5,.74) 26%, rgba(3,3,5,.88) 52%, rgba(3,3,5,.96) 100%);
  }
}
@media (max-width:640px){
  .ap-work-grid{grid-template-columns:1fr; gap:16px}
  .ap-work-card--pair,.ap-work-card--tile{grid-column:span 1}
  .ap-work-filters{align-items:flex-start}
  .ap-work-tools{width:100%; justify-content:space-between}
  .ap-work-feat{min-height:0}
  .ap-work-feat-stat{flex:1 1 100%; padding:16px 22px}
}
@media (prefers-reduced-motion:reduce){
  .ap-work-card,.ap-work-media img,.ap-work-feat-media img{transition:none}
}