/* ============================================================
   OUR WORK   the archive, on its own route.

   This file is only ever loaded by /our-work. Everything it needs from the
   rest of the site, the tokens, the nav, the cursor, the player, comes from
   styles.css, which loads first. Nothing here reaches back into the home
   page: a rule that changed anything shared would change the home page too,
   and the whole point of a second route is that it cannot.
   ============================================================ */

.ow-body{
  position:relative;
  background:var(--paper);
  /* the page's own ramp: clean at the top, a shade warmer through the
     middle where the light sits, and calm again by the foot. It is on the
     body rather than on the sections so it reads as one atmosphere the page
     passes through instead of as three backgrounds meeting. */
  background-image:linear-gradient(180deg,
    #FDF8EC 0%,
    #FCF5E2 14%,
    #FAF0DC 38%,
    #FBF2DF 62%,
    #FCF5E2 82%,
    #FBF3E0 100%);
}

/* ---------- the light ----------

   Six soft ellipses placed down the page rather than three circles behind
   the content. Closest-side stops and long tails, so each one has no edge
   anywhere: what makes this read as diffused light and not as a gradient
   blob is that none of them is ever fully opaque and no two peak in the same
   place. No filter: a blur over a layer this size is a raster of the whole
   document, and the softness is already in the stops.

   The layer leans a few pixels toward the pointer, which the script writes
   as two numbers. That is the whole of the cursor response. */
.ow-air{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(62% 26% at 78% 4%,  rgba(255,169,70,.20), rgba(255,169,70,0) 72%),
    radial-gradient(48% 20% at 12% 12%, rgba(255,140,90,.13), rgba(255,140,90,0) 74%),
    radial-gradient(70% 22% at 22% 34%, rgba(255,81,0,.10),   rgba(255,81,0,0) 76%),
    radial-gradient(58% 18% at 88% 46%, rgba(255,190,150,.20),rgba(255,190,150,0) 74%),
    radial-gradient(74% 20% at 40% 68%, rgba(255,169,70,.11), rgba(255,169,70,0) 78%),
    radial-gradient(64% 22% at 80% 88%, rgba(255,140,90,.10), rgba(255,140,90,0) 76%);
  transform:translate3d(calc(var(--owx,0) * 1px), calc(var(--owy,0) * 1px), 0);
  transition:transform .9s var(--ease);
  will-change:transform;
}

/* ---------- the grid ----------

   Felt rather than seen: one pixel at four percent, on a 68px module, and
   masked so it is strongest through the middle of the page and gone by the
   foot. It comes and goes down the page rather than running edge to edge the
   whole way, which is what keeps it from reading as graph paper. */
.ow-rule{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(26,26,26,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,26,26,.045) 1px, transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:linear-gradient(180deg,
    rgba(0,0,0,.55) 0%, rgba(0,0,0,.95) 12%, rgba(0,0,0,.5) 30%,
    rgba(0,0,0,.85) 46%, rgba(0,0,0,.35) 66%, rgba(0,0,0,.6) 80%,
    rgba(0,0,0,0) 97%);
          mask-image:linear-gradient(180deg,
    rgba(0,0,0,.55) 0%, rgba(0,0,0,.95) 12%, rgba(0,0,0,.5) 30%,
    rgba(0,0,0,.85) 46%, rgba(0,0,0,.35) 66%, rgba(0,0,0,.6) 80%,
    rgba(0,0,0,0) 97%);
}
@media (prefers-reduced-motion:reduce){ .ow-air{transition:none;transform:none} }

/* everything the reader actually looks at sits over both */
.ow-top,.ow-filters,.ow-main,.ow-end{position:relative;z-index:1}
.ow-wrap{max-width:var(--maxw-wide)}

/* ---------- the masthead ---------- */
.ow-top{padding-top:calc(112px + env(safe-area-inset-top,0px));padding-bottom:clamp(26px,3.4vw,52px)}
.ow-back{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-45);padding:8px 0;margin-bottom:clamp(30px,5vw,64px);
  transition:color .25s ease;
}
.ow-back svg{width:14px;height:14px;display:block;transition:transform .25s var(--ease)}
.ow-back:hover{color:var(--orange)}
.ow-back:hover svg{transform:translateX(-3px)}

.ow-kicker{
  margin:0 0 clamp(14px,1.6vw,22px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-45);
}
.ow-kicker i{font-style:normal;color:var(--orange);margin:0 7px}

/* The one piece of type on the page that is allowed to be loud. Sans, not
   the serif: the serif is the home page's voice for a sentence, and this is
   a title on a cover. */
.ow-h{
  margin:0;font-family:var(--sans);font-weight:800;
  font-size:clamp(58px,11.2vw,168px);line-height:.88;letter-spacing:-.04em;
  color:var(--ink);
}
.ow-h span{display:block}
.ow-h em{font-style:normal;color:var(--orange)}
.ow-lede{
  margin:clamp(20px,2.4vw,34px) 0 0;max-width:38ch;
  font-size:clamp(16px,1.15vw,19px);line-height:1.6;color:var(--ink-70);
}
.ow-count{
  margin:clamp(16px,1.8vw,24px) 0 0;
  display:flex;align-items:baseline;gap:9px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-45);
}
.ow-count b{font-weight:500;font-size:14px;color:var(--orange);font-variant-numeric:tabular-nums}

/* ---------- the filters ----------

   They follow the page down and stay reachable, because an archive is a
   thing you keep re-cutting rather than read once. The bar is its own
   surface so the cards passing behind it never show through the labels. */
.ow-filters{
  position:sticky;top:0;z-index:6;
  padding-block:clamp(12px,1.4vw,18px);
  background:linear-gradient(180deg, rgba(252,245,226,.94) 0%, rgba(252,245,226,.86) 70%, rgba(252,245,226,0) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
}
.ow-formats{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ow-fmt{
  appearance:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 17px;border-radius:var(--pill);
  font-family:var(--sans);font-size:13.5px;font-weight:500;letter-spacing:-.005em;
  color:var(--ink);background:rgba(255,255,255,.5);
  box-shadow:inset 0 0 0 1px rgba(26,26,26,.1);
  transition:background .22s ease, box-shadow .22s ease, color .22s ease, transform .22s var(--ease);
}
.ow-fmt i{
  font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:var(--ink-45);transition:color .22s ease;
  font-variant-numeric:tabular-nums;
}
.ow-fmt:hover{background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px rgba(26,26,26,.18)}
.ow-fmt.is-on{
  color:#fff;background:linear-gradient(150deg,#FF7A2E 0%,#FF5100 100%);
  box-shadow:inset 0 0 0 1px rgba(255,81,0,.2), 0 6px 16px rgba(255,81,0,.2);
}
.ow-fmt.is-on i{color:rgba(255,255,255,.72)}
.ow-fmt:active{transform:scale(.97);transition-duration:.1s}

.ow-cats-row{display:flex;align-items:center;gap:14px;margin-top:clamp(10px,1.1vw,14px);min-width:0}
.ow-cats-k{
  margin:0;flex:none;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-45);
}
/* a phone runs out of width long before the categories do, so they scroll
   sideways rather than stacking into four lines of buttons */
.ow-cats-clip{min-width:0;flex:1 1 auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.ow-cats-clip::-webkit-scrollbar{display:none}
.ow-cats{display:flex;gap:7px;padding-block:3px;width:max-content}
.ow-cat{
  appearance:none;border:0;cursor:pointer;white-space:nowrap;
  padding:7px 13px;border-radius:var(--pill);
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-70);background:none;
  box-shadow:inset 0 0 0 1px rgba(26,26,26,.1);
  transition:background .2s ease, box-shadow .2s ease, color .2s ease;
}
.ow-cat:hover{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(26,26,26,.24)}
.ow-cat.is-on{color:var(--orange);background:rgba(255,81,0,.07);box-shadow:inset 0 0 0 1px rgba(255,81,0,.4)}
.ow-cat[disabled]{opacity:.32;cursor:default;box-shadow:inset 0 0 0 1px rgba(26,26,26,.07)}
.ow-cat[disabled]:hover{color:var(--ink-70)}

/* ---------- the gallery ----------

   Twelve columns with a dense flow, and each card takes the number of them
   its shape needs: a portrait three, a landscape six. Items start at the top
   of their row rather than stretching, so a tall card next to a wide one
   staggers instead of pulling the wide one out of its proportion. That
   stagger is the composition, and it is why this is not a wall of equal
   rectangles. */
.ow-main{padding-top:clamp(22px,2.6vw,38px);padding-bottom:clamp(60px,8vw,120px);min-height:52svh}
.ow-grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(14px,1.5vw,26px);
  grid-auto-flow:dense;align-items:start;
}
.ow-card{
  position:relative;min-width:0;
  display:flex;flex-direction:column;gap:11px;
  border:0;padding:0;background:none;text-align:left;cursor:pointer;
  font:inherit;color:inherit;
  transition:transform .3s var(--ease);
}
.ow-card--portrait{grid-column:span 3}
.ow-card--landscape{grid-column:span 6}

/* the frame. The class is the one the player's flight looks for, which is
   why the stage grows out of the card here exactly as it does on the home
   page and nothing about the player had to learn a second layout. */
.ow-card .rmq-media{
  position:relative;width:100%;overflow:hidden;
  border-radius:var(--r);background:var(--sand-2);
  box-shadow:var(--shadow-soft);
  transition:box-shadow .3s var(--ease);
}
.ow-card--portrait .rmq-media{aspect-ratio:9/16}
.ow-card--landscape .rmq-media{aspect-ratio:16/9}
.ow-card .rmq-media video,
.ow-card .rmq-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.ow-card .rmq-media.is-ready video,
.ow-card .rmq-media.is-ready img{opacity:1}
@media (hover:hover){
  .ow-card:hover .rmq-media{box-shadow:var(--shadow-lift)}
  .ow-card:hover .rmq-media video,
  .ow-card:hover .rmq-media img{transform:scale(1.025)}
}
.ow-card:focus-visible{outline:none}
.ow-card:focus-visible .rmq-media{box-shadow:0 0 0 2px var(--orange), var(--shadow-lift)}

/* the slot a piece waiting for its file shows as, in the page's own language
   rather than as a broken image */
.ow-slot{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:5px;
  text-align:center;padding:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-45);
  background:linear-gradient(150deg, rgba(255,255,255,.4), rgba(234,225,201,.5));
}
.ow-slot b{font-weight:500;color:var(--ink-70);letter-spacing:.14em}

/* the play mark, quiet until a pointer is on the card */
.ow-play{
  position:absolute;right:11px;bottom:11px;
  width:34px;height:34px;display:grid;place-items:center;
  border-radius:var(--pill);color:#fff;
  background:rgba(20,18,14,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  opacity:.82;transform:scale(.94);
  transition:opacity .25s var(--ease), transform .25s var(--ease), background .25s ease;
}
.ow-play svg{width:13px;height:13px;display:block;fill:currentColor}
@media (hover:hover){
  .ow-card .ow-play{opacity:0}
  .ow-card:hover .ow-play{opacity:1;transform:scale(1);background:var(--orange)}
}

/* the metadata. Under the picture rather than over it, because the picture
   is the work and a label across it is a caption arguing with its subject. */
.ow-meta{display:flex;flex-direction:column;gap:3px;padding-inline:2px}
.ow-t{
  margin:0;font-size:14.5px;font-weight:500;line-height:1.35;color:var(--ink);
  transition:color .22s ease;
}
.ow-sub{
  margin:0;display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-45);
}
.ow-sub s{text-decoration:none;opacity:.4}
@media (hover:hover){ .ow-card:hover .ow-t{color:var(--orange)} }

/* ---------- the handover between two sets of results ----------

   The whole grid leaves and the next one arrives, rather than each card
   animating itself: one transition on one element is one composite, and a
   hundred cards each easing their own opacity is a hundred. Out is shorter
   than in, and the two never overlap, so there is no frame with both sets of
   results readable on it. */
.ow-grid{
  transition:opacity .16s var(--ease), transform .16s var(--ease), filter .16s var(--ease);
}
.ow-grid.is-out{opacity:0;transform:translateY(-6px);filter:blur(5px)}
.ow-grid.is-in{
  opacity:1;transform:none;filter:blur(0px);
  transition:opacity .24s var(--ease), transform .24s var(--ease), filter .24s var(--ease);
}
.ow-grid.is-set{filter:none;transition:none}
@media (prefers-reduced-motion:reduce){
  .ow-grid,.ow-grid.is-out,.ow-grid.is-in{transition:opacity .12s linear;transform:none;filter:none}
}

/* ---------- nothing here ---------- */
.ow-empty{
  padding:clamp(52px,9vw,110px) 0;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.ow-empty-t{margin:0;font-family:var(--serif);font-size:clamp(26px,3.2vw,40px);line-height:1.15;color:var(--ink)}
.ow-empty-s{margin:0;font-size:15px;color:var(--ink-70);max-width:34ch}
.ow-empty-b{
  margin-top:10px;appearance:none;border:0;cursor:pointer;
  padding:11px 19px;border-radius:var(--pill);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:linear-gradient(150deg,#FF7A2E 0%,#FF5100 100%);
  box-shadow:0 6px 18px rgba(255,81,0,.24);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.ow-empty-b i{font-style:normal;margin-left:6px}
.ow-empty-b:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,81,0,.32)}

/* ---------- the end of the reel ----------
   A title card, not a footer. */
.ow-end{padding-block:clamp(70px,11vw,170px) clamp(60px,9vw,130px)}
.ow-end-h{
  margin:0;font-family:var(--sans);font-weight:800;
  font-size:clamp(50px,10vw,150px);line-height:.9;letter-spacing:-.04em;color:var(--ink);
}
.ow-end-h span{display:block}
.ow-end-h span:last-child{color:var(--ink-45)}
.ow-end-h em{font-style:normal;color:var(--orange)}
.ow-end-s{margin:clamp(22px,2.6vw,36px) 0 0;font-size:clamp(16px,1.2vw,19px);color:var(--ink-70)}
.ow-end-row{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);flex-wrap:wrap;margin-top:clamp(18px,2vw,26px)}
.ow-end-cta{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  padding:14px 24px;border-radius:var(--pill);
  font-size:15px;font-weight:500;color:#fff;
  background:linear-gradient(150deg,#FF7A2E 0%,#FF5100 100%);
  box-shadow:0 8px 22px rgba(255,81,0,.24);
  transition:transform .24s var(--ease), box-shadow .24s var(--ease);
}
.ow-end-cta i{font-style:normal;transition:transform .24s var(--ease)}
.ow-end-cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,81,0,.32)}
.ow-end-cta:hover i{transform:translate(2px,-2px)}
.ow-end-quiet{
  text-decoration:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-45);transition:color .24s ease;
}
.ow-end-quiet:hover{color:var(--ink)}

/* Arriving and leaving is in styles.css, because both pages do both halves
   of it and a copy here would be a second one to keep in step. */

/* ---------- the phone ----------
   Designed rather than shrunk: the archive is a different shape at this
   width, so the grid gives a portrait half the row and a landscape all of
   it, and the filters stay where a thumb can reach them. */
@media (max-width:1100px){
  .ow-card--portrait{grid-column:span 4}
  .ow-card--landscape{grid-column:span 6}
}
@media (max-width:860px){
  .ow-card--portrait{grid-column:span 6}
  .ow-card--landscape{grid-column:span 12}
  .ow-top{padding-top:calc(92px + env(safe-area-inset-top,0px))}
  .ow-h{font-size:clamp(52px,15vw,96px)}
  .ow-end-h{font-size:clamp(46px,13.5vw,90px)}
}
@media (max-width:560px){
  .ow-grid{gap:16px}
  .ow-card--portrait{grid-column:span 6}
  .ow-card--landscape{grid-column:span 12}
  .ow-back{margin-bottom:22px}
  .ow-lede{font-size:15.5px}
  .ow-filters{padding-block:10px}
  /* a thumb, not a cursor: both rows are given the height a tap wants
     rather than the height the label needs */
  .ow-fmt{padding:12px 15px;font-size:13px}
  .ow-cat{padding:10px 13px}
  .ow-cats-row{gap:10px}
  .ow-cats-k{display:none}
  .ow-t{font-size:13.5px}
  .ow-sub{font-size:9px;letter-spacing:.09em}
  .ow-rule{background-size:44px 44px}
  .ow-end-row{gap:14px}
  .ow-end-cta{width:100%;justify-content:center}
}
/* one portrait card a row is too big and two is right, but below this the
   two are too narrow to read the titles under */
@media (max-width:360px){
  .ow-card--portrait{grid-column:span 12}
}