/* ------------------------------------------------------------------
   salman.build — about page.
   One process, top to bottom: a short introduction, the establishing
   shot, then four beats down a dotted spine with a photograph set
   beside or between each one.
   Reads every token from site.css.
   ------------------------------------------------------------------ */

/* 1. Head: the introduction with the train beside it ---------------- */

.about-head { padding-bottom: clamp(40px, 5vw, 64px); }

/* The field blooms on the right; the words stay on plain stone. */
.about-head > .grain-field {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.2) 46%, #000 72%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.2) 46%, #000 72%);
}

@media (max-width: 759px) {
  .about-head > .grain-field {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 52%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 52%, #000 100%);
  }
}

.about-head .wrap { position: relative; z-index: 1; }
.about-head h1 { max-width: 15ch; }
.about-head .lede { margin-bottom: 0.7em; }
.about-head .kicker { margin: 0; }

.about-head .sub {
  color: var(--ink-2);
  font-size: 1.125rem;
  line-height: 1.5;
  max-width: 52ch;
  margin: 0;
}

.beat--head { --aside: 440px; }

@media (min-width: 880px) {
  .beat--head > .kicker { padding-top: 0.9em; }
}

/* 2. The train: one print among the others, not a wall ------------- */

.film { margin: 24px 0 0; max-width: 560px; }
.film .frame-inner { aspect-ratio: 16 / 10; }

@media (min-width: 1060px) {
  .film { margin: 6px 0 0; max-width: none; }
}

/* The poster sits under the video so the first frame can arrive by a
   fade rather than a cut. No controls, no play button, nothing to press:
   it runs when it is on screen and stops when it isn't (about.js). */
.film .frame-inner {
  background-image: url("/assets/img/train-poster.jpg");
  background-image: image-set(
    url("/assets/img/train-poster.webp") type("image/webp"),
    url("/assets/img/train-poster.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: 50% 50%;
}

.film video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 700ms ease;
}

.film.is-ready video { opacity: 1; }
.film video::-webkit-media-controls { display: none !important; }

/* A breath of the site's grain over the moving picture. */
.film .frame-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("/assets/img/grain.png");
  background-size: 180px 180px;
  mix-blend-mode: soft-light;
  opacity: 0.55;
}

/* 3. Beats: spine column, label column, words ----------------------- */

.beat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.beat > .label { margin: 0; }
.beat-anchor { display: none; }

@media (min-width: 880px) {
  .beat {
    grid-template-columns: 7px 168px minmax(0, 1fr);
    column-gap: 32px;
    row-gap: 0;
    align-items: start;
  }

  /* The invisible anchor the spine is measured from: one per label. */
  .beat-anchor {
    display: block;
    width: 7px;
    height: 7px;
    margin-top: 7px;
  }
}

.beat-copy > p:last-child { margin-bottom: 0; }

.beat-lede {
  font-size: clamp(1.1875rem, 1.6vw, 1.375rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 0.8em;
}

.beat-copy p { font-size: 1.0625rem; }
.beat-copy p.beat-lede { font-size: clamp(1.1875rem, 1.6vw, 1.375rem); }

/* The one line that turns the section. */
.beat-turn {
  font-size: 1.125rem;
  color: var(--ink);
  border-left: 1px solid var(--green);
  padding-left: 16px;
  margin-bottom: 1em;
}

/* Split beats: the words, and a photograph set beside them. */
.beat-figure { margin: 24px 0 0; }

@media (min-width: 1060px) {
  .beat--split .beat-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--aside, 300px);
    column-gap: clamp(32px, 4vw, 56px);
    align-items: start;
  }
  .beat-figure { margin: 0; }

  /* Every other beat sets its photograph on the other side, so the page
     runs down in a zigzag instead of a single right-hand strip. */
  .beat--flip .beat-body { grid-template-columns: var(--aside, 300px) minmax(0, 1fr); }
  .beat--flip .beat-copy { grid-column: 2; grid-row: 1; }
  .beat--flip .beat-figure { grid-column: 1; grid-row: 1; }
}

.beat--why { --aside: 320px; }
.beat--believe { --aside: 340px; }
.beat--history { --aside: 440px; }
.beat--off { --aside: 500px; }

/* The beats sit closer than the site's default sections: one story. */
.about-why, .about-believe, .about-history, .about-off, .about-next { padding-block: clamp(40px, 5vw, 68px); }

/* Two prints in one column: the joke, then the photograph. */
.beat-stack { display: grid; gap: 20px; justify-items: end; }
.beat-stack .shot--tea { width: 100%; }

/* Two prints side by side, the same height. */
.beat-stack--pair { grid-template-columns: 1fr 1fr; gap: 16px; justify-items: stretch; margin-top: 24px; }
.beat-stack--pair .shot { width: 100%; --ar: 4 / 5; }
@media (min-width: 1060px) { .beat-stack--pair { margin-top: 0; } }

@media (max-width: 1059px) {
  .beat-stack { grid-template-columns: 150px minmax(0, 1fr); align-items: start; justify-items: start; margin-top: 28px; }
  .beat-stack .shot--tea { max-width: 320px; }
}

/* 4. The ledger: the boring work, itemised -------------------------- */

.ledger {
  list-style: none;
  margin: 0 0 clamp(22px, 3vw, 30px);
  padding: 0;
  border-top: 1px solid var(--rule);
}

.ledger li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 4px;
  align-items: start;
  padding: 12px 2px;
  border-bottom: 1px solid var(--rule);
}

.ledger li:nth-child(2) { transition-delay: 70ms; }
.ledger li:nth-child(3) { transition-delay: 140ms; }
.ledger li:nth-child(4) { transition-delay: 210ms; }

.ledger .ic {
  color: var(--ink-3);
  margin-top: 0.22em;
}

.ledger-text {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
}

.ledger-tag {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.ledger-tag .sq { width: 6px; height: 6px; vertical-align: 0; }

@media (min-width: 620px) {
  .ledger li {
    grid-template-columns: 18px minmax(0, 1fr) auto;
    column-gap: 18px;
    align-items: center;
  }
  .ledger .ic { margin-top: 0; }
  .ledger-tag { grid-column: auto; justify-self: end; }
}

/* 5. Photographs ---------------------------------------------------- */

.shot { margin: 0; min-width: 0; }

/* Each print declares its own ratio; the sources match it exactly, so
   nothing is stretched or cropped. */
.shot .frame-inner { aspect-ratio: var(--ar, 4 / 5); }

.shot--tea   { --ar: 4 / 5; }
.shot--boat  { --ar: 3 / 4; }
.shot--office{ --ar: 5 / 4; }
.shot--yu    { --ar: 3 / 4; }
.shot--book  { --ar: 3 / 4; }

/* A print develops as it comes into view: it arrives pale and a touch
   large, then the colour comes up and it settles flat. One second, once. */
.shot img { transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1), filter 1200ms ease; }
.shot[data-reveal]:not(.in) img,
.beat-stack[data-reveal]:not(.in) .shot img,
.shot[data-reveal]:not(.in) video { transform: scale(1.05); }
.shot:not(.duotone)[data-reveal]:not(.in) img { filter: saturate(0.12) brightness(1.08) contrast(0.92); }
.beat-stack[data-reveal]:not(.in) .shot:not(.duotone) img { filter: saturate(0.12) brightness(1.08) contrast(0.92); }
.shot.duotone[data-reveal]:not(.in) img { filter: grayscale(1) contrast(0.7) brightness(1.15); }

/* The office shot is mostly bright brick, so the shared duotone washes it
   out completely. Pull it down and push the contrast: the room comes back
   and the lettering stops shouting. */
.shot--office img { filter: grayscale(1) contrast(1.5) brightness(0.62); }
:root[data-theme="dark"] .shot--office img { filter: grayscale(1) contrast(1.3) brightness(0.86); }

/* The book is an artefact, not a photograph: small, and never competing. */
.shot--book { width: 150px; }

@media (min-width: 1060px) {
  .shot--book { width: 190px; }
}

/* Below the split, a photograph sits under its words. Keep the portraits
   off the full column width and let them take alternate sides, so the
   narrow page still reads as prints set down rather than a strip. */
@media (max-width: 1059px) {
  .beat-figure.shot--boat { width: 78%; max-width: 400px; margin-left: auto; }
  .beat-figure.shot--office { max-width: 600px; }
  .beat-stack--pair { max-width: 560px; }
}

/* 6. The spine: one dotted process running down the label column ----- */
/* Built by about.js from the real anchor boxes, redrawn on resize.
   Desktop only; still (but drawn) under reduced motion. */

main { position: relative; }

.about-spine {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transition: opacity 900ms ease;
}

.about-spine.is-in { opacity: 1; }

/* 7. Off the clock: mono chips -------------------------------------- */

.about-off .chips { margin-top: 22px; }

.chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Inert: they are a list of things, not controls. They press because
   everything on this site that looks pressable presses. */
.chip {
  --raise: 2px;
  --dx: 0px;
  --dy: 0px;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow: var(--raise) var(--raise) 0 0 var(--ink);
  transform: translate(var(--dx), var(--dy));
  transition: transform var(--press-out), box-shadow var(--press-out), background-color 120ms ease;
}

@media (hover: hover) {
  .chip:hover {
    --dx: -1px;
    --dy: -1px;
    box-shadow: calc(var(--raise) + 1px) calc(var(--raise) + 1px) 0 0 var(--ink);
    transition: transform var(--lift), box-shadow var(--lift), background-color 120ms ease;
  }
}

.chip:active {
  --dx: var(--raise);
  --dy: var(--raise);
  box-shadow: 0 0 0 0 var(--ink);
  transition: transform var(--press-in), box-shadow var(--press-in);
}

/* 8. The door ------------------------------------------------------- */

.about-next h2 { max-width: 16ch; margin-bottom: 0.4em; }
.about-next p { color: var(--ink-2); margin-bottom: 26px; }
.about-next .btn-row { gap: 14px 24px; }

/* The last stop on the spine: the door the line arrives at. */
@media (min-width: 880px) {
  .beat--end > .beat-body { grid-column: 2 / -1; }
  .beat--end > .beat-anchor { margin-top: 14px; }
}

/* 9. Motion off ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .shot img, .shot video { transform: none !important; transition: none !important; }
  .shot:not(.duotone) img { filter: none !important; }
  .chip { transition: none !important; }
  .film video { opacity: 1; transition: none !important; }
  .about-spine { transition: none !important; }
}