/* ALLIN MAKI · Our Story
   ---------------------------------------------------------------------------
   Three devices, none of them used elsewhere on the site: a page head with
   the name in it, one continuous thread with eight stations hanging off it,
   and a wall of ten people. Everything structural is borrowed from the
   system: .container, the type roles, .cta.
   --------------------------------------------------------------------------- */

/* ---- 1. The name ---------------------------------------------------------- */
.st-top { padding-block: var(--s-40) var(--s-32); }
@media (min-width: 900px) { .st-top { padding-block: var(--s-64) var(--s-48); } }
.st-top__in { display: grid; gap: var(--s-20); max-width: 880px; }
/* From 1024 the head takes the container and the facts stand beside the copy
   rather than under it, which is the shape the compliance, catalogue and
   private label heads already use: one column of type, one object. The object
   here is the four numbers a buyer checks before they read a word. */
@media (min-width: 1024px) {
  .st-top__in {
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    grid-template-areas: "eyebrow facts" "title facts" "lede facts";
    column-gap: var(--s-64); align-items: start;
  }
  .st-top__in > .t-eyebrow { grid-area: eyebrow; }
  .st-top__h { grid-area: title; }
  .st-top__lede { grid-area: lede; }
  .st-facts { grid-area: facts; align-self: end; }
}
.st-top__h { margin: 0; font-size: clamp(36px, 5.6vw, 74px); line-height: 1.02; letter-spacing: -0.02em; }
.st-top__lede { max-width: 62ch; color: var(--ink-a70); }

.st-facts {
  display: grid; margin: var(--s-12) 0 0; padding-top: var(--s-20);
  border-top: 1px solid var(--ink-a15);
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-20) var(--s-16);
}
@media (min-width: 700px) { .st-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* In the second column it is a card rather than a rule: one column of rows on
   the pale fleece ground, separated by the site's dotted rule, the same object
   the private label head carries. */
@media (min-width: 1024px) {
  .st-facts {
    grid-template-columns: minmax(0, 1fr); gap: 0;
    margin: 0; padding: var(--s-24) var(--s-28); border-top: 0;
    background: var(--tint-card); border-radius: var(--r-20);
  }
  .st-facts > div + div {
    margin-top: var(--s-16); padding-top: var(--s-16);
    background-image: radial-gradient(circle, var(--ink-a30) 1px, transparent 1.1px);
    background-size: 8px 2px; background-repeat: repeat-x; background-position: left top;
  }
  .st-facts dt { font-size: 11px; }
  .st-facts dd { font-size: 20px; }
}
.st-facts > div { display: grid; gap: 5px; min-width: 0; }
.st-facts dt {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-a40);
}
.st-facts dd { margin: 0; font-weight: 700; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.2; }

/* ---- 2. The thread -------------------------------------------------------
   One fleece becoming one animal, drawn as one line. The svg stretches to
   whatever the stations add up to, and js/story.js moves --k from 0 to 1 as
   you pass. With no JavaScript the line is simply drawn in full and every
   station is readable, which is the whole degradation story.
   --------------------------------------------------------------------------- */
.st-make { padding-block: var(--s-40) var(--s-56); }
@media (min-width: 900px) { .st-make { padding-block: var(--s-64) var(--s-96); } }
/* One head on this page takes the width it is standing in, the people's, and
   it earns it by having a lede and a note to stand beside the heading. All
   three h2 heads were 54px on the same left edge in the same shape, capped at
   720 inside a 1360 container. The head above the thread was the second of
   them until its lede came out; with nothing to put in the right half it went
   back to stacked, where the hero and the refusals have always been. */
.st-make__head { display: grid; gap: var(--s-12); max-width: 720px; margin-bottom: var(--s-40); }
@media (min-width: 1100px) {
  .st-team__head {
    max-width: none;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: var(--s-64); align-items: end;
  }
  .st-team__head > .t-eyebrow { grid-column: 1; }
  .st-team__head > .t-h2 { grid-column: 1; max-width: 18ch; }
  .st-team__lede { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
  .st-team__note { grid-column: 2; grid-row: 3; margin-top: 0; }
}
.st-make__lede { color: var(--ink-a70); }

.thread { position: relative; }
/* A straight line does not need an svg, a dash array or a pathLength. It is
   a rule that grows: height scales with --k, which is one multiplication and
   cannot come out drawn from the wrong end. */
.thread__line {
  position: absolute; left: 42px; top: 20px; width: 2px; height: calc(100% - 60px);
  pointer-events: none; background: var(--ink-a10); border-radius: 2px; overflow: hidden;
}
/* Above 900 the rail has to end on a bead, and it did not: it kept the phone's
   numbers, so it started well above the first bead and ran a long way past the
   last one into the padding before the people band, and the accent fill spent
   its first two hundred pixels growing through empty paper. Both beads are
   28px from the top of their station, and the last station is exactly one
   picture tall, because the picture is the tallest thing in every station. The
   picture's height is derivable: the container is 1360 or the viewport less
   two gutters, the middle column is 80, so a side column is half of what is
   left and the frame is three quarters of that. The 0.75 is the aspect-ratio
   on .st-st__media; if that changes, this changes with it. */
@media (min-width: 900px) {
  .thread { --media-h: calc((min(1360px, 100vw - 96px) - 80px) / 2 * 0.75); }
  .thread__line { left: 50%; margin-left: -1px; top: 28px; height: calc(100% - var(--media-h)); }
}
.thread__p {
  display: block; width: 100%; height: calc(var(--k, 1) * 100%);
  background: var(--accent); border-radius: 2px;
}

.st-stations { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-48); }
@media (min-width: 900px) { .st-stations { gap: var(--s-56); } }

.st-st {
  position: relative; display: grid; gap: var(--s-16);
  padding-left: 56px;
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.st-st.is-on { opacity: 1; transform: none; }
/* the bead on the thread */
.st-st::before {
  content: ""; position: absolute; left: 36px; top: 14px;
  width: 13px; height: 13px; border-radius: var(--r-pill);
  background: var(--paper); border: 2px solid var(--accent);
  transition: background-color .4s ease, transform .4s cubic-bezier(.2, .9, .3, 1);
}
.st-st.is-on::before { background: var(--accent); transform: scale(1.15); }

@media (min-width: 900px) {
  .st-st {
    padding-left: 0; grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr);
    align-items: start; gap: 0;
  }
  /* the bead marks the top of the station now that the two sides start
     together, rather than the middle of a row whose height comes from the
     picture */
  .st-st::before { left: 50%; top: 28px; margin-left: -6.5px; }
  /* odd stations put the picture on the left, even on the right, so the eye
     crosses the thread at every step instead of running down one side */
  .st-st:nth-child(odd) .st-st__media { grid-column: 1; }
  .st-st:nth-child(odd) .st-st__copy { grid-column: 3; }
  .st-st:nth-child(even) .st-st__media { grid-column: 3; grid-row: 1; }
  .st-st:nth-child(even) .st-st__copy { grid-column: 1; grid-row: 1; }
  /* Mirror the block, not the words. The even stations used to set their copy
     text-align: right, which is a ragged left edge on six lines of 20px body
     and the hardest reading on the site; and it put the station number at the
     far end of the column from the paragraph it numbers. The column hugs the
     thread from the right instead, and every line still starts at one x. */
  .st-st:nth-child(even) .st-st__copy { justify-self: end; }
  .st-st:nth-child(even) .st-st__n { text-align: right; }
  .st-st__copy { padding-block-start: var(--s-16); max-width: 46ch; }
}

.st-st__media {
  position: relative; overflow: hidden; border-radius: var(--r-20);
  /* 4:3, because the five clips behind it were shot portrait or square and
     object-fit: cover takes the loss off the top. */
  aspect-ratio: 4 / 3; background: var(--tint-card);
  box-shadow: var(--shadow-frame);
}
/* A word in the corner of a clip, for when what is in frame needs one: the
   shelves carry another brand hangtag because that is what a private label
   order looks like leaving the workshop. Mono on a dark pill, bottom right,
   clear of the piece in the middle. */
.st-st__cap {
  position: absolute; right: var(--s-10); bottom: var(--s-10); max-width: calc(100% - var(--s-20));
  padding: 6px var(--s-10); border-radius: var(--r-pill);
  background: rgba(36, 30, 26, .66); color: rgba(255, 255, 255, .92);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; line-height: 1.4;
}
/* In a 271px frame the same label takes three lines and covers the clip. */
@media (max-width: 600px) { .st-st__cap { font-size: 9px; letter-spacing: .05em; padding: 5px var(--s-8); } }
/* A slot still waiting for a photograph carries neither the shadow nor the
   ground of one, or it reads as a picture that failed to load. */
.st-st__media:has(.st-ph) { box-shadow: none; background: var(--tint-card); }
.st-st__media video, .st-st__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The reserved slot. It used to be a fleece-coloured gradient with a label
   across the middle, in the same rounded, shadowed frame as the real clips,
   which is exactly what a photograph that failed to load looks like. Now it is
   the site's own dotted rule drawn around open tint: plainly a slot, plainly
   on purpose. */
.st-ph {
  /* inset from the media box rather than filling it: the frame is the slot,
     so it has to be the size of the slot less its inset, not the size of its
     own label. */
  position: absolute; inset: var(--s-12);
  display: grid; place-content: center; gap: var(--s-8);
  border-radius: var(--r-16);
  background-image:
    radial-gradient(circle, var(--ink-a20) 1px, transparent 1.1px),
    radial-gradient(circle, var(--ink-a20) 1px, transparent 1.1px),
    radial-gradient(circle, var(--ink-a20) 1px, transparent 1.1px),
    radial-gradient(circle, var(--ink-a20) 1px, transparent 1.1px);
  background-size: 8px 2px, 8px 2px, 2px 8px, 2px 8px;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: left top, left bottom, left top, right top;
}
.st-ph b {
  font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: .1em;
  text-transform: uppercase; text-align: center; line-height: 1.6; color: var(--ink-a70);
}
/* the line that explains why the slot is empty is the one line in it that has
   to be read, so it is not the faintest thing on the page */
.st-ph b i { display: block; font-style: normal; font-size: 10px; color: var(--ink-a60); }
/* A slot with no picture in it has no picture's shadow either. */
.st-st__media:has(.st-ph) { box-shadow: none; }

/* Station 02's colour standard: the nine undyed shades, in the real fleece,
   from the same crops the colour card runs under each grid. Not a stand-in for
   a photograph. It is the object the paragraph beside it describes. */
.st-board {
  position: absolute; inset: 0; margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr; gap: 2px; background: var(--ink-a20);
}
.st-board li { position: relative; overflow: hidden; }
.st-board img { width: 100%; height: 100%; object-fit: cover; }
.st-board b {
  position: absolute; inset-inline: 0; bottom: 0;
  font-family: var(--font-mono); font-weight: 400; font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .94);
  padding: var(--s-20) var(--s-8) var(--s-6);
  background: linear-gradient(to top, rgba(36, 30, 26, .62), rgba(36, 30, 26, 0));
}
@media (max-width: 620px) { .st-board b { font-size: 8.5px; letter-spacing: .06em; } }

.st-st__copy { display: grid; gap: var(--s-10); align-content: center; min-width: 0; }
.st-st__n {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: var(--accent-active);
}
.st-st__t { margin: 0; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.12; }
.st-st__copy .t-p { margin: 0; max-width: 46ch; color: var(--ink-a70); }

@media (prefers-reduced-motion: reduce) {
  .st-st { opacity: 1; transform: none; transition: none; }
  .thread__p { stroke-dashoffset: 0; }
}

/* ---- 3. The people -------------------------------------------------------- */
.st-team { padding-block: var(--s-40) var(--s-56); background: var(--tint); }
@media (min-width: 900px) { .st-team { padding-block: var(--s-80); } }
/* Declared before the >= 1100 rule that releases it, not after: same
   specificity, so order decides, and the later one was winning. */
.st-team__head { display: grid; gap: var(--s-12); margin-bottom: var(--s-40); }
@media (max-width: 1099px) { .st-team__head { max-width: 720px; } }
.st-team__lede { color: var(--ink-a70); }
.st-team__note {
  margin: var(--s-4) 0 0; padding: var(--s-12) 0 var(--s-12) var(--s-16);
  border-left: 3px solid var(--accent);
  font-size: 14.5px; line-height: 1.5; color: var(--ink-a70);
}
.st-team__note b { color: var(--ink); }

/* The people, until there are portraits of them. Ten slots stood here, one a
   role, five carrying a still from the bench and five drawn as held slots.
   Two photographs say the same thing with less pretending. The ten are in
   REMOVED-BLOCKS.md and the rules below still draw them. */
.st-team__pair { display: grid; gap: var(--s-20); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .st-team__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-24); } }
.st-team__frame {
  position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--r-16); background: var(--tint-card); box-shadow: var(--shadow-frame);
}
.st-team__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Whose team, and which town. Mono on a scrim, the same label the fleece crops
   on the colour card carry, so it reads as a caption and not as a headline. */
.st-team__frame figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s-32) var(--s-16) var(--s-12);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
  background: linear-gradient(to top, rgba(36, 30, 26, .66), rgba(36, 30, 26, 0));
}

.st-people {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-20); grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px) { .st-people { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-24); } }
@media (min-width: 1100px) { .st-people { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.st-p { display: grid; gap: var(--s-8); align-content: start; min-width: 0; }
/* A portrait slot is portrait. Square tiles read as swatches; 2:3 reads as a
   place a person goes, which is what this section is holding open.

   Five of the ten carry the workshop's own footage, because five of these
   roles are the five the clips on this page show being done. The other five
   are drawn as held slots, the same dotted frame the reserved station on the
   thread above uses, so the row reads as five portraits and five places
   waiting rather than as ten blocks of colour. No stock faces: the section
   says the roles are the real ones, and a face under a real role is a claim
   about who works here that a caption cannot take back. */
.st-p__shot {
  position: relative; display: grid; align-content: end; width: 100%; aspect-ratio: 2 / 3;
  border-radius: var(--r-16); overflow: hidden;
  background: linear-gradient(150deg, var(--a, #C9B192), color-mix(in srgb, var(--a, #C9B192) 66%, #241E1A));
}
.st-p__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A slot with nobody in it yet is a slot: the shade stays, quietly, behind the
   site's dotted rule drawn on four sides. */
.st-p__shot:not(.st-p__shot--has) {
  background: var(--tint-card);
  box-shadow: inset 0 0 0 1px var(--ink-a10);
}
.st-p__shot:not(.st-p__shot--has)::before {
  content: ""; position: absolute; inset: var(--s-10); border-radius: var(--r-8);
  background-image:
    radial-gradient(circle, var(--ink-a20) 1px, transparent 1.1px),
    radial-gradient(circle, var(--ink-a20) 1px, transparent 1.1px),
    radial-gradient(circle, var(--ink-a20) 1px, transparent 1.1px),
    radial-gradient(circle, var(--ink-a20) 1px, transparent 1.1px);
  background-size: 8px 2px, 8px 2px, 2px 8px, 2px 8px;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: left top, left bottom, left top, right top;
}
.st-p__shot:not(.st-p__shot--has) i {
  color: var(--ink-a40); background: none; padding: var(--s-10);
}
.st-p__shot i {
  position: relative;
  font-style: normal; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; line-height: 1.5; color: rgba(255, 255, 255, .78);
  padding: var(--s-20) var(--s-10) var(--s-8);
  background: linear-gradient(to top, rgba(36, 30, 26, .55), rgba(36, 30, 26, 0));
}
/* The role is the only information these cards actually carry, and it was set
   at 10.5px under "Name to come" at 16px bold, ten times down the band: the
   largest line in every card was the same three placeholder words. Swapped.
   The name keeps its place in the reading order and its own line, quietly. */
.st-p__rl {
  order: -1;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink);
}
.st-p__nm { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; color: var(--ink-a60); font-weight: 400; }
.st-p__b { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-a70); }

/* ---- 4. What we will not do -----------------------------------------------
   The page annotates this as its highest-trust content and it was rendered as
   the flattest thing on the page: three hairline-ruled rows on open paper,
   directly after a tinted band, so it read as the page winding down rather
   than as the closing argument. It takes the inverted surface the site already
   owns, in the same fleece obsidian and the same 32px radius as the homepage
   panel, which is the one place a dark ground is spent. */
.st-not { padding-block: var(--s-56); }
@media (min-width: 900px) { .st-not { padding-block: var(--s-96); } }
.st-not__in {
  background: var(--fleece-obsidian); color: var(--paper);
  border-radius: var(--r-32); padding: var(--s-32) var(--s-24);
  max-width: var(--stack-w); margin-inline: auto;
}
@media (min-width: 900px) { .st-not__in { padding: var(--s-64); } }
.st-not__in .t-eyebrow { color: rgba(253, 251, 246, .60); }
.st-not__in .t-h2 { margin: var(--s-12) 0 var(--s-32); max-width: 22ch; }
.st-nots { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-24); }
@media (min-width: 900px) { .st-nots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-32); } }
.st-nots li {
  display: grid; gap: var(--s-6); padding-top: var(--s-20); align-content: start;
  border-top: 1px solid rgba(253, 251, 246, .22);
  grid-template-columns: 48px minmax(0, 1fr);
}
@media (min-width: 900px) { .st-nots li { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); } }
.st-nots span {
  grid-row: 1 / span 2; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .12em; color: var(--accent);
}
@media (min-width: 900px) { .st-nots span { grid-row: auto; } }
.st-nots b { font-size: clamp(17px, 2vw, 21px); line-height: 1.25; }
.st-nots p { margin: 0; grid-column: 2; color: rgba(253, 251, 246, .72); max-width: 46ch; }
@media (min-width: 900px) { .st-nots p { grid-column: auto; } }