/* ═══════════════════════════════════════════════════════════════════
   Arcos Design Firm — projects page

   The whole page is two things: a title set as large as the page will
   carry, and a wall of plates under it. One plate per project. There is
   no summary text on a plate, no index, no timeline — a project says
   what it has to say on its own page, and this page's only job is to
   make you want to open one.

   Everything a plate needs sits inside a single <a>, so the target is
   the picture rather than a small link beside it. The scrim, the name
   and the cue are all painted on top of the image, which means they
   keep the light-on-dark tokens (--on-media*) even though the page
   around them is paper.
   ═══════════════════════════════════════════════════════════════════ */

/* No top padding: the title card below is a full screen and carries its
   own clearance under the fixed bar. Adding the section's old top pad
   on top of that would push the sentence off its own screen. */
.wk{
  padding: 0 var(--gut) clamp(5rem, 14vh, 10rem);
  max-width: 108rem;
  margin-inline: auto;
}

/* ── the head ──────────────────────────────────────────────────────
   A page title, at the size this site sets page titles. The sentence
   is the change here, not the scale.
   ───────────────────────────────────────────────────────────────── */
.wk__head{
  padding-top: calc(var(--navh) + clamp(3rem, 9vh, 7rem));
  margin-bottom: clamp(3rem, 8vh, 6rem);
  max-width: 52rem;
}

/* In family with the other page titles: services sets 4rem, about 4.4,
   the about statement 5. This is a three-line sentence rather than a
   single word, so it sits at the lower end of that band and lets the
   line count carry the weight instead of the point size.

   An earlier pass ran this at 9.8vw — around 144px — fitted so the
   longest line touched both gutters. It read as a different website.
   The type on this site is restrained everywhere else, and one screen
   shouting does not make the rest louder, it just makes that screen
   look borrowed. */
.wk__title{
  font-family: var(--display-hi);
  font-weight: 400;
  font-size:var(--fs-display);
  line-height: 1.06;
  letter-spacing: .018em;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: clamp(1rem, 2.6vh, 1.6rem);
}

/* Each phrase on its own line — and each one is transformed
   independently by js/drift.js, which is the other reason these are
   three spans rather than one string with <br>s in it: a line break
   cannot be given a transform. */
.wk__title span{
  display: block;
  will-change: transform;
}

/* The script face, which everywhere else on this site marks an aside in
   the practice's own voice — a remark under the title, not a second
   title, so it stays small. */
.wk__sub{
  font-family: var(--script);
  /* Sized up about a quarter from the Nothing You Could Do setting.
     Alex Brush draws small on its em — a low x-height under tall
     ascenders — so the same font-size reads noticeably lighter than
     the hand it replaced. This holds the optical size the layout was
     built around. */
  font-size:var(--fs-sub);
  font-weight: 400;
  line-height: 1.4;
  color: var(--olive-hi);
}

/* ── the wall ──────────────────────────────────────────────────────
   Two columns from the tablet up. A single project would sit in the
   left cell and leave a hole beside it, so while there is only one it
   spans both columns and holds itself to a plate-sized measure in the
   middle. The moment a second project is added the rule stops applying
   and the grid behaves normally — nothing to remember to undo.
   ───────────────────────────────────────────────────────────────── */
/* Held well inside the page and centred, rather than run to the full
   108rem. Two square plates across that container came out around 850px
   on a side — a single project filling most of a screen, which made the
   page a slideshow you scroll rather than a wall you scan. At 68rem the
   pair sits near 520px each, small enough that two rows of four read as
   one group and large enough that the room in each is still legible.

   The cap goes on the grid, not on the section, so the title above and
   the footer below keep the page's own margins and only the plates pull
   in. */
.wk__grid{
  list-style: none;
  display: grid;
  gap: clamp(1.25rem, 2.6vw, 2rem);
  max-width: 68rem;
  margin-inline: auto;
}

@media (min-width: 62rem){
  .wk__grid{ grid-template-columns: repeat(2, 1fr) }
}

.wk__cell:only-child{
  grid-column: 1 / -1;
  max-width: 44rem;
  margin-inline: auto;
  width: 100%;
}

/* ── a plate ───────────────────────────────────────────────────────
   The picture is square because the photographs are, and cropping a
   render to a fashionable ratio throws away ceiling and floor — which
   in an interior is most of the work.
   ───────────────────────────────────────────────────────────────── */
.wk__tile{
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--on-media);
  overflow: hidden;
  isolation: isolate;
  background: #101012;
}

.wk__media{
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.wk__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);      /* seals the edge against the scale below */
  transition: transform 1.1s var(--ease-out);
}

/* Weighted to the middle, where the name sits, and lifted at the very
   bottom so the cue has something to stand on. A flat 50% wash over the
   whole plate would have killed the picture to hold two lines of type.

   It is off until you point at the plate. The whole argument of this
   page is the photograph, and a photograph permanently under a scrim so
   that a label can sit on it is a photograph you have already decided
   not to show. See the hover block below for the rest. */
.wk__scrim{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 82% at 50% 56%,
      rgba(12,12,14,.52) 0%,
      rgba(12,12,14,.28) 46%,
      rgba(12,12,14,.06) 78%),
    linear-gradient(to top,
      rgba(12,12,14,.46) 0%,
      rgba(12,12,14,0) 34%);
  transition: opacity .6s var(--ease-out);
}

/* ── the name and the way in ──────────────────────────────────────── */
.wk__over{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vh, 2rem);
  padding: var(--gut);
  text-align: center;
  pointer-events: none;          /* the <a> underneath takes every click */
}

/* Capitals, widely tracked, in the high-contrast cut — the same voice
   the title above uses, at the size a plate can carry. text-wrap:balance
   keeps a two-word name from breaking one-and-one. */
/* Sized to the plate it sits on, not to the viewport. The plates came
   in to 520px; at the old 4.25rem "Gurugram Residence" broke across
   three lines inside one. */
.wk__name{
  font-family: var(--display-hi);
  font-weight: 400;
  font-size:var(--fs-head);
  line-height: 1.06;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-wrap: balance;
  /* Playfair ships oldstyle figures by default, which sit below the cap
     line — "101 Villa" set beside capitals read as a footnote next to
     its own name. Lining figures put the digits at cap height, where a
     house number belongs. */
  font-variant-numeric: lining-nums;
  color: var(--on-media);
  text-shadow: 0 .04em .5em rgba(12,12,14,.4);
}

.wk__cue{
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--sans);
  font-size:var(--fs-fine);
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--on-media);
}

.wk__cue-a{
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: square;
  transition: transform .5s var(--ease-out);
}

/* The rule under the words is drawn rather than underlined so it can be
   swept in from the left on hover. */
.wk__cue-t{
  position: relative;
  padding-bottom: .5em;
}
.wk__cue-t::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}

/* ── on hover ─────────────────────────────────────────────────────── */
/* The base state above is the one a touch screen gets: name and scrim
   permanently on, because a finger cannot hover and a plate that will
   not say what it is has no way of ever saying it.

   A pointer is a different reader. There the plate rests as the
   photograph alone — no wash, nothing written across it — and the scrim,
   the name and the cue come up together the moment the cursor lands. The
   name is what you came for; the picture is why you would want it.

   Hidden by opacity rather than by visibility or display, so the name
   stays in the accessibility tree the whole time. .wk__tile is labelled
   by it, and a link whose label vanishes until the mouse arrives is a
   link with no name for anyone not using one. */
@media (hover: hover){
  .wk__scrim,
  .wk__over{
    opacity: 0;
    transition: opacity .55s var(--ease-out);
  }

  /* A short rise under the fade. Enough to read as the words arriving
     rather than the plate flickering, and the cue trails the name so
     the pair lands in the order you read it. */
  .wk__name,
  .wk__cue{
    transform: translateY(14px);
    transition: transform .65s var(--ease-out);
  }
  .wk__cue{ transition-delay: .06s }

  .wk__tile:hover .wk__scrim,
  .wk__tile:focus-visible .wk__scrim,
  .wk__tile:hover .wk__over,
  .wk__tile:focus-visible .wk__over{ opacity: 1 }

  .wk__tile:hover .wk__name,
  .wk__tile:focus-visible .wk__name,
  .wk__tile:hover .wk__cue,
  .wk__tile:focus-visible .wk__cue{ transform: none }

  .wk__tile:hover .wk__img,
  .wk__tile:focus-visible .wk__img{ transform: scale(1.045) }

  .wk__tile:hover .wk__cue-a,
  .wk__tile:focus-visible .wk__cue-a{ transform: translate(.18em, .18em) }

  /* out to the right, back in from the left */
  .wk__tile:hover .wk__cue-t::after,
  .wk__tile:focus-visible .wk__cue-t::after{
    animation: wk-rule .6s var(--ease-out);
  }
}

@keyframes wk-rule{
  0%   { transform: scaleX(1);   transform-origin: right }
  49%  { transform: scaleX(0);   transform-origin: right }
  50%  { transform: scaleX(0);   transform-origin: left  }
  100% { transform: scaleX(1);   transform-origin: left  }
}

.wk__tile:focus-visible{
  outline: 2px solid var(--bronze-hi);
  outline-offset: 4px;
}

/* ── the line under a plate ───────────────────────────────────────── */
/* Kind and place, on paper rather than on the picture. It is the one
   thing about a project you might want to read without opening it. */
.wk__meta{
  margin-top: 1rem;
  font-family: var(--sans);
  font-size:var(--fs-fine);
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

/* ── arriving ─────────────────────────────────────────────────────── */
/* js/projects-page.js sets [data-in] on a cell as it comes up the page.
   .no-js unshuts them, the way every other reveal on this site does, so
   the plates are simply there when the script never runs. */
.wk__cell{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.wk__cell[data-in]{
  opacity: 1;
  transform: none;
}
.no-js .wk__cell{ opacity: 1; transform: none }

/* The reveal survives here, because a scrim appearing is a change of
   brightness rather than a thing travelling across the screen — it is
   the one part of this page that still works when everything has been
   asked to hold still. What goes is the rise under it, the zoom, and
   the swept rule. */
@media (prefers-reduced-motion: reduce){
  .wk__cell{ opacity: 1; transform: none; transition: none }
  .wk__img,
  .wk__cue-a,
  .wk__cue-t::after{ transition: none }
  @media (hover: hover){
    .wk__name,
    .wk__cue{ transform: none; transition: none }
    .wk__tile:hover .wk__img{ transform: scale(1.001) }
    .wk__tile:hover .wk__cue-t::after{ animation: none }
  }
}

/* A project whose cover has not been shot yet. The plate keeps the same
   square the photographs take, so the grid does not go ragged where a
   picture is missing, and the name still reads over it. The label is
   there so the gap looks like a decision rather than a broken <img>. */
.wk__media--pending{
  background:
    radial-gradient(120% 90% at 50% 0%, #1b1b1f 0%, #101012 62%);
}
.wk__media--pending::after{
  content: "Cover to come";
  position: absolute;
  inset-inline: 0;
  top: 1.25rem;
  font-family: var(--sans);
  font-size:var(--fs-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(245,240,232,.34);
}