/* ═══════════════════════════════════════════════════════════════════
   Services — the scope of work, given its own page.

   The list is the page. Nine lines of type set large enough to be the
   thing you came for, numerals hanging in the margin, and a card of
   photographs that follows the cursor and changes as it crosses from
   one line to the next (js/services.js).

   Everything the card needs is behind a fine-pointer query. On a touch
   screen there is no cursor to follow, so the list is left as a list —
   which is what it is anyway, and complete on its own.
   ═══════════════════════════════════════════════════════════════════ */

/* ── the page ─────────────────────────────────────────────────────── */

.svc{
  --maxw:72rem;
  position:relative;
  padding:calc(var(--navh) + clamp(3rem,9vh,6rem)) var(--gut) clamp(5rem,14vh,9rem);
  min-height:100svh;
}

/* ── the statement ────────────────────────────────────────────────── */

.svc__head{
  max-width:var(--maxw);
  margin:0 auto clamp(2.5rem,7vh,4.5rem);
}
.svc__eyebrow{
  margin:0 0 clamp(.9rem,2vh,1.3rem);
  font-family:var(--sans);
  font-size:var(--fs-micro); font-weight:400;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--bronze-lt);
}
.svc__title{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:var(--fs-display);
  line-height:1.04;
  max-width:16ch;
  color:var(--bone);
}
.svc__title em{ font-style:normal; color:var(--bronze-lt) }

.svc__lede{
  margin:clamp(1.2rem,3vh,1.8rem) 0 0;
  max-width:46ch;                    /* a readable measure, not the full page */
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--bone-dim);
}

/* ── the list ─────────────────────────────────────────────────────── */
/* A contents page, not a stack of cards: a rule between lines and
   nothing else. The photographs carry the weight, so the type does not
   have to. */

.svc__list{
  list-style:none;
  margin:0 auto; padding:0;
  max-width:var(--maxw);
  counter-reset:svc;
  border-top:1px solid var(--hair);
}

.svc__item{
  counter-increment:svc;
  border-bottom:1px solid var(--hair);
}

.svc__row{
  display:flex; align-items:baseline;
  gap:clamp(1rem,2.5vw,2.2rem);
  width:100%;
  padding:clamp(1.05rem,2.6vh,1.9rem) 0;
  /* A button, so it is reachable by keyboard and announced as one. Every
     inherited control style is stripped back to the type. */
  background:none; border:0; border-radius:0;
  font:inherit; color:inherit; text-align:left;
  cursor:pointer;
}

/* Kept, not removed. The one place on this page a keyboard user can see
   where they are. */
.svc__row:focus-visible{
  outline:2px solid var(--bronze-hi);
  outline-offset:6px;
}

.svc__n{
  flex:0 0 auto; width:2.4rem;
  font-family:var(--display);
  font-size:var(--fs-micro); letter-spacing:.18em;
  font-variant-numeric:tabular-nums;   /* nine numerals that do not shuffle */
  color:var(--bronze);
  transition:color .3s var(--ease-out);
}
.svc__n::before{ content:counter(svc,decimal-leading-zero) }

.svc__body{
  flex:1 1 auto;
  display:flex; flex-direction:column;
  gap:.5rem;
}

.svc__name{
  display:block;
  font-family:var(--display);
  font-size:var(--fs-head);
  line-height:1.15;
  color:var(--bone);
}

/* Written once, in the markup, and shown wherever the card that would
   otherwise carry it does not exist — a touch screen, a narrow window,
   a screen reader. Where the card does exist it is hidden below, not
   deleted: the same words, moved. */
.svc__copy{
  display:block;
  max-width:52ch;
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--bone-dim);
}

.svc__meta{
  flex:0 0 auto;
  font-family:var(--sans);
  font-size:var(--fs-fine); letter-spacing:.02em;
  color:var(--bone-dim);
}
@media (max-width:640px){
  .svc__meta{ display:none }          /* the name is the whole point at this width */
  .svc__n{ width:1.9rem }
}

/* ── the card ─────────────────────────────────────────────────────── */
/* Built and driven by js/services.js. Fixed to the viewport and pinned
   to the cursor, so it belongs to no column.

   A photograph and the two or three lines that go with it, in one box.
   The nine are stacked on top of one another at a single fixed size and
   cross-faded, rather than each sizing to its own copy — one that grew
   or shrank as the cursor moved down the list would draw the eye to the
   box changing shape instead of to the work inside it. */

.svc__reveal{
  position:fixed; left:0; top:0;
  z-index:var(--z-fab);
  pointer-events:none;      /* must never intercept the hover it answers */
  will-change:transform;
}
.svc__reveal-frame{
  position:relative;
  /* Bigger, but never taller than the window it is centred in: the card
     is pinned to the cursor, so half its height sits above the pointer
     and a card sized only off the width would run off the top of a short
     laptop screen. 54vh of width is ~73vh of card. */
  width:min(clamp(300px,27vw,448px), 54vh);
  aspect-ratio:1 / 1.36;    /* the photograph, plus the block of text under it */
  will-change:transform;
}
/* Two frames, one inside the other. The card is the mount board — a
   bronze hairline, a soft corner and a margin of board held on all four
   sides; the photograph is the plate sitting on it, with a hairline of
   its own. The margin is what separates them, and it is why the caption
   below reads as a caption rather than as more of the picture.

   --mat is that margin and --r the outer corner. The inner corner is
   the difference between them, which is the only way two rounded
   rectangles sit concentric instead of one looking pinched inside the
   other. */
.svc__reveal-card{
  --r:22px;                                 /* a larger card carries a larger corner */
  --mat:clamp(.55rem,.85vw,.8rem);

  position:absolute; inset:0;
  display:flex; flex-direction:column;
  padding:var(--mat);
  overflow:hidden;
  background:var(--ink);
  border-radius:var(--r);
  border:1px solid rgba(139,98,57,.3);    /* bronze, not neutral — it belongs to the palette */
  opacity:0;                /* gsap takes it from here */
  box-shadow:
    0 30px 80px -20px rgba(74,59,41,0.128),
    inset 0 1px 0 rgba(255,255,255,.9);    /* the light the top edge would catch */
  will-change:transform,opacity;
}

/* The photograph takes whatever the text does not, so every card in the
   stack ends the same height. */
.svc__reveal-media{
  position:relative;
  flex:1 1 auto; min-height:0;
  overflow:hidden;
  border-radius:calc(var(--r) - var(--mat));   /* concentric with the card */
}
.svc__reveal-media img{
  width:100%; height:100%;
  object-fit:cover;
  will-change:transform;
}
/* Sits the photograph down onto the card rather than letting it float
   free of it — the same darkening the pictures elsewhere on the site
   carry, and it carries the type below away from the bright edge. */
.svc__reveal-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,var(--media-scrim),transparent 55%);
}
/* The inner frame. A border rather than an inset shadow, and above the
   gradient rather than under it, so the line stays the same weight the
   whole way round instead of being swallowed at the dark bottom edge.
   The photograph is scaled from 1.14 as it enters (js/services.js) — the
   line does not move with it, which is what makes the picture read as
   settling into a frame that was already there. */
.svc__reveal-media::before{
  content:''; position:absolute; inset:0; z-index:2;
  border:1px solid rgba(74,59,41,.18);
  border-radius:inherit;
  pointer-events:none;
}

/* The mat holds the sides and the bottom now, so all this adds is the
   gap under the photograph. The caption sets flush to the left edge of
   the plate above it — a caption under a picture, not a second block of
   padding inside the first. */
.svc__reveal-txt{
  flex:0 0 auto;
  padding:clamp(.7rem,1.2vw,.95rem) .1rem .15rem;
}
.svc__reveal-name{
  margin:0 0 .45rem;
  font-family:var(--display);
  font-size:var(--fs-lede);
  line-height:1.2;
  color:var(--bone);
}
/* Held to three lines. The copy is written to fit in three, and the clamp
   is the guarantee that a longer one later cannot push the photograph
   above it out of square. */
.svc__reveal-copy{
  margin:0;
  font-family:var(--sans);
  font-size:var(--fs-fine);
  line-height:1.6;
  color:var(--bone-dim);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
}

@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .svc__item{ transition:opacity .3s var(--ease-out) }
  .svc__name{ transition:transform .5s var(--ease-out) }

  /* The card carries these words now; two copies of them on screen at
     once would only compete. */
  .svc__copy{ display:none }

  /* Everything but the line under the cursor steps back, so the card has
     one line to belong to instead of nine. */
  .svc__list:hover .svc__item{ opacity:.38 }
  .svc__list .svc__item:hover{ opacity:1 }
  .svc__item:hover .svc__name{ transform:translateX(8px) }
  .svc__item:hover .svc__n{ color:var(--bronze-hi) }
}

/* ── the sheet ────────────────────────────────────────────────────── */
/* What a tap opens where there is no cursor for the card above to
   follow. Built by js/services.js on the first press.

   Same card, standing still. It carries the picture, the name and the
   copy in the same order and the same frame the hover card uses — a
   service should not look like two different things depending on what
   you are holding. What it does not do is follow anything, tilt, or
   arrive under a pointer, because none of those have any meaning here. */

.svc__sheet{
  position:fixed; inset:0;
  z-index:var(--z-fab);
  display:grid; place-items:center;
  padding:clamp(.9rem,4vw,1.6rem);

  /* Paper, not near-black. A dark scrim on a light page reads as having
     been handed to a different website. Matches the projects viewer. */
  background:rgba(253,251,247,.9);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);

  opacity:0;
  pointer-events:none;
  transition:opacity .22s var(--ease-out);
}
.svc__sheet.is-on{ opacity:1; pointer-events:auto }

.svc__sheet-card{
  --r:22px;
  --mat:clamp(.5rem,2vw,.75rem);
  position:relative;
  margin:0;
  width:min(100%, 27rem);
  max-height:92dvh;
  display:flex; flex-direction:column;
  padding:var(--mat);
  background:var(--ink);
  border:1px solid rgba(139,98,57,.3);
  border-radius:var(--r);
  box-shadow:
    0 30px 80px -20px rgba(74,59,41,.16),
    inset 0 1px 0 rgba(255,255,255,.9);

  /* Up from just under full size. Nothing in the world appears out of
     nothing, and scale(0) is what that looks like. */
  transform:scale(.96);
  transition:transform .26s var(--ease-out);

  /* Ours to read as a drag; the browser keeps pinch. */
  touch-action:pinch-zoom;
}
.svc__sheet.is-on .svc__sheet-card{ transform:scale(1) }

/* While a finger is on it, the card is written every frame — a
   transition on top of that lands it where the thumb was. */
.svc__sheet-card.is-dragging{ transition:none }

.svc__sheet-media{
  position:relative;
  overflow:hidden;
  border-radius:calc(var(--r) - var(--mat));   /* concentric with the card */
  aspect-ratio:4/5;
  /* Capped so a tall card still leaves the name and the copy on screen
     in landscape, where there is barely any height to share. */
  max-height:54dvh;
  background:var(--black);
}
.svc__sheet-media img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}

.svc__sheet-txt{
  flex:0 0 auto;
  padding:clamp(.8rem,3vw,1rem) .15rem .2rem;
}
.svc__sheet-name{
  margin:0 0 .45rem;
  font-family:var(--display);
  font-size:var(--fs-lede); line-height:1.2;
  color:var(--bone);
}
/* Not clamped, unlike the hover card's. That one is clipped to three
   lines because it is read in passing at arm's length from a moving
   cursor; this one was asked for. */
.svc__sheet-copy{
  margin:0;
  font-family:var(--sans);
  font-size:var(--fs-fine); line-height:1.6;
  color:var(--bone-dim);
}

.svc__sheet-x{
  position:absolute; z-index:3;
  top:calc(-1 * clamp(2.6rem,7vw,3rem)); right:0;
  display:grid; place-items:center;
  width:44px; height:44px;              /* a full target, not just the glyph */
  padding:0;
  border:1px solid rgba(139,98,57,.3);
  border-radius:50%;
  background:rgba(253,251,247,.9);
  color:var(--bone-dim);
  cursor:pointer;
  transition:transform .16s var(--ease-out);
}
.svc__sheet-x:active{ transform:scale(.94) }
.svc__sheet-x:focus-visible{ outline:2px solid var(--bronze-hi); outline-offset:3px }
.svc__sheet-x svg{
  width:16px; height:16px;
  fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round;
}

/* A row is the target now, so it answers like one. */
@media (hover:none){
  .svc__row{ transition:transform .16s var(--ease-out) }
  .svc__row:active{ transform:scale(.99) }
}

/* Motion sickness first: the list still answers the cursor, it just does
   not move to do it. */
@media (prefers-reduced-motion:reduce){
  .svc__name{ transition:none }
  .svc__item:hover .svc__name{ transform:none }
  /* The sheet still opens — it is the only way to the photograph on a
     phone. It simply arrives at full size instead of growing into it. */
  .svc__sheet-card{ transition:none; transform:none }
  .svc__sheet.is-on .svc__sheet-card{ transform:none }
  .svc__row:active{ transform:none }
}