/* 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);
}
.about-plate::before{
  content:"";position:absolute;inset:0;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%;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}
.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}

/* ---- the working day: a printed timetable, the hours struck in rubric ---------- */
.about-day{list-style:none;margin:0;padding:0;max-width:var(--measure);display:grid;gap:.55rem}
.about-day li{
  display:grid;grid-template-columns:4.2rem 1fr;gap:1rem;align-items:baseline;
  padding:.55rem 0;border-bottom:1px solid rgba(74,51,32,.22);
}
.about-day li:last-child{border-bottom:0}
.about-day b{
  font-family:var(--font-body);font-weight:700;font-size:.82rem;letter-spacing:.1em;
  color:var(--rubric-deep);font-variant-numeric:tabular-nums;
}
.about-day span{font-family:var(--font-body);font-size:1rem;line-height:1.55;color:var(--ink-700)}

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

@media (max-width:640px){
  .about-plate{transform:none}
  .about-day li{grid-template-columns:3.6rem 1fr;gap:.7rem}
}