/* Quill & Compass — the About page. One person, one photograph, one working day.
   Built on tokens.css (the palette firewall) and the Workshop's page furniture in
   tools.css (.qct-hero, .qct-section, .qct-prose, .qct-pitch), so it reads as the same
   site and carries only what is its own: the photo plate and the printed timetable.
   Depth rule as everywhere: flat shapes, hard edges, warm zero-blur offset shadows. */

/* the masthead floats and reserves nothing; this page starts in flow, so it reserves the
   room itself (same as ledger.css and the 404) */
.about{padding-top:var(--qnav-space)}
.about-hero{max-width:60rem;margin:0 auto}
.about-hero h1{max-width:14ch}
.about-hero .qct-hero__lede b{color:var(--ink-900);font-weight:700}

/* ---- the plate: a print held to the sheet at three corners, the fourth free -------
   The mounts are the DARKER stock here: this page is the lighter paper, and a paper-100
   corner on paper-100 was a hairline and nothing else.
   The same object the story page's proof screenshots are mounted in (map.css .plate),
   drawn here rather than shared: the About page loads no stage sheet. */
.about-plate{
  position:relative;max-width:min(52rem,92vw);margin:clamp(1.6rem,4vh,2.8rem) auto 0;padding:9px;
  transform:rotate(-.5deg);
}
/* the mounts hold the PRINT (.about-shot), not the whole figure: on the figure they sat below the
   caption once a real photo was in (27 Sep); -9px = the plate's padding, so the geometry is unchanged */
.about-shot::before{
  content:"";position:absolute;inset:-9px;pointer-events:none;z-index:2;
  background:
    linear-gradient(135deg, var(--paper-300) 0 calc(50% - 1px), rgba(74,51,32,.55) calc(50% - 1px) 50%, transparent 50%) 0 0 / 26px 26px no-repeat,
    linear-gradient(45deg,  var(--paper-300) 0 calc(50% - 1px), rgba(74,51,32,.55) calc(50% - 1px) 50%, transparent 50%) 0 100% / 26px 26px no-repeat,
    linear-gradient(315deg, var(--paper-300) 0 calc(50% - 1px), rgba(74,51,32,.55) calc(50% - 1px) 50%, transparent 50%) 100% 100% / 26px 26px no-repeat;
}
.about-photo,.about-pending{
  display:block;width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover;
  border:1px solid rgba(74,51,32,.32);border-radius:2px;
  box-shadow:5px 6px 0 rgba(28,19,10,.22);
}
/* until the photograph exists: a sheet of the lighter stock with the caption written on it
   in the scribe's hand. It is a placeholder that looks like a decision, not a gap. */
.about-pending{
  display:grid;place-content:center;text-align:center;padding:2rem;
  background-color:var(--paper-100);
  background-image:url('./assets/parchment-grain.svg');background-size:220px 220px;background-blend-mode:multiply;
  color:var(--ink-700);
}
.about-pending__line{font-family:var(--font-display);font-size:clamp(1.7rem,5vw,3rem);line-height:1;color:var(--ink-900);margin:0 0 .6rem}
.about-pending__note{font-family:var(--font-script);font-size:clamp(1.1rem,2.4vw,1.5rem);color:var(--rubric-deep);margin:0}
/* ---- the margin note: "Master Ball, inbound", pointing at the blur ----------------------
   An SVG over the photo in the photo's own pixel space (viewBox = the JPEG's 2000x1333), so it
   scales with the picture. Transforms pivot on the arrow's tip (1068,492) so rotating or scaling
   the note never lifts the tip off the ball. Defaults here; ?tune on localhost overrides them. */
:root{
  /* dialled in by Dave with ?tune, 27 Sep: the ink matches the ball's own purple */
  --about-note-dx:-15px; --about-note-dy:-12px; --about-note-rotate:4deg; --about-note-scale:1.06;
  --about-note-size:58px; --about-note-ink:#6e487f;
}
.about-shot{position:relative}
.about-note{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.about-note__ink{
  transform-origin:1068px 492px;
  transform:translate(var(--about-note-dx),var(--about-note-dy)) rotate(var(--about-note-rotate)) scale(var(--about-note-scale));
}
.about-note__text{font-family:var(--font-script);font-size:var(--about-note-size);fill:var(--about-note-ink)}
.about-note__arrow{fill:none;stroke:var(--about-note-ink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
/* too small to read on a phone: the caption says it there */
@media (max-width:540px){ .about-note{display:none} }

.about-plate figcaption{
  margin:.9rem .2rem 0;font-family:var(--font-body);font-size:.92rem;line-height:1.55;color:var(--ink-soft);
  font-style:italic;max-width:52ch;
}

/* ---- the sections: the Workshop's, plus a heading rule the tools pages don't carry ---- */
.about-section > h2{max-width:22ch}

.about-pitch{margin-bottom:clamp(2rem,6vw,3.4rem)}

@media (max-width:640px){
  .about-plate{transform:none}
}