/* ==========================================================================
   THEME: PAPER  (team.html, Meet the team)

   The team drew themselves, and posted the drawings on crumpled coloured
   paper with a faint doodle pattern, a marker title, sparkles and a smiley.
   This page is that paper. The first screen is one sheet with the five on
   it; picking a person turns the sheet their colour. Under the sheet is the
   desk it lies on: the same colour, much darker, for the story and contact.

   Everything is scoped to body.paper and loaded only by team.html.

   Colours are the ones measured from the reference cards (source-art/team).
   --paper  the sheet        --ink  what is written on it
   --pop    the bright marker colour of that card (sparkles, smiley, buttons)
   Each person's set is in the block "one colour per person" below.

   Shape rule: cut paper, so every corner is sharp. Things that are drawn
   (sparkles, arrows, the smiley, the doodles) come from assets/img/team as
   masks, so they take their colour from here. tools/make-team-art.mjs
   redraws them.
   ========================================================================== */

@font-face {
  font-family: "Rock Salt"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/rock-salt-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../assets/fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../assets/fonts/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------- tokens -- */
.paper {
  --cream: #fbf6ea;
  --soot:  #15120f;

  /* the group's sheet: the blue of the group drawing */
  --paper: #5d72a6;
  --ink:   var(--cream);
  --pop:   #38b6ff;
  /* a soft patch behind text written straight on the sheet, so it reads
     wherever the crumple happens to be light or dark */
  --wash:  rgb(12 14 40 / 0.3);

  --desk: color-mix(in oklab, var(--paper) 40%, #0b0a0d);
  --snap-w: 9.5rem;   /* how wide a person's photo is; all its parts follow */
  --font-hand: "Rock Salt", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;

  --sc-font-text: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-canvas: var(--desk);
  --sc-surface: color-mix(in oklab, var(--paper) 52%, #0b0a0d);
  --sc-ink: #f4efe3;
  --sc-ink-soft: #cdc8bd;
  --sc-accent: var(--pop);
  --sc-accent-ink: var(--soot);
  --hair: rgb(244 239 227 / 0.16);
  --hair-strong: rgb(244 239 227 / 0.34);

  background: var(--desk);
  font-family: var(--sc-font-text);
  transition: background-color 700ms var(--ease-out);
}
/* one colour per person, as on their card */
.paper[data-member="yunus"] { --paper: #775f8e; --ink: var(--cream); --pop: #d58af0; --wash: rgb(24 8 40 / 0.3); }
.paper[data-member="elif"]  { --paper: #778499; --ink: var(--soot);  --pop: #9bd4f5; --wash: rgb(255 255 255 / 0.3); }
.paper[data-member="burak"] { --paper: #618a92; --ink: var(--soot);  --pop: #5ce1e6; --wash: rgb(255 255 255 / 0.3); }
.paper[data-member="ece"]   { --paper: #54816a; --ink: var(--cream); --pop: #ffaa1a; --wash: rgb(6 30 16 / 0.4); }
.paper[data-member="taha"]  { --paper: #bc9467; --ink: var(--soot);  --pop: #ffaa1a; --wash: rgb(255 255 255 / 0.16); }

/* The bar and the rail are over the sheet at the top of the page and over
   the desk further down. js/site.js says which with data-chrome-*. */
.paper .bar { --c-ink: var(--ink); --c-scrim: var(--paper); }
.paper .bar__link:hover { color: var(--c-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
html[data-chrome-bar="studio"] .paper .bar { --c-ink: var(--sc-ink); --c-scrim: var(--desk); }
/* The rail runs down the right edge over the sheet and the desk at the same
   time, and the sheet changes colour with the person. So on this page it has
   one skin that reads on all of them: dark plates with a cream edge and icon,
   a cream line with a dark hairline round it, a cream plate for "here", and
   labels on dark chips. */
.paper .rail {
  --c-ink: var(--cream); --c-accent: var(--cream);
  --c-plate: var(--soot); --c-plate-on: var(--cream);
  --c-icon: rgb(251 246 234 / 0.66); --c-icon-past: var(--cream); --c-icon-on: var(--soot);
  --c-edge: rgb(251 246 234 / 0.55); --c-edge-past: var(--cream); --c-edge-on: var(--cream);
  --c-edge-w: 2px;
  --c-track: rgb(251 246 234 / 0.55); --c-track-w: 2px; --c-track-ring: 0 0 0 1px rgb(21 18 15 / 0.28);
  --c-fill: var(--cream);
}
/* the part already read is a thicker line, so it shows against the track */
.paper .rail__fill { width: 4px; margin-left: -2px; box-shadow: 0 0 0 1px rgb(21 18 15 / 0.28); }
.paper .rail__label { padding: 0.3rem 0.6rem; background: var(--soot); color: var(--cream); border: 0; }

/* a heading in marker */
.hand-h2 {
  font-family: var(--font-hand); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.55rem, 1rem + 2.2vw, 3rem); line-height: 1.5; letter-spacing: 0;
  color: var(--sc-ink); text-wrap: balance;
  rotate: -2deg; transform-origin: 0 100%;
  text-shadow: 0.045em 0.055em 0 color-mix(in oklab, var(--pop) 62%, transparent);
}

/* ================================================================ THE SHEET == */
.sheet {
  position: relative; isolation: isolate; display: grid;
  min-height: 100svh; color: var(--ink);
  transition: color 500ms var(--ease-out);
}
.sheet :focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
/* a person's name takes the focus when they are opened, so a screen reader
   starts there; it is not a control and gets no ring */
.sheet .bio__name:focus-visible { outline: none; }

/* the paper: colour, doodles, each person's faded double, then the crumple */
.sheet__paper {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background: var(--paper);
  transition: background-color 700ms var(--ease-out);
}
.sheet__paper::after {
  content: ""; position: absolute; inset: 0;
  background: url("../assets/img/team/paper-crumple.webp") center / cover;
}
.doodle {
  position: absolute; inset: -12%; rotate: -5deg; opacity: 0;
  background: color-mix(in oklab, var(--paper) 72%, #05060f);
  -webkit-mask: var(--tile, none) 0 0 / clamp(22rem, 34vw, 34rem) repeat;
          mask: var(--tile, none) 0 0 / clamp(22rem, 34vw, 34rem) repeat;
  transition: opacity 600ms var(--ease-out), background-color 700ms var(--ease-out);
}
/* Only the group's pattern is fetched with the page. The others get their
   file once the page has loaded (js/site.js adds .is-ready). */
.doodle[data-for=""] { --tile: url("../assets/img/team/doodle-group.svg"); opacity: 0.5; }
.doodle.is-ready[data-for="yunus"] { --tile: url("../assets/img/team/doodle-yunus.svg"); }
.doodle.is-ready[data-for="elif"]  { --tile: url("../assets/img/team/doodle-elif.svg"); }
.doodle.is-ready[data-for="burak"] { --tile: url("../assets/img/team/doodle-burak.svg"); }
.doodle.is-ready[data-for="ece"]   { --tile: url("../assets/img/team/doodle-ece.svg"); }
.doodle.is-ready[data-for="taha"]  { --tile: url("../assets/img/team/doodle-taha.svg"); }
.sheet.has-member .doodle[data-for=""] { opacity: 0; }
.sheet .doodle.is-on { opacity: 0.55; }

/* The double: the chosen person again, much larger and washed into the
   paper's own colour, as on the cards. */
.ghost {
  position: absolute; top: -4svh; right: calc(var(--pad-r) + 7vw);
  height: 128svh; width: auto; max-width: 64vw; object-fit: contain; object-position: 100% 0;
  opacity: 0; translate: 3% 0;
  filter: grayscale(1) contrast(0.9);
  mix-blend-mode: luminosity;
  transition: opacity 500ms var(--ease-out), translate 1100ms var(--ease-out);
}
.ghost.is-on { opacity: 0.2; translate: 0 0; }

/* On a person's page the doodles and the double fade out under the words
   (the left half; on a phone, the lower part), so nothing crosses the text. */
.sheet__calm {
  position: absolute; inset: 0; opacity: 0;
  background: var(--paper);
  -webkit-mask: linear-gradient(90deg, #000 32%, transparent 60%);
          mask: linear-gradient(90deg, #000 32%, transparent 60%);
  transition: opacity 500ms var(--ease-out), background-color 700ms var(--ease-out);
}
.sheet.has-member .sheet__calm { opacity: 0.72; }

/* the torn bottom edge, where the sheet ends and the desk shows */
.sheet::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.6rem; pointer-events: none;
  background: var(--desk);
  -webkit-mask: url("../assets/img/team/mark-tear.svg") 0 0 / 100% 100% no-repeat;
          mask: url("../assets/img/team/mark-tear.svg") 0 0 / 100% 100% no-repeat;
  transition: background-color 700ms var(--ease-out);
}

.sheet__inner {
  display: grid;
  padding-top: calc(var(--bar-h) + clamp(0.5rem, 2.5svh, 1.75rem));
  padding-bottom: clamp(3.25rem, 7svh, 4.75rem);
}
.group, .member { grid-area: 1 / 1; min-width: 0; }

/* ----------------------------------------------------------------- group -- */
.group {
  position: relative; z-index: 1;
  display: grid; align-content: start; justify-items: start; gap: 1.25rem;
}
.group__intro { position: relative; }
.group__intro::before, .group__caption::before, .facts::before, .member__text::before, .member__back::before, .others::before {
  content: ""; position: absolute; inset: -0.75rem -1.25rem; z-index: -1; pointer-events: none;
  background: var(--wash); filter: blur(1.4rem);
}
.group__title {
  position: relative; width: max-content; max-width: 100%;
  font-family: var(--font-hand); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.1rem, 0.95rem + 3vw, 4.25rem); line-height: 1.5; letter-spacing: 0;
  rotate: -5deg; transform-origin: 0 100%;
  text-shadow: 0.04em 0.05em 0 var(--pop);
}
.group__title span { display: block; }
.group__title span + span { margin-left: 1.3em; margin-top: -0.12em; }
/* sparkles beside the title */
.group__title::before, .group__title::after, .crew::before, .crew::after {
  content: ""; position: absolute; background: var(--pop); pointer-events: none;
  -webkit-mask: url("../assets/img/team/mark-sparkle.svg") center / contain no-repeat;
          mask: url("../assets/img/team/mark-sparkle.svg") center / contain no-repeat;
}
.group__title::before { width: 0.8em; height: 0.8em; left: -0.15em; top: 1.75em; }
.group__title::after  { width: 0.42em; height: 0.42em; left: 0.7em; top: 2.6em; }
.group__lede {
  margin-top: clamp(1.4rem, 4svh, 2.5rem); max-width: 22ch;
  font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.55rem); line-height: 1.38; font-weight: 420; text-wrap: pretty;
}
.group__hint {
  position: relative; width: max-content; margin-top: clamp(1rem, 3svh, 1.75rem);
  font-family: var(--font-hand); text-transform: uppercase; font-size: clamp(0.8rem, 0.74rem + 0.25vw, 0.95rem); line-height: 1.5;
  rotate: -3deg; transform-origin: 0 50%;
}
.group__hint::after {
  content: ""; position: absolute; left: calc(100% + 0.5rem); top: -0.9rem; width: 4.5rem; height: 2.25rem;
  background: var(--pop);
  -webkit-mask: url("../assets/img/team/mark-arrow.svg") center / contain no-repeat;
          mask: url("../assets/img/team/mark-arrow.svg") center / contain no-repeat;
}
html:not(.js) .group__hint { display: none; }
/* On a narrow phone the hint and its arrow do not fit side by side: the arrow
   ran under the rail and, below 366px, made the page scroll sideways. There
   the words take two lines and the arrow stays beside them. */
@media (max-width: 430px) {
  .group__hint { max-width: 10rem; text-wrap: balance; }
}

/* The five. The box has the proportions of the group drawing, and each
   person is placed in it by the --x, --y and --h set on them in the HTML. */
.crew {
  position: relative; justify-self: center;
  width: min(100%, 31rem); aspect-ratio: 775 / 860;
}
.crew::before { width: 9%; height: 9%; right: -3%; top: 3%; }
.crew::after  { width: 5.5%; height: 5.5%; right: 7%; top: 13%; }
.crew__floor {
  position: absolute; left: -8%; right: -8%; bottom: -3.4%; height: 9.5%;
  background: radial-gradient(50% 50% at 50% 50%, rgb(12 14 34 / 0.5), rgb(12 14 34 / 0.22) 55%, transparent 72%);
}
.fig {
  position: absolute; left: var(--x); bottom: var(--y); height: var(--h); aspect-ratio: var(--ar);
  display: block; transform-origin: 0 0;
  transition: transform 820ms cubic-bezier(0.22, 1, 0.3, 1) calc(var(--i) * 28ms);
  -webkit-tap-highlight-color: transparent;
}
.fig img {
  display: block; width: 100%; height: 100%; transform-origin: 50% 100%;
  transition: translate 280ms var(--ease-out), rotate 280ms var(--ease-out), filter 200ms var(--ease-out);
  -webkit-user-drag: none; user-select: none;
}
/* The pointer (or the keyboard, through the caption) is on this person:
   they hop, and get a sticker edge in their own colour. */
.fig.is-hot img {
  translate: 0 -2.2%; rotate: -1.6deg;
  filter: drop-shadow(0.16rem 0 0 var(--me)) drop-shadow(-0.16rem 0 0 var(--me)) drop-shadow(0 0.16rem 0 var(--me)) drop-shadow(0 -0.16rem 0 var(--me));
}
.js .group .fig { pointer-events: none; }
.js .crew.is-aimed { cursor: pointer; }

/* the name tag over the head of whoever the pointer is on */
.crew__tag {
  position: absolute; left: 0; top: 0; z-index: 6; margin: 0; pointer-events: none;
  display: grid; gap: 0.05rem; padding: 0.4rem 0.75rem 0.5rem; white-space: nowrap;
  background: var(--me, var(--pop)); color: var(--soot);
  box-shadow: 0 0.2rem 0 rgb(8 10 24 / 0.3);
  translate: calc(var(--tx, 0px) - 50%) calc(var(--ty, 0px) - 100% - 0.5rem); rotate: -3deg;
  opacity: 0; transition: opacity 160ms var(--ease-out);
}
.crew__tag.is-on { opacity: 1; }
.crew__tag b { font-family: var(--font-hand); font-weight: 400; text-transform: uppercase; font-size: 0.9rem; line-height: 1.5; }
.crew__tag span { font-size: 0.8125rem; font-weight: 500; line-height: 1.2; }

.group__caption {
  position: relative; justify-self: center; max-width: 34ch; text-align: center; text-wrap: balance;
  font-size: 1.0625rem; line-height: 1.9; font-weight: 420;
}
.group__caption a {
  color: inherit; font-weight: 650; padding: 0.3em 0.1em;
  text-decoration: underline; text-decoration-color: var(--pop); text-decoration-thickness: 0.14em; text-underline-offset: 0.26em;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.group__caption a:hover, .group__caption a.is-hot { background: var(--ink); color: var(--paper); text-decoration-color: transparent; }

/* The studio in numbers: notes in the margin. The one under the pointer
   grows and drifts toward it (js/site.js sets --fx and --fy from where the
   pointer is over the note). */
.facts {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem;
}
.facts li {
  display: flex; align-items: baseline; gap: 0.85rem; white-space: nowrap; cursor: default;
  transform-origin: 0 60%; translate: var(--fx, 0px) var(--fy, 0px);
  transition: scale 260ms cubic-bezier(0.3, 1.5, 0.5, 1), translate 220ms var(--ease-out);
}
.facts b { font-family: var(--font-hand); font-weight: 400; text-transform: uppercase; font-size: clamp(1.2rem, 1rem + 0.7vw, 1.7rem); line-height: 1.3; }
.facts span { font-size: 1rem; font-weight: 450; }
.facts li:nth-child(odd)  { rotate: -2.5deg; }
.facts li:nth-child(even) { rotate: 1.5deg; }
.facts li:hover { scale: 1.28; }
@media (prefers-reduced-motion: reduce) {
  .facts li { transition-duration: 1ms; translate: none; }
}

@media (min-width: 1000px) {
  .group {
    grid-template-columns: minmax(0, 1.22fr) auto minmax(0, 0.78fr);
    grid-template-rows: 1fr auto; align-content: stretch; gap: 0 clamp(1rem, 2.4vw, 3rem);
    min-height: calc(100svh - var(--bar-h) - clamp(0.5rem, 2.5svh, 1.75rem) - clamp(3.25rem, 7svh, 4.75rem));
  }
  .group__intro { grid-area: 1 / 1; align-self: start; padding-top: clamp(1.5rem, 9svh, 5.5rem); z-index: 1; }
  .crew { grid-area: 1 / 2; align-self: end; width: auto; height: min(76svh, 43vw); }
  .group__caption { grid-area: 2 / 2; margin-top: 1.4rem; }
  .facts { grid-area: 1 / 3; align-self: end; justify-self: end; margin-bottom: 9svh; flex-direction: column; flex-wrap: nowrap; gap: 1.1rem; }
  .facts li:nth-child(2n) { margin-left: 1.5rem; }
  .facts li:nth-child(3n) { margin-left: 0.6rem; }
}
/* On a narrower desktop the margin is too slim for a number and its label
   side by side, so the label goes under the number. */
@media (min-width: 1000px) and (max-width: 1359px) {
  .crew { height: min(76svh, 40vw); }
  .facts { gap: 0.85rem; margin-bottom: 6svh; }
  .facts li { flex-direction: column; align-items: flex-start; gap: 0; }
  .facts li:nth-child(n) { margin-left: 0; }
}

/* -------------------------------------------------------------- one person -- */
/* Without JavaScript this is simply all five stories, one under the other. */
.member { position: relative; z-index: 2; grid-area: auto; margin-top: 3rem; }
.member__back, .member__spot, .others { display: none; }
.member__text { position: relative; display: grid; gap: 3rem; }

.bio__name {
  font-family: var(--font-hand); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.75rem, 1.05rem + 2.5vw, 3.3rem); line-height: 1.5; letter-spacing: 0;
  rotate: -2.5deg; transform-origin: 0 100%;
  text-shadow: 0.04em 0.05em 0 var(--pop);
}
.bio__role { margin-top: clamp(0.9rem, 2.5svh, 1.4rem); font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem); font-weight: 650; line-height: 1.3; }
.bio__say {
  margin-top: clamp(0.8rem, 2svh, 1.2rem); max-width: 37ch;
  font-size: clamp(1.0625rem, 0.92rem + 0.5vw, 1.3125rem); line-height: 1.55; font-weight: 420; text-wrap: pretty;
}
.bio__games { margin-top: 1rem; max-width: 37ch; font-size: 1.0625rem; line-height: 1.5; font-weight: 420; }
.bio__games b { display: block; font-weight: 700; }
.bio__links { list-style: none; margin: clamp(1rem, 2.5svh, 1.5rem) 0 0; padding: 0; display: flex; gap: 0.6rem; }
.bio__links a {
  display: grid; place-items: center; width: 2.875rem; height: 2.875rem; color: var(--ink);
  border: 2px solid currentColor;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), translate 160ms var(--ease-out);
}
.bio__links li:nth-child(odd) a  { rotate: -3deg; }
.bio__links li:nth-child(even) a { rotate: 2deg; }
.bio__links a:hover { background: var(--ink); color: var(--paper); translate: 0 -2px; }
.bio__links a:active { translate: 0 1px; }

/* With JavaScript: the sheet shows either the group or one person. */
.js .member { grid-area: 1 / 1; display: none; margin-top: 0; }
.js .bio { display: none; }
.js .sheet.has-member .member {
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: start;
}
.js .bio.is-on { display: block; }
/* A link to a person (team.html#elif) names their story, and a browser scrolls
   to what the address names. Here a person's page is the whole sheet, so the
   place to arrive at is the top of it: this margin is taller than anything
   that can be above a story, which leaves the page at the top. */
.js .bio { scroll-margin-top: 100rem; }
.js .member__back, .js .others { display: flex; }
.js .member__spot { display: block; }
/* the group steps aside: its words go, the five stay and are moved */
.js .sheet.has-member .group { pointer-events: none; }
.js .group > :not(.crew), .js .crew__floor, .js .crew::before, .js .crew::after {
  transition: opacity 420ms var(--ease-out) 260ms, visibility 0s;
}
.js .sheet.has-member .group > :not(.crew),
.js .sheet.has-member .crew__floor,
.js .sheet.has-member .crew::before, .js .sheet.has-member .crew::after {
  opacity: 0; visibility: hidden; transition: opacity 180ms var(--ease-out), visibility 0s 180ms;
}

.member__back {
  position: relative; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0 0.25rem 0 0; margin: 0;
  font: inherit; font-size: 1rem; font-weight: 650; color: var(--ink); background: none; border: 0; cursor: pointer;
}
.member__back-arrow {
  width: 2.6rem; height: 1.3rem; background: currentColor; scale: -1 1;
  -webkit-mask: url("../assets/img/team/mark-arrow.svg") center / contain no-repeat;
          mask: url("../assets/img/team/mark-arrow.svg") center / contain no-repeat;
  transition: translate 220ms var(--ease-out);
}
.member__back:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.member__back:hover .member__back-arrow { translate: -0.3rem 0; }

/* where the chosen person stands (js/site.js moves the drawing here) */
.member__spot { position: relative; width: 100%; height: min(46svh, 26rem); margin-top: 0.5rem; }
.member__smiley {
  position: absolute; right: max(3%, 50% - 15rem); bottom: 30%; width: clamp(3rem, 13vw, 4.5rem); aspect-ratio: 1; rotate: -8deg;
  background: var(--pop);
  -webkit-mask: url("../assets/img/team/mark-smiley.svg") center / contain no-repeat;
          mask: url("../assets/img/team/mark-smiley.svg") center / contain no-repeat;
}
.js .member__text { display: block; margin-top: 1.5rem; }

/* The snapshot: the same person in real life, a photo taped to the sheet.
   It is written at the end of their story and stays there without JavaScript;
   with it, js/site.js moves it to the foot of the drawing. Its border, tape
   and caption are all shares of --snap-w, so it keeps its looks at any size
   (it is always 1.375 times as tall as it is wide). */
.snap {
  position: relative; width: var(--snap-w); margin: 2.25rem 0 0 0.5rem;
  padding: calc(var(--snap-w) * 0.05) calc(var(--snap-w) * 0.05) 0;
  background: var(--cream); color: var(--soot); rotate: -5deg;
  box-shadow: 0 0.3rem 0 rgb(8 10 24 / 0.3);
  transition: rotate 260ms var(--ease-out), scale 260ms cubic-bezier(0.3, 1.5, 0.5, 1);
}
.snap img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.snap figcaption {
  display: grid; place-items: center; height: calc(var(--snap-w) * 0.2); white-space: nowrap;
  font-family: var(--font-hand); text-transform: uppercase; font-size: calc(var(--snap-w) * 0.085); line-height: 1; letter-spacing: 0.08em;
}
.snap::before {   /* the tape */
  content: ""; position: absolute; left: 50%; top: 0; width: 40%; height: calc(var(--snap-w) * 0.13);
  translate: -50% -58%; rotate: 4deg;
  background: color-mix(in oklab, var(--pop) 78%, transparent);
  box-shadow: 0 1px 0 rgb(8 10 24 / 0.14);
}
.snap:hover { rotate: -1deg; scale: 1.08; }
.member__spot { --snap-w: clamp(5.75rem, 26vw, 8.5rem); }
/* at the drawing's feet, to its left: at the edge on a phone, and no further
   than that from the middle on anything wider */
.member__spot .snap { position: absolute; z-index: 1; left: max(-1%, 50% - 9.5rem - var(--snap-w)); bottom: 3%; margin: 0; display: none; }
.member__spot .snap.is-on { display: block; }

/* the other four */
.others { position: relative; flex-wrap: wrap; align-items: flex-end; gap: 0.25rem 0.75rem; margin-top: clamp(1.5rem, 4svh, 2.5rem); }
.others button {
  display: grid; justify-items: center; gap: 0.35rem; min-width: 4rem; padding: 0.25rem 0.35rem 0.4rem; margin: 0;
  font-family: var(--font-hand); font-size: 0.8rem; line-height: 1.5; text-transform: uppercase;
  color: var(--ink); background: none; border: 0; cursor: pointer;
}
.others button.is-self { display: none; }
/* Each space is the same height and takes the proportions of its own drawing
   (js/site.js sets the aspect ratio), so a wide drawing is not shrunk to fit. */
.others__slot { display: block; height: clamp(5rem, 12svh, 8rem); aspect-ratio: 3 / 5; }
.others button:hover, .others button:focus-visible { text-decoration: underline; text-decoration-color: var(--pop); text-decoration-thickness: 0.14em; text-underline-offset: 0.24em; }

@media (min-width: 1000px) {
  .js .sheet.has-member .member {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); grid-template-rows: auto 1fr auto;
    column-gap: clamp(1.5rem, 4vw, 5rem); align-content: stretch;
    min-height: calc(100svh - var(--bar-h) - clamp(0.5rem, 2.5svh, 1.75rem) - clamp(3.25rem, 7svh, 4.75rem));
  }
  .member__back { grid-area: 1 / 1; }
  .js .member__text { grid-area: 2 / 1; align-self: center; margin-top: 0; padding-block: 0.5rem 1rem; }
  .others { grid-area: 3 / 1; margin-top: 0; }
  .member__spot { grid-area: 1 / 2 / 4 / 3; height: auto; min-height: min(80svh, 48rem); margin-top: 0; --snap-w: clamp(7.5rem, 11.5vw, 15rem); }
  /* the photo leans out of the space, into the gap between the words and
     the drawing; the smiley is drawn just above it */
  .member__spot .snap { left: -14%; bottom: 7%; }
  .member__smiley { left: -9%; right: auto; bottom: calc(7% + var(--snap-w) * 1.375 + 1.1rem); width: calc(var(--snap-w) * 0.52); }
}
@media (min-width: 1000px) and (max-width: 1359px) {
  /* less room between the words and the drawing, so the photo leans out less */
  .member__spot .snap { left: -6%; }
  .member__smiley { left: -1%; }
}
@media (max-width: 999px) {
  .ghost { top: 2svh; right: -18vw; height: 78svh; max-width: none; }
  .sheet__calm {
    -webkit-mask: linear-gradient(180deg, transparent 34svh, #000 62svh);
            mask: linear-gradient(180deg, transparent 34svh, #000 62svh);
  }
  .group__lede { max-width: 30ch; }
  /* one column: the person first, then their words */
  .member__back { order: -2; }
  .member__spot { order: -1; }
}

/* What changes when a person is picked arrives in order: name, role, words. */
@media (prefers-reduced-motion: no-preference) {
  .js .bio.is-on > * { animation: bio-in 520ms var(--ease-out) backwards; }
  .js .bio.is-on > :nth-child(1) { animation-delay: 220ms; }
  .js .bio.is-on > :nth-child(2) { animation-delay: 290ms; }
  .js .bio.is-on > :nth-child(3) { animation-delay: 350ms; }
  .js .bio.is-on > :nth-child(4) { animation-delay: 410ms; }
  .js .bio.is-on > :nth-child(5) { animation-delay: 470ms; }
  .member__smiley { animation: pop-in 520ms cubic-bezier(0.3, 1.5, 0.5, 1) 560ms backwards; }
  .member__spot .snap.is-on { animation: snap-in 460ms cubic-bezier(0.3, 1.4, 0.5, 1) 420ms backwards; }
  /* the page's one arrival: the five walk on, back row first */
  .js .fig img { animation: walk-on 760ms var(--ease-out) calc(var(--i) * 90ms + 200ms) backwards; }
}
@keyframes bio-in  { from { opacity: 0; translate: 0 0.9rem; } }
@keyframes pop-in  { from { opacity: 0; scale: 0.4; rotate: -40deg; } }
@keyframes snap-in { from { opacity: 0; scale: 1.3; rotate: 5deg; } }
@keyframes walk-on { from { opacity: 0; translate: 0 5%; } }

/* while the window is being resized the five are placed, not moved */
.sheet.is-still .fig { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .fig, .fig img, .ghost, .snap { transition-duration: 1ms; transition-delay: 0s; }
  .fig.is-hot img { translate: none; rotate: none; }
}

/* ================================================================ THE STORY == */
.story { padding-block: clamp(4.5rem, 13vh, 8.5rem) clamp(3rem, 9vh, 6rem); }
.stops {
  position: relative; list-style: none; padding: 0; margin: clamp(3rem, 8vh, 5rem) 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3.25rem);
}
/* the pencil line the four stops sit on */
.stops::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2.75rem;
  background: var(--sc-ink-soft);
  -webkit-mask: url("../assets/img/team/mark-path.svg") 0 50% / 100% 100% no-repeat;
          mask: url("../assets/img/team/mark-path.svg") 0 50% / 100% 100% no-repeat;
}
.stop { position: relative; padding-top: 4.5rem; }
/* a sparkle for a stop that is behind us, the smiley for where we are */
.stop::before {
  content: ""; position: absolute; left: -0.25rem; top: 0.1rem; width: 2.5rem; height: 2.5rem;
  background: var(--sc-ink);
  -webkit-mask: url("../assets/img/team/mark-sparkle.svg") center / contain no-repeat;
          mask: url("../assets/img/team/mark-sparkle.svg") center / contain no-repeat;
}
.stop::after {   /* a patch of desk behind the mark, so the line stops at it */
  content: ""; position: absolute; left: -0.6rem; top: 0; width: 3.4rem; height: 2.75rem; z-index: -1;
  background: var(--desk); transition: background-color 700ms var(--ease-out);
}
.stop--now::before {
  left: -0.5rem; top: -0.45rem; width: 3.5rem; height: 3.5rem; background: var(--pop);
  -webkit-mask-image: url("../assets/img/team/mark-smiley.svg");
          mask-image: url("../assets/img/team/mark-smiley.svg");
}
.stop--now::after { width: 4rem; }
.stop__when { font-family: var(--font-hand); text-transform: uppercase; font-size: clamp(1.05rem, 0.92rem + 0.55vw, 1.45rem); line-height: 1.4; color: var(--pop); }
.stop__title { margin: 0.5rem 0 0; font-size: 1.3125rem; font-weight: 650; line-height: 1.25; color: var(--sc-ink); }
.stop .copy { margin-top: 0.6rem; }
@media (max-width: 860px) {
  .stops { grid-template-columns: 1fr; gap: 2.5rem; }
  .stops::before {
    left: 0.9rem; right: auto; top: 0.5rem; bottom: 1rem; width: 4px; height: auto;
    -webkit-mask: radial-gradient(circle, #000 1.6px, transparent 2px) 50% 0 / 4px 0.9rem repeat-y;
            mask: radial-gradient(circle, #000 1.6px, transparent 2px) 50% 0 / 4px 0.9rem repeat-y;
  }
  .stop { padding: 0 0 0 4rem; }
  .stop::after { left: -0.2rem; top: -0.4rem; height: 3.3rem; }
  .stop--now::after { height: 4rem; }
}

/* ============================================================== THE CONTACT ==
   The homepage's contact block and footer (css/site.css), on the desk. */
.paper .contact { background: none; }
.paper .contact::before { display: none; }
.paper .contact .hand-h2 { max-width: 13ch; }
.paper .contact__write .btn { box-shadow: 0 5px 0 color-mix(in oklab, var(--pop) 52%, #000); }
.paper .contact__write .btn:hover { box-shadow: 0 7px 0 color-mix(in oklab, var(--pop) 52%, #000); }
.paper .contact__write .btn:active { box-shadow: 0 1px 0 color-mix(in oklab, var(--pop) 52%, #000); }
.paper .contact__mail { font-family: var(--sc-font-text); font-weight: 650; letter-spacing: 0; }
.paper .contact__label { font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.paper .social__name { font-family: var(--sc-font-text); font-weight: 650; letter-spacing: 0; }
.paper .foot__est { font-family: var(--sc-font-display); }

/* Without JavaScript nothing would ever reveal the sections below the sheet
   (the scroll engine fades them in), so they are simply shown. */
html:not(.js) .paper [data-sc-in], html:not(.js) .paper [data-sc-stagger] > * { opacity: 1; transform: none; }