/* ============================================================
   SILICA WORKS - the team, who you would be talking to
   ------------------------------------------------------------
   Two people, dealt rather than ruled: the founder's card leads
   on the right at full height and the second card sits lower on
   the left, the showcase row's composition at the scale of a
   portrait. A handwritten aside sits in the gap between them.

   THE CAPTION IS KEPT SHORT. The hang tag already names the role,
   so under the plate there is only the name with the links beside
   it, one line of what they do, a short bio and a three-line
   ledger on the contact page's hairlines - no index, no second
   label, nothing said twice.

   THE PORTRAIT IS ON THE BRAND'S GROUND UNTIL YOU LOOK AT IT.
   Each plate rests as a duotone - the photograph in greyscale
   with the accent multiplied over it, so the whites go acid and
   the shadows stay ink. Hovering wipes the real photograph up
   over it, bottom to top, the direction the curtain loader
   opens. Two copies of one file, so the swap costs no request.

   IT ARRIVES THE WAY EVERY PAGE DOES. On scroll the plate is
   covered by a field of the accent that rises into it and then
   lifts away off the top - the curtain's gesture at the size of
   one image - while the photograph settles from a slight zoom
   underneath. js/team.js drives it; with the script absent the
   cover is never shown and the plate is simply there.

   The bevel is the plates' own 16px (home.html .ap-plate), cut
   with clip-path, so nothing on the plate may use box-shadow -
   the clip would shave it off. The draggable hang tag sits
   OUTSIDE the clipped frame for the same reason: it has to be
   able to hang over the edge.
   ============================================================ */

.tm {
  /* A plain block that stacks from the top - not .sw-section's
     centred flex column, which would float the pair in a screen
     it does not fill. Same override css/showcase.css makes. */
  display: block;
  min-height: 0;
  position: relative;
  /* The title opens the screen at the same height the contact
     hero's first line does - no dead band over it. */
  padding: clamp(1rem, 3.2vh, 2.25rem) 2.5rem clamp(8rem, 18vh, 12rem);
  background: var(--sw-paper);
}

/* Plain block, so .sw-featured-title keeps the whole measure it
   spreads its three words across. */
.tm-head {
  display: block;
}

/* The row under the title: the studio's statement, on the left
   over the lower card, where the eye lands after the title's first
   word. On the page's 12 columns so it sits over what it
   introduces. */
.tm-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  margin-top: clamp(2.5rem, 6vh, 4rem);
}

.tm-statement {
  grid-column: 1 / span 5;
  max-width: 36ch;
  font-family: "sohne-normal", "Inter Tight", sans-serif;
  font-size: 1.25rem;
  line-height: 1.55;
  color: #000;
  /* Nudged down into the middle of the open paper between the title
     and the lower card - half the difference between the gap the
     grid leaves under it and the one the intro leaves over it.
     Relative, so it moves the paragraph and nothing in the flow:
     the section keeps its height. */
  position: relative;
  top: clamp(4rem, 12.8vh, 9rem);
}

/* ------------------------------------------------------------
   The pair
   ------------------------------------------------------------ */
.tm-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  align-items: start;
  margin-top: clamp(4rem, 10vh, 7rem);
}

/* Both pinned to the first row: the founder is placed first in
   the source but sits to the right, and auto-placement would
   otherwise push the partner down a row to find a later slot. */
.tm-card--a { grid-column: 9 / span 4; grid-row: 1; }

/* Dealt low, so the pair reads as two cards on a table rather
   than two cells in a row. */
.tm-card--b {
  grid-column: 1 / span 4;
  grid-row: 1;
  margin-top: clamp(6rem, 18vh, 12rem);
}

/* The aside in the gap, pointing back across at the second card. */
.tm-aside {
  grid-column: 6 / span 2;
  grid-row: 1;
  align-self: start;
  margin-top: clamp(10rem, 28vh, 18rem);
  justify-self: center;
  width: 100%;
  max-width: 12rem;
  transform: rotate(-4deg);
}

/* The arrow is drawn pointing right; mirrored, it curls down and
   left onto the partner's card. */
.tm-aside .pg-arrow {
  right: 70%;
  top: 100%;
  margin-top: 0.3rem;
  width: clamp(3.5rem, 4.6vw, 5.5rem);
  transform: scaleX(-1);
}

.tm-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ------------------------------------------------------------
   The plate
   ------------------------------------------------------------ */
.tm-media {
  position: relative;
}

.tm-frame {
  --notch: 16px;
  position: relative;
  aspect-ratio: 4 / 4.6;
  overflow: hidden;
  background: var(--sw-ink);
  clip-path: polygon(var(--notch) 0, calc(100% - var(--notch)) 0, 100% var(--notch),
    100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%,
    var(--notch) 100%, 0 calc(100% - var(--notch)), 0 var(--notch));
}

/* The layers inside the frame, in paint order:
     .tm-shift  the scroll parallax, which carries both photos
     .tm-duo    the greyscale copy the accent is multiplied over
     .tm-tint   the accent, set to multiply
     .tm-true   the real photograph, wiped up on hover
     .tm-cover  the accent curtain the plate arrives under
   The parallax is its own wrapper so the hover's scale and the
   scroll's travel never write the same transform. */
.tm-shift {
  position: absolute;
  inset: -8% 0;
  will-change: transform;
}

.tm-shift img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s var(--pg-ease);
}

.tm-duo {
  filter: grayscale(1) contrast(1.18) brightness(1.06);
}

.tm-tint {
  position: absolute;
  inset: 0;
  background: var(--sw-accent);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Parked below the frame, and wiped up over the duotone on hover.
   clip-path rather than a height, so the photograph never
   rescales under the wipe. */
.tm-shift .tm-true {
  clip-path: inset(100% 0 0 0);
  /* Restates the scale transition as well, since this rule is more
     specific than .tm-shift img and replaces its list outright. */
  transition: clip-path 0.9s var(--pg-ease), transform 1.1s var(--pg-ease);
}

@media (hover: hover) {
  .tm-card:hover .tm-shift .tm-true,
  .tm-card:focus-within .tm-shift .tm-true {
    clip-path: inset(0 0 0 0);
  }

  .tm-card:hover .tm-shift img {
    transform: scale(1.04);
  }
}

/* Touch has no hover to earn the colour, so it is simply given. */
@media (hover: none) {
  .tm-shift .tm-true {
    clip-path: inset(0 0 0 0);
  }
}

.tm-cover {
  position: absolute;
  inset: 0;
  background: var(--sw-accent);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  pointer-events: none;
}

/* The hang tag, hung off the plate's top-right corner. Absolutely
   placed against .tm-media rather than the frame, which clips. */
.tm-media .sw-tag {
  position: absolute;
  top: -0.9rem;
  right: -1.1rem;
  margin: 0;
  font-size: 1.4rem;
}

/* ------------------------------------------------------------
   The caption
   ------------------------------------------------------------ */
.tm-body {
  display: flex;
  flex-direction: column;
  padding-top: 1.75rem;
}

/* The name, with the links sat on its baseline at the far edge. */
.tm-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.tm-name {
  margin: 0;
  font-family: "sohne-bold", "Inter Tight", sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 4.2vw, 4.4rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--sw-ink);
}

/* The name rises out of its own line, like the hero's words. */
.tm-name-mask {
  display: block;
  overflow: hidden;
  padding: 0.1em 0.05em 0.04em;
  margin: -0.1em -0.05em -0.04em;
}

.tm-name-mask > span {
  display: block;
}

/* The role: the title in ink, what they do in the soft grey after
   it - one line, in the text face. */
.tm-role {
  margin-top: 1rem;
  /* The role is set in the hand the FAQ lede uses (.sw-faq-lede in
     css/faq.css), with the same stroke and tracking. That light face
     reads small, so it runs a size up from the 1rem label beside it. */
  font-family: "Shadows Into Light", "Inter Tight", cursive;
  font-size: 1.3rem;
  letter-spacing: 0.035em;
  -webkit-text-stroke: 0.018em currentColor;
  line-height: 1.4;
  color: var(--pg-soft);
}

.tm-role b {
  margin-right: 0.45rem;
  font-family: "sohne-medium", "Inter Tight", sans-serif;
  font-weight: 500;
  /* The label stays in Söhne, so undo the hand's size, tracking
     and stroke for it. */
  font-size: 1rem;
  letter-spacing: normal;
  -webkit-text-stroke: 0;
  color: var(--sw-ink);
}

.tm-bio {
  margin-top: 1.25rem;
  max-width: 38ch;
  font-family: "sohne-normal", "Inter Tight", sans-serif;
  font-size: 1.125rem;
  line-height: 1.55;
  color: #000;
}

/* The spec: the contact hero's ledger on paper - solid hairlines,
   small caps on the left, the value on the right. */
.tm-spec {
  margin-top: 1.75rem;
  border-bottom: 1px solid rgba(20, 20, 15, 0.14);
}

.tm-spec > div {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 0.8rem 0;
  border-top: 1px solid rgba(20, 20, 15, 0.14);
}

.tm-spec dt {
  font: 500 0.66rem/1.3 "Inter Tight", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pg-soft);
}

.tm-spec dd {
  font-family: "sohne-medium", "Inter Tight", sans-serif;
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--sw-ink);
}

/* ------------------------------------------------------------
   The links - the menu's social chips, on paper
   ------------------------------------------------------------ */
.tm-links {
  display: flex;
  gap: 0.4rem;
  list-style: none;
}

.tm-link {
  --n: 7px;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--sw-ink);
  transition: color 0.2s ease;
}

/* Edge and face as two clipped layers, the face's cut pulled in so
   the edge is one thickness round the bevels - see --pg-bevel-k. */
.tm-link::before,
.tm-link::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c),
    100% calc(100% - var(--c)), calc(100% - var(--c)) 100%,
    var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
  transition: background-color 0.2s ease;
}

.tm-link::before { --c: var(--n); inset: 0; background: rgba(20, 20, 15, 0.28); }
.tm-link::after { --c: calc(var(--n) - 1.5px * var(--pg-bevel-k)); inset: 1.5px; background: var(--sw-paper); }

.tm-link svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tm-link:hover::after,
.tm-link:focus-visible::after {
  background: var(--sw-ink);
}

.tm-link:hover::before,
.tm-link:focus-visible::before {
  background: var(--sw-ink);
}

.tm-link:hover,
.tm-link:focus-visible {
  color: var(--sw-accent);
  outline: none;
}

/* No script-driven start states live here. js/team.js sets every
   one of them itself, in the same frame it takes the section over:
   a translate written in CSS is read back by GSAP as a pixel offset
   it then composes its own yPercent on top of, and the name would
   land short of its line. Without the script every card simply
   rests finished. */

/* ------------------------------------------------------------
   Narrow
   ------------------------------------------------------------ */
@media (max-width: 1000px) {
  .tm {
    padding: 1.75rem 1.25rem 6rem;
  }

  /* minmax(0, 1fr): a bare 1fr's auto floor lets the widest
     unbreakable thing in the column set the column. */
  .tm-intro,
  .tm-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.75rem;
  }

  .tm-statement,
  .tm-card--a,
  .tm-card--b,
  .tm-aside {
    grid-column: 1;
    grid-row: auto;
  }

  /* Stacked, the founder's card follows straight on - no gap to
     balance, so no nudge. */
  .tm-statement {
    top: 0;
  }

  .tm-grid {
    row-gap: 4.5rem;
  }

  .tm-card--b {
    margin-top: 0;
  }

  /* The aside only means anything pointing across a gap. */
  .tm-aside {
    display: none;
  }

  .tm-frame {
    --notch: 12px;
    aspect-ratio: 4 / 4.4;
  }

  .tm-media .sw-tag {
    right: -0.25rem;
  }

  .tm-spec > div {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tm-shift img,
  .tm-shift .tm-true {
    transition: none;
  }
}