/* ==========================================================================
   About — page module for /about/
   Who is behind Stitchwork, and why a retailer can trust it: the team's
   experience, where the product comes from, the standards it is built to,
   the founder, a buyer's questions and the form. Loaded after home.css,
   whose buttons, cards, decks, question rows and closing band it reuses;
   only the pieces unique to this page are here.

   Like the homepage, the page is told in cards: each part of the story, each
   standard, the founder and each question sits in a card of its own, so a
   reader can take the page a piece at a time. On a phone the rows of cards
   are decks (home.css). Same breakpoint ladder as tokens.css:
   1100 / 1000 / 860 / 760 / 620.
   ========================================================================== */

/* ---------- Hero ----------
   The copy beside a photograph of a workshop, set as a card with its
   caption on it: the homepage hero's balance, with the headline at the
   homepage's size so the two pages read as one site. */
.about-hero { padding-block: var(--sp-8) var(--section); }
.about-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(40px, 5vw, 88px); align-items: center;
}
.about-hero h1 {
  font-weight: 300; font-size: clamp(2.375rem, 1.75rem + 2.7vw, 3.5rem);
  line-height: 1; letter-spacing: -0.028em;
  max-width: 18ch; margin-bottom: var(--sp-6);
}
.about-hero h1 em { color: var(--thread); font-weight: 400; }
.about-sub {
  font-size: var(--fs-md); line-height: 1.6; color: var(--ink-soft);
  max-width: 54ch; margin-bottom: var(--sp-7);
}
.about-hero .hero-cta { margin-bottom: 0; }

.about-photo {
  position: relative; margin: 0;
  aspect-ratio: 4 / 5; border-radius: var(--radius-card); overflow: hidden;
  box-shadow: var(--lift);
}
.about-photo .ph { position: absolute; inset: 0; }
/* The scrim runs up from the foot, so the caption sits on dark whatever
   the photograph does above it. */
.about-photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(17, 17, 16, 0.82) 0%, rgba(17, 17, 16, 0.4) 34%, rgba(17, 17, 16, 0) 60%);
}
.about-photo figcaption {
  position: absolute; z-index: 1; left: var(--sp-6); right: var(--sp-6); bottom: var(--sp-6);
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: var(--fs-lg); line-height: 1.35; color: var(--paper);
}

/* Links in running copy: ink, with the thread as the underline. */
.founder-role a,
.founder-link a {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--thread); text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .founder-role a:hover,
  .founder-link a:hover { color: var(--thread); }
}

/* ---------- Why it exists (reversed) ----------
   Three cards for the three beats of the story — what we build, the
   problem it kept running into, the fix — the last in the thread colour,
   because it is the answer. The thread accent is too dark to read as text
   on ink, so this band lifts it to the lighter rust the social cards use
   on the same ground. */
.about-gap {
  --thread-lit: #d9622b;
  background: var(--ink); color: var(--paper);
  padding-block: var(--section);
}
.about-gap .section-head h2 em { color: var(--thread-lit); }

.story-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5); counter-reset: story;
}
.story-card {
  counter-increment: story;
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.4vw, 32px);
  background: var(--ink-lift); border: 1px solid var(--line-dark); border-radius: var(--radius-card);
}
.story-card::before {
  content: counter(story, decimal-leading-zero);
  display: block; margin-bottom: var(--sp-6);
  font-family: var(--font-serif); font-size: var(--d-4); line-height: 1; color: var(--thread-lit);
}
.story-card h3 { font-weight: 400; font-size: var(--fs-xl); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: var(--sp-3); }
.story-card p { font-size: var(--fs-base); line-height: 1.65; color: var(--paper-body); }
/* Paper on the thread is 4.9:1, so the answer reads at full strength. */
.story-card--fix { background: var(--thread); border-color: var(--thread); }
.story-card--fix::before { color: var(--paper); }
.story-card--fix p { color: var(--paper); }
.about-gap .deck-dots button:not(.is-on)::before { background: var(--line-dark); }

/* The two halves of one sale, as the two lines of the logo, stitched where a
   step online meets a step in the room — in a card of its own under the
   story. The SVG stretches to the row's width and its three stitches sit on
   the centres of the three columns, so the strokes are kept from stretching
   with it. */
.about-thread {
  margin: var(--sp-5) 0 0;
  padding: clamp(28px, 3.6vw, 52px) clamp(20px, 3vw, 44px);
  background: var(--ink-lift); border: 1px solid var(--line-dark); border-radius: var(--radius-card);
}
.thread-row ol {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.thread-row li {
  text-align: center; padding-inline: var(--sp-4);
  font-family: var(--font-serif); font-size: var(--fs-lg); line-height: 1.35; color: var(--paper);
}
.thread-side {
  text-align: center; margin-bottom: var(--sp-4);
  font-size: var(--fs-xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--paper-faint);
}
.thread-row--room { display: flex; flex-direction: column-reverse; }
.thread-row--room .thread-side { margin-bottom: 0; margin-top: var(--sp-4); }

.thread-lines {
  width: 100%; height: clamp(72px, 9vw, 120px);
  margin-block: var(--sp-4); overflow: visible;
}
.thread-lines path { fill: none; stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.thread-web { stroke: var(--paper-body); }
.thread-room { stroke: var(--thread-lit); }
.thread-stitch { stroke: var(--paper-faint); stroke-dasharray: 4 5; }

.about-thread figcaption {
  text-align: center; margin-top: var(--sp-7);
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: var(--fs-xl); line-height: 1.4; color: var(--paper);
}

/* The stitches go in one at a time, after the figure has arrived. */
@media (prefers-reduced-motion: no-preference) {
  .js .about-thread .thread-stitch { opacity: 0; transition: opacity .5s ease; }
  .js .about-thread.in .thread-stitch { opacity: 1; }
  .js .about-thread.in .thread-stitch:nth-of-type(3) { transition-delay: .45s; }
  .js .about-thread.in .thread-stitch:nth-of-type(4) { transition-delay: .7s; }
  .js .about-thread.in .thread-stitch:nth-of-type(5) { transition-delay: .95s; }
}

/* ---------- How it's built ----------
   Six standards, each a card: a stitch, a short heading and the sentence
   that proves it, three across on a wide screen. */
.about-standards {
  background: var(--paper-warm); border-bottom: 1px solid var(--line);
  padding-block: var(--section);
}
.standard-list {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
.standard {
  padding: clamp(24px, 2.4vw, 32px);
  background: var(--paper-lift); border: 1px solid var(--line); border-radius: var(--radius-card);
}
.standard::before {
  content: ''; display: block; width: 34px; height: 2px; margin-bottom: var(--sp-6); border-radius: 2px;
  background-image: repeating-linear-gradient(90deg, var(--thread) 0 6px, transparent 6px 10px);
}
.standard h3 {
  font-weight: 400; font-size: var(--d-4);
  line-height: 1.2; letter-spacing: -0.012em; margin-bottom: var(--sp-3); max-width: 20ch;
}
.standard p { color: var(--ink-soft); font-size: var(--fs-base); line-height: 1.65; max-width: 44ch; }
.standards-note {
  margin-top: var(--sp-8); max-width: 44rem;
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: var(--fs-xl); line-height: 1.45; color: var(--ink);
  padding-left: var(--sp-5); border-left: 2px solid var(--thread);
}

/* ---------- The founder ----------
   One card: name and role on the left, the account of him on the right. */
.about-founder { padding-block: var(--section); }
.founder-grid {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--sp-6) clamp(40px, 6vw, 104px); align-items: start;
  padding: clamp(28px, 4.4vw, 64px);
  background: var(--paper-lift); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--hairline);
}
.founder-name {
  font-weight: 300; font-size: var(--d-1);
  line-height: 1.02; letter-spacing: -0.026em; margin-bottom: var(--sp-4);
}
.founder-role { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-faint); }
.founder-copy p { font-size: var(--fs-md); line-height: 1.68; color: var(--ink-soft); max-width: 58ch; margin-bottom: var(--sp-5); }
.founder-copy .founder-link { margin-top: var(--sp-6); margin-bottom: 0; font-size: var(--fs-base); }

/* ---------- The questions ----------
   Four, so on a wide screen each is a card, two by two. On a phone they
   are the homepage's folded list (home.css), so nothing here reaches it. */
.about-questions .obj-layout { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 761px) {
  .about-questions .obj-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5);
  }
  .about-questions .obj-card,
  .about-questions .obj-card:last-child {
    grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-content: start;
    padding: clamp(24px, 2.6vw, 36px);
    background: var(--paper-lift); border: 1px solid var(--line); border-radius: var(--radius-card);
  }
}

/* ---------- Narrower screens ---------- */
@media (max-width: 1100px) {
  .standard-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .about-hero-grid,
  .founder-grid { grid-template-columns: minmax(0, 1fr); }
  .about-photo { aspect-ratio: 3 / 2; }
  .story-grid { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
}
@media (max-width: 860px) {
  .standard-list { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
  .about-questions .obj-list { grid-template-columns: minmax(0, 1fr); }
}
/* A phone: the story and the standards are decks (home.css), so the cards
   lose their column widths and the deck sets them. */
@media (max-width: 760px) {
  /* This sheet loads after home.css, so its grids would otherwise win over
     the deck's flex row. */
  .story-grid, .standard-list { display: flex; gap: 12px; max-width: none; }
  .about-hero { padding-block: var(--sp-7) 56px; }
  .about-hero-grid { gap: var(--sp-7); }
  .about-photo { aspect-ratio: 4 / 3; }
  .about-photo figcaption { left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-5); font-size: var(--fs-md); }
  .about-gap, .about-standards, .about-founder { padding-block: 56px 60px; }
  /* Sheets, as on the homepage: each section that changes colour rises
     over the one before it on rounded corners. */
  .about-gap, .about-standards, .about-founder {
    position: relative;
    margin-top: calc(var(--sheet) * -1);
    border-radius: var(--sheet) var(--sheet) 0 0;
    box-shadow: 0 -14px 28px -22px rgba(17, 17, 16, 0.5);
  }
  .about-founder { background: var(--paper); }
  .founder-grid { padding: 24px 22px; }
  .founder-name { font-size: var(--d-2); }
}
@media (max-width: 620px) {
  .thread-row li { font-size: var(--fs-sm); padding-inline: var(--sp-2); }
  .about-thread figcaption { font-size: var(--fs-lg); }
  .standards-note { font-size: var(--fs-lg); }
}