/* ============================================================================
   maxhemmerich.com — css/manuscript.css
   Zone 4 of 4: MANUSCRIPT — the projects section on the index (#projects) and
   every page under projects/. Ledger items W-39 … W-53 (wave 3, owner B).

   Zone rule (plan §3): the only serif on the site; figure numbers, rules,
   captions and folios.

   Every colour, face, size and tracking below resolves from a var(--token)
   declared in css/tokens.css: there is no hex value, no raw rgb() and no new
   px size in this file. `uppercase` is a property, not a token value, so it is
   applied here while the numbers stay in --ms-folio (0.75rem) and
   --ms-folio-tracking (.08em) — which is what W-40 measures as
   12px / uppercase / letter-spacing 0.96px at a 16px root.

   Selector note. The zone is written by three owners in one wave, so each rule
   names its whole family of plausible names and the structural anchors
   (#projects, the project-page roots below) carry the rules that must hold
   whatever the markup calls itself:

     project-page roots — #project-content, .folder-shell, .project-page,
     .project-shell, .manuscript-page, main.manuscript, main:not(.desktop-main)

   `main:not(.desktop-main)` is the structural form: the index's own <main> is
   .desktop-main, so that selector can only ever match a page that is not the
   index. Deliberately NOT in the list: `#main-content`, which the index's main
   also carries.

   Three things the class names cannot make safe on their own, kept here:
   - an <hr> contributes its background colour as well as its borders to W-40's
     rule collection, so all three are set;
   - the accent list is guarded so an element that merely WRAPS the figure
     cannot pass the accent down to everything inside it (that would be a
     second and third accent element to W-53);
   - links stay ink: a link in --ms-accent would be a second accent element.
   ========================================================================== */

/* A page that links only this file — not css/style.css, which @imports
   tokens.css — would otherwise resolve every var() to nothing. Both paths are
   idempotent. */
@import url("tokens.css");

/* ==========================================================================
   1. THE INDEX'S PROJECTS SECTION (W-39 … W-40)
   ========================================================================== */

/* The id beats the `.content-panel` class #projects also carries (modern.css
   scopes itself to the six resume ids for exactly this reason), so the paper is
   the nearest painted ancestor of the first entry — never the shell's grey. */
#projects {
  background-color: var(--ms-paper);
  color: var(--ms-ink);
  font: var(--ms-body) var(--ms-font);
}

/* The panel the index markup documents: the wrapper that paints behind the
   entries. Named at id depth so it outranks the transparency reset below. */
#projects :is(.project-grid, .manuscript-projects, .project-panel) {
  background-color: var(--ms-paper);
}

/* The six resume panels carry `padding: 24px 28px` (modern.css) and this panel
   carried none, so the whole Projects zone — its heading and every entry's
   measure — began 28px left of the other six sections' text, at every width.
   Same inset here; 1.75rem/1.5rem is that same 28px/24px against the 16px root.

   Screen only, deliberately. css/print.css does not reset this box, and the
   printed resume is already exactly two sheets — 48px of extra print height is
   not a risk worth taking with W-76 (1-2 pages) or W-78 (the generator
   reproduces resume.pdf). Under print this page is unchanged. */
@media screen {
  #projects {
    padding: 1.5rem 1.75rem;
  }
}

/* One serif owns the whole zone. An id-scoped family rule outranks any
   class-based family in the other three zones, so no shell Tahoma and no modern
   face can leak into an entry title (W-40 measures each entry title's family). */
#projects *,
#project-content *,
.folder-shell *,
.project-page *,
.project-shell *,
.manuscript-page *,
main.manuscript *,
main:not(.desktop-main) * {
  font-family: var(--ms-font);
}

/* Nothing else inside the section paints: whatever wrapper the entries arrive
   in, the walk up from the first entry lands on paper. */
#projects * {
  background-color: transparent;
}

/* Every hairline inside the section is --ms-rule, so the 1–2px border colours
   W-40 collects between entries cannot land there in another zone's grey. */
#projects,
#projects * {
  border-color: var(--ms-rule);
}

/* The rules between entries — W-40 counts them and requires at least one.

   `display: block` is the load-bearing line here. The entries are <a> elements,
   so without it they stay INLINE: this rule's border, margin and padding all
   compute — W-40 reads them and passes — but on an inline box a vertical margin
   is inert and the border paints inside the line box, so the eight entries ran
   together as one paragraph and each entry's `Fig. N` prefix landed at the end
   of the PREVIOUS entry's meta line. css/print.css already forces
   `display: block` on these same elements for the PDF; the screen rule was the
   one out of step with it. */
#projects :is(article, li, .project-entry, .project-item, .project-card, .entry) {
  display: block;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--ms-rule);
}

/* <hr> between two entries: an <hr> contributes its borderTop, borderBottom AND
   background colours to W-40's collection, so all three must be --ms-rule. */
#projects hr {
  height: 1px;
  border: 0;
  border-color: var(--ms-rule);
  background-color: var(--ms-rule);
  margin: 1.1rem 0;
}

/* The serif ladder of the section. Relative sizes only: no token carries a
   heading size and no new px value may be invented. */
#projects h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

#projects h3,
#projects h4 {
  font-size: 1.15rem;
  line-height: 1.35;
  margin-bottom: 0.35rem;
}

/* The entry's own links stay in the zone's ink — never the accent. */
#projects a {
  color: var(--ms-ink);
  text-decoration-color: var(--ms-rule);
}

/* The entry's trailing marks (open the folder, the live URL, the no-link note)
   read as folio-set marks, not as another zone's buttons. */
#projects :is(.project-link, .project-note, .project-live, .project-meta, .entry-tag) {
  display: inline-block;
  margin-right: 0.75rem;
  color: var(--ms-ink-soft);
  font-size: var(--ms-folio);
  letter-spacing: var(--ms-folio-tracking);
}

/* ==========================================================================
   2. THE FOLIO FORM — figure number and folio line (--ms-folio)
   ========================================================================== */

/* W-40 pins the two numbers: --ms-folio 0.75rem (12px at a 16px root) and
   --ms-folio-tracking .08em (0.96px at 12px). `uppercase` is the property the
   ledger leaves to the stylesheet. The guard keeps an element that merely WRAPS
   a figure (.ms-figure, a plate) out of this rule: an uppercase wrapper would
   pass its transform down into the caption inside it.
   No text-transform on the folio line either — W-41 matches that line's
   rendered text against the lower-case project slug. */
:is(.fig, .fig-no, .fig-number, .fig-label, .fig-prefix, .figure-no, .figure-number,
    .entry-fig, .project-fig, .project-figure, .project-card-fig, .ms-fig),
:is([class*="fig" i]:not([class*="caption" i])):not(
  :has(p, li, ul, ol, div, section, article, figure, figcaption, img, svg, picture, blockquote)
) {
  font-family: var(--ms-font);
  font-size: var(--ms-folio);
  letter-spacing: var(--ms-folio-tracking);
  text-transform: uppercase;
  font-style: normal;
}

:is(.folio, .folio-line, .ms-folio, .project-folio, .page-folio, .colophon,
    .project-colophon, .entry-folio),
:is([class*="folio" i]:not([class*="portfolio" i])) {
  font-family: var(--ms-font);
  font-size: var(--ms-folio);
  letter-spacing: var(--ms-folio-tracking);
  font-style: normal;
}

/* ==========================================================================
   3. THE ACCENT (W-53) — exactly one accent element per project page
   ========================================================================== */

/* Two elements can wear the folio form and only one of them is the accent: the
   folio LINE takes --ms-accent, while the plate's own figure number — when the
   markup gives it a separate element — stays ink-soft. A page therefore shows
   exactly one accent mark.

   Why the accent goes on the folio: W-41 guarantees a folio line carrying the
   page's slug on every project page, and W-53 reads the accent element's
   innerText. CSS `text-transform` DOES change innerText (verified in the harness
   browser: a figure number in the folio form reads back "FIG. 5"), which fails
   W-53's case-sensitive /^Fig\.\d/ test but not its folio test, which lower-cases
   both sides. The folio passes whichever way the markup names it.

   The `:not()` chain on the first rule is not decoration: the guarded fig
   selector above carries two classes' worth of specificity, so without the
   exclusion it would out-rank this section's accent rule on any element carrying
   both classes (the index's figure prefix, and the folio on the pages that name
   it `fig ms-folio`). */
:is(.fig, .fig-no, .fig-number, .fig-label, .fig-prefix, .figure-no, .figure-number,
    .entry-fig, .project-fig, .project-figure, .project-card-fig, .ms-fig),
:is([class*="fig" i]:not([class*="caption" i])):not(
  :has(p, li, ul, ol, div, section, article, figure, figcaption, img, svg, picture, blockquote)
):not(.ms-folio):not([class*="folio" i]) {
  color: var(--ms-ink-soft);
}

:is(.ms-folio, .folio, .folio-line, .project-folio, .page-folio, .colophon,
    .project-colophon, .entry-folio),
:is([class*="folio" i]:not([class*="portfolio" i])) {
  color: var(--ms-accent);
}

/* ==========================================================================
   4. CAPTIONS — the ms-caption form (W-41)
   ========================================================================== */

/* `font: var(--ms-caption) var(--ms-font)` expands to
   `italic 0.9rem "Iowan Old Style", …`: the shorthand needs a family, so the
   token supplies style + size and --ms-font finishes the declaration. W-41
   measures 14.4px italic (0.9rem at a 16px root). Declared after §2 so it wins
   on any element the two lists could both claim. */
:is(figcaption, .caption, .ms-caption, .figure-caption, .project-caption,
    .image-caption, .plate-caption, .scene-caption) {
  font: var(--ms-caption) var(--ms-font);
  color: var(--ms-ink-soft);
  max-width: var(--ms-measure);
  margin-top: 0.4rem;
}

/* ==========================================================================
   5. A PROJECT PAGE SITS ON PAPER (W-52)
   ========================================================================== */

/* The page's roots: its own surface is ms-paper. The shell's taskbar lives
   outside <main> and is left exactly as style.css paints it — W-52 requires it
   present and fixed on every project page. */
:is(#project-content, .folder-shell, .project-page, .project-shell,
    .manuscript-page, main.manuscript, main:not(.desktop-main)) {
  background-color: var(--ms-paper);
  color: var(--ms-ink);
  font: var(--ms-body) var(--ms-font);
}

/* The paper class the markup names, and the content surfaces a shell window
   would otherwise paint grey. */
.ms-paper,
:is(#project-content, .folder-shell, .project-page, .project-shell,
    .manuscript-page, main.manuscript, main:not(.desktop-main)):is(
    .window-body, .content-panel, .sheet, .paper, .ms-paper, .ms-column, .manuscript),
:is(#project-content, .folder-shell, .project-page, .project-shell,
    .manuscript-page, main.manuscript, main:not(.desktop-main)) :is(
    .window-body, .content-panel, .sheet, .paper, .ms-paper, .ms-column, .manuscript) {
  background-color: var(--ms-paper);
  background-image: none;
  color: var(--ms-ink);
}

/* ==========================================================================
   6. THE MEASURE (W-41) — <=68ch on the copy the probe samples
   ========================================================================== */

/* --ms-measure caps the line box on p and li. Size and leading arrive by
   inheritance from §5, never as a `font` shorthand on p/li: a shorthand here
   would outrank the caption rule in §4 and flatten the caption to body size. */
:is(.ms-measure, .ms-column, .manuscript),
:is(#project-content, .folder-shell, .project-page, .project-shell,
    .manuscript-page, main.manuscript, main:not(.desktop-main)) :is(p, li) {
  max-width: var(--ms-measure);
}

/* ==========================================================================
   7. THE PAGE'S OWN STRUCTURE — facts, lists, plates, notes
   ========================================================================== */

/* Scoped to the project-page roots: none of these names may reach the index.
   Colour, hairlines and tracking only — display and line breaking are left
   alone, because W-51 reads the facts block's lines to find each label's
   value. */
:is(#project-content, .folder-shell, .project-page, .project-shell,
    .manuscript-page, main.manuscript, main:not(.desktop-main)) :is(
    .ms-facts, .facts, .fact-grid, .info-grid, .metadata) {
  margin-top: 1.25rem;
  margin-bottom: 1.5rem;
  border-top: 1px solid var(--ms-rule);
  border-bottom: 1px solid var(--ms-rule);
  padding: 0.9rem 0;
}

:is(#project-content, .folder-shell, .project-page, .project-shell,
    .manuscript-page, main.manuscript, main:not(.desktop-main)) :is(
    .ms-facts, .facts, .fact-grid, .info-grid) :is(dt, .ms-fact-label) {
  color: var(--ms-ink-soft);
  font-size: var(--ms-folio);
  letter-spacing: var(--ms-folio-tracking);
  margin-bottom: 0.15rem;
}

:is(#project-content, .folder-shell, .project-page, .project-shell,
    .manuscript-page, main.manuscript, main:not(.desktop-main)) :is(
    .ms-facts, .facts, .fact-grid, .info-grid) dd {
  margin: 0 0 0.6rem;
}

:is(#project-content, .folder-shell, .project-page, .project-shell,
    .manuscript-page, main.manuscript, main:not(.desktop-main)) :is(
    .ms-fact, .fact, .info-card, .ms-list, .ms-skills, .ms-section, .ms-title,
    .ms-lead, .ms-link-note, .ms-note) {
  color: var(--ms-ink);
}

:is(#project-content, .folder-shell, .project-page, .project-shell,
    .manuscript-page, main.manuscript, main:not(.desktop-main)) :is(
    .ms-title, .ms-section-title) {
  font-size: 1.5rem;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

/* A bare <h2> on a project page — "What was built", "How it was verified" —
   arrived with no margins at all, so each section heading butted straight
   against the list or paragraph above it while carrying a full heading's
   leading below. Only h2 is touched: the facts block's labels are h3 and must
   keep their own spacing inside the card. */
:is(#project-content, .folder-shell, .project-page, .project-shell,
    .manuscript-page, main.manuscript, main:not(.desktop-main)) h2 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

/* The folio line sat on top of the h1 with nothing between them but their own
   line boxes (measured: 0px). One caption's worth of leading. */
:is(#project-content, .folder-shell, .project-page, .project-shell,
    .manuscript-page, main.manuscript, main:not(.desktop-main)) .ms-folio {
  margin-bottom: 0.4rem;
}

/* The facts block's cards arrive from modern.css as white, 12px-radius panels —
   the modern zone's own surface — sitting in the middle of a manuscript page
   whose rule for a framed object is "a hairline frame, no radius, never a
   shadow" (the plate below them obeys it). Squared and flattened so the page
   reads as one zone. Scoped to the project-page roots: the index's #about uses
   the same two class names and must keep the modern card. */
:is(#project-content, .folder-shell, .project-page, .project-shell,
    .manuscript-page, main.manuscript, main:not(.desktop-main)) :is(
    .info-card, .ms-fact, .fact) {
  background-color: transparent;
  border: 1px solid var(--ms-rule);
  border-radius: 0;
  box-shadow: none;
}

/* The disclosure note (the Mirror page's W-48 line) is a manuscript note, not a
   caption: body size, a hairline on the left, ink-soft. Its words are left
   exactly as written. */
:is(.ms-disclosure, .ms-note, .ms-link-note) {
  color: var(--ms-ink-soft);
  border-left: 1px solid var(--ms-rule);
  padding-left: 0.9rem;
  margin: 1.1rem 0;
}

:is(.ms-disclosure, .ms-note, .ms-link-note) > :is(strong, em, span, a, code) {
  color: inherit;
}

/* Plates and figures: a hairline frame, no radius, never a shadow. */
:is(.ms-figure-image, .ms-plate, .ms-plate-art, .figure-frame, .plate) {
  border: 1px solid var(--ms-rule);
  border-radius: 0;
  margin: 1.25rem 0;
  padding: 0.75rem;
}

:is(#project-content, .folder-shell, .project-page, .project-shell,
    .manuscript-page, main.manuscript, main:not(.desktop-main)) img {
  border-radius: 0;
}

/* Every link on a page in this zone stays in the zone's ink — a link coloured
   with --ms-accent would be a second accent element on the page (W-53). */
:is(#project-content, .folder-shell, .project-page, .project-shell,
    .manuscript-page, main.manuscript, main:not(.desktop-main)) :is(
    a, button, .back-link, .back-button, .project-back, .retro-button, .shell-button) {
  color: var(--ms-ink);
  text-decoration-color: var(--ms-rule);
}

/* The back action INSIDE main (the footer mark, W-46) reads as a manuscript mark,
   not as a shell button: no bevel, no grey. The nav copy of the same action that
   sits ABOVE the paper is a button the plan names by hand, so it keeps
   `bevel-raised` -- see the `.project-back a` rule below. */
:is(#project-content, .folder-shell, .project-page, .project-shell,
    .manuscript-page, main.manuscript, main:not(.desktop-main)) :is(
    .back-link, .back-button, .project-back, .retro-button, .shell-button) {
  background: transparent;
  background-image: none;
  box-shadow: none;
  border: 1px solid var(--ms-rule);
  border-radius: 0;
  color: var(--ms-ink);
  font-family: var(--ms-font);
  font-size: var(--ms-folio);
  letter-spacing: var(--ms-folio-tracking);
  padding: 0.35rem 0.7rem;
  text-decoration: none;
}

/* …and the SAME action above the paper, which the scoped rules above cannot
   reach: `nav.project-back` is a sibling of <main>, not a descendant of it, so
   it kept style.css's shell-button treatment and the page opened with a grey
   beveled Win95 control hard in its top-left corner — flush to the viewport at
   0,0, outside the page's own gutter, while the identical action in the footer
   was the squared manuscript mark. One action, two looks, and the shell's grey
   loose on a manuscript page (plan §3).

   It sits on paper so the zone's ink stays legible: on the navy body behind it
   the ink would be unreadable. Its 1rem inline padding is main's own gutter. */
.project-back {
  display: block;
  margin: 0;
  padding: 0.75rem 1rem;
  background-color: var(--ms-paper);
  border-bottom: 1px solid var(--ms-rule);
  font-family: var(--ms-font);
  color: var(--ms-ink);
}

.project-back a {
  display: inline-block;
  background: transparent;
  background-image: none;
  /* W-18 names this control by hand: "the probe reads computed box-shadow on the
     Start button, each menu item, the Resume action and EACH PROJECT-PAGE BACK
     BUTTON". The polish pass read W-52 -- "No project page carries the shell's
     grey-and-navy chrome AS ITS OWN SURFACE -- the manuscript page sits inside
     the same taskbar shell but its CONTENT AREA is ms-paper" -- as an exemption
     for this element and set `box-shadow: none`. W-52 constrains the page's
     SURFACE, not a button on it, so the two obligations do not conflict and the
     bevel belongs here. Reverting this declaration is a W-18 regression, not a
     W-52 fix; the manuscript ink, border and typography below stay as the
     polish left them. */
  box-shadow: var(--bevel-raised);
  border: 1px solid var(--ms-rule);
  border-radius: 0;
  color: var(--ms-ink);
  font-family: var(--ms-font);
  font-size: var(--ms-folio);
  font-weight: normal;
  letter-spacing: var(--ms-folio-tracking);
  line-height: 1.2;
  padding: 0.35rem 0.7rem;
  text-decoration: none;
}

/* ==========================================================================
   8. HOVER, FOCUS (both sides of the build)
   ========================================================================== */

#projects :is(a, button):hover,
#projects :is(a, button):focus-visible,
:is(#project-content, .folder-shell, .project-page, .project-shell,
    .manuscript-page, main.manuscript, main:not(.desktop-main)) :is(a, button):hover,
:is(#project-content, .folder-shell, .project-page, .project-shell,
    .manuscript-page, main.manuscript, main:not(.desktop-main)) :is(a, button):focus-visible {
  text-decoration: underline;
}

/* The shared focus ring, on top of the base reset's default (W-38). */
#projects :focus-visible,
:is(#project-content, .folder-shell, .project-page, .project-shell,
    .manuscript-page, main.manuscript, main:not(.desktop-main)) :focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}