/* Page contents panel ("Contents") and the prototype's page layout: hybrid website prototype, 21 Oct 2026, as revised
   in the Director's review the same day (assets/js/page-contents.js; report/HYBRID-PROTOTYPE-2026-10-21.md).
   A companion to the reading panel: the same charcoal fill, fine contour and 4px radius as the About text panel
   and the accordion cards, warm-white serif title, and gold only for the rails, numbers, [+] and the current section.
   Wide screens (1280px and up): a sticky panel in the free space left of About's text panel, which every prototype
   page uses; the text panel stays exactly where it is today whenever the screen leaves room for both, and on narrower
   wide screens moves right just enough. Below 1280px: a slim bar above the text, pinned under the navigation,
   showing the current section and opening the list as a dropdown.
   States: closed (only the "Contents" button; the default), expanded, and collapsed (title and current section).
   Without JavaScript the panel is a plain list of links. */

.page-layout { --main-w: 100%; --pc-top: calc(var(--nav-h) + 8px); }
.page-layout--panel { --main-w: 725px; }
@media (min-width: 768px) { .page-layout--panel { --main-w: 680px; } .page-layout--cards { --main-w: 940px; } }
@media (min-width: 1024px) { .page-layout--panel { --main-w: 820px; } }

.page-contents {
  position: relative; z-index: 20; max-width: var(--main-w); margin: 0 auto 28px;
  background: #0b0b0b; border: 1px solid var(--card-line); border-radius: 4px;
}
.page-contents[hidden], .pc-show[hidden] { display: none; }
.pc-head { position: relative; display: flex; align-items: center; }
.pc-toggle {
  display: flex; align-items: center; flex: 1; min-width: 0; min-height: 48px; margin: 0; padding: 0 6px 0 16px;
  border: 0; border-radius: 4px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.pc-title { flex: none; display: inline-flex; align-items: center; color: var(--ink); font: 400 15px/1.2 var(--serif); letter-spacing: .02em; white-space: nowrap; }
/* The panel's title is a gold hamburger (Director, 22 Oct 2026); the word "Contents" stays as its hidden name. */
.pc-title svg { display: block; width: 22px; height: 22px; color: var(--accent); }
.pc-current { flex: 1; min-width: 0; overflow: hidden; color: var(--body); font-size: 15px; line-height: 21px; white-space: nowrap; text-overflow: ellipsis; }
.pc-current:not(:empty)::before { content: ""; display: inline-block; width: 1px; height: 14px; margin: 0 10px 0 12px; background: var(--accent); opacity: .7; vertical-align: -2px; }
/* A card being read shows only its icon tile, lit as in the list (Director, 21 Oct 2026). */
.pc-current.has-icon { display: flex; align-items: center; }
.pc-current.has-icon::before { flex: none; margin: 0 12px; }
.pc-current .pc-tile { width: 32px; height: 32px; border-color: var(--accent); background: var(--accent-wash); }
.pc-current .pc-tile svg { width: 20px; height: 20px; stroke: url(#mp-gold) var(--accent); }
.pc-chevron { flex: none; width: 8px; height: 8px; margin: 0 12px 0 10px; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s ease; }
.page-contents.is-open .pc-chevron { transform: rotate(-135deg) translate(-2px, -2px); }
.pc-hide {
  display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 2px 0 0; padding: 0;
  border: 0; border-radius: 4px; background: none; color: var(--accent); opacity: .75; cursor: pointer; transition: opacity .2s ease;
}
.pc-hide:hover { opacity: 1; }
.pc-hide svg { display: block; width: 16px; height: 16px; }
.pc-toggle:focus-visible, .pc-hide:focus-visible, .pc-show:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* A fine rail runs down the whole list; the current section lights its own stretch of the rail, and its title,
   in gold (Director, 21 Oct 2026). */
.pc-list { margin: 0; padding: 8px 18px 12px 16px; list-style: none; }
.pc-list a {
  display: flex; align-items: baseline; gap: 10px; padding: 7px 0 7px 14px; border-left: 2px solid rgba(255, 255, 255, .1);
  color: var(--body); font-size: 15px; line-height: 21px; text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
.pc-list a:hover { color: var(--ink); border-left-color: rgba(205, 176, 106, .45); }
.pc-list a[aria-current] { color: var(--accent); border-left-color: var(--accent); }
.pc-list a[aria-current] .pc-num { color: var(--accent); }
.pc-list a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Groups (Philosophy "Axes", Services "Service Areas"): the title, with the numbered cards always shown indented
   beneath it on the same rail. The title is warm white while one of its cards is the section being read. */
.pc-sublist a { padding-left: 34px; }
.pc-sublist { margin: 0; padding: 0; list-style: none; }
.pc-group.has-current > .pc-parent:not([aria-current]) { color: var(--ink); }
/* Axes by icon (Director, 21 Oct 2026): under the group title, the six axes stacked one per row, each its gold
   number and a small tile of its card icon, on the rail; the title is the tooltip and, visually hidden, the link's
   name. The tile of the card being read takes the gold contour and wash. */
.pc-list .pc-sublist.pc-icons { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 10px 34px; border-left: 2px solid rgba(255, 255, 255, .1); }
.pc-list .pc-icons a { align-items: center; gap: 12px; width: fit-content; padding: 0; border: 0; color: var(--accent); }
.pc-tile { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--card-line); border-radius: 4px; transition: border-color .2s ease, background-color .2s ease; }
.pc-list .pc-icons a:hover .pc-tile { border-color: var(--accent-line); }
.pc-list .pc-icons a[aria-current] .pc-tile { border-color: var(--accent); background: var(--accent-wash); }
.pc-tile svg { display: block; width: 24px; height: 24px; stroke: var(--ink); transition: stroke .2s ease; }
/* Warm white at rest; the axis being read, and the one under the pointer, in gold (Director, 21 Oct 2026). */
.pc-list .pc-icons a:hover .pc-tile svg, .pc-list .pc-icons a[aria-current] .pc-tile svg { stroke: url(#mp-gold) var(--accent); }
.pc-icons .pc-num { width: 22px; min-width: 22px; color: var(--ink); } /* fixed, so the tiles and titles line up */
.pc-icons li { position: relative; }
/* The icons stand alone at every width (the hover sliders were withdrawn, Director, 21 Oct 2026; on phones and tablets
   too since 22 Oct 2026, where the titles had been printed beside them): the title is visually hidden but stays the
   link's name; under the pointer or keyboard focus the tile turns gold. */
.pc-icons .pc-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pc-list .pc-icons a:hover .pc-tile, .pc-list .pc-icons a:focus-visible .pc-tile { border-color: var(--accent-line); }
.pc-list .pc-icons a:hover .pc-tile svg, .pc-list .pc-icons a:focus-visible .pc-tile svg { stroke: url(#mp-gold) var(--accent); }

/* Tighter, smaller cards from 1024px (Director, 21 Oct 2026): shorter rows, 19px titles (were 24px), smaller number,
   icon and chevron, 10px between cards. An open card's text starts at the card's own padding, in line with its
   number and with the introduction and headings above it in the text panel (Director, 21 Oct 2026; it was indented
   to the card title, which in the narrower text panel left it a narrow strip). */
@media (max-width: 767.98px) { .page-layout .axis-panel-body { padding-left: 18px; padding-right: 18px; } }
@media (min-width: 768px) and (max-width: 1023.98px) { .page-layout { --axis-text-inset: 30px; --axis-text-inset-r: 30px; } }
@media (min-width: 1024px) {
  .page-layout { --axis-text-inset: 24px; --axis-text-inset-r: 24px; }
  .page-layout .axis-card { margin-bottom: 10px; }
  .page-layout .axis-card.is-active { margin-bottom: 0; }
  .page-layout .axis-toggle { grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 16px; padding: 16px 24px; font-size: var(--card-title, 19px); }
  .page-layout .axis-num { min-width: 2.6em; font-size: 13px; }
  .page-layout .axis-icon svg { width: 28px; height: 28px; }
  .page-layout .axis-chevron { width: 9px; height: 9px; }
  .page-layout .axis-panel-body { margin-bottom: 10px; padding: 24px var(--axis-text-inset-r) 26px var(--axis-text-inset); }
  /* The cards fill the text panel's width; every title stays on one line, all of a grid's titles at the shared size
     page-contents.js sets (--card-title, down to 16px) when 19px would not fit. */
  .page-layout .axis-grid .axis-card .axis-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
/* One composition on every page (Director, 21 Oct 2026): the card pages use About's text panel, its sections spaced
   alike (the cards' group heading follows the introduction; Collaboration & Enquiries follows the cards). */
.text-panel .cards-heading + .axis-grid { margin-top: 0; }
/* The cards are h2 elements: inside the panel's prose they keep their own spacing, not the prose headings'. */
.text-panel.prose .axis-card { margin: 0 0 12px; font: inherit; }
.text-panel.prose .axis-card.is-active { margin-bottom: 0; }
@media (min-width: 1024px) { .text-panel.prose .axis-card { margin-bottom: 10px; } .text-panel.prose .axis-card.is-active { margin-bottom: 0; } }
.text-panel .axis-grid + .page-section { margin-top: 52px; }
.text-panel .services-action { margin-top: 8px; text-align: center; }
.pc-num { flex: none; color: var(--accent); font-size: 12px; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.pc-plus { color: var(--accent); white-space: nowrap; }

/* Section headings in the reading column (after Wikipedia's): the serif label of the panel entry over a fine rule,
   which turns gold, fading to the right, while the section is the one marked in the panel. */
.prose .section-heading { position: relative; margin: 0 0 24px; padding-bottom: 12px; color: var(--ink); font: 400 24px/1.2 var(--serif); letter-spacing: .01em; }
.section-heading::before, .section-heading::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; }
.section-heading::before { background: var(--card-line); }
.section-heading::after { background: linear-gradient(90deg, var(--accent), rgba(205, 176, 106, .12)); opacity: 0; transition: opacity .4s ease; }
.page-section.is-current > .section-heading::after { opacity: 1; }
@media (min-width: 768px) { .prose .section-heading { font-size: 27px; } }
.page-section + .page-section { margin-top: 52px; }
/* A section receives focus when chosen in the panel (for screen readers); the gold rule, not an outline, shows it. */
.page-section:focus { outline: none; }

/* Approved English webcopy (22 Oct 2026): elements its pages add to the text panel, in the panel's existing type.
   Sub-headings within a section (Philosophy › Philosophical Orientation);
   an introduction between a card group's heading and its cards; the plain-text Selected References. */
.prose .subsection-heading { margin: 32px 0 14px; color: var(--ink); font: 400 20px/1.3 var(--sans); }
.text-panel .cards-heading > p:last-child { margin-bottom: 28px; }
.prose .references { margin: 0; padding: 0; list-style: none; }
.prose .references li { padding-left: 1.5em; text-indent: -1.5em; text-wrap: pretty; }
.prose .references li + li { margin-top: 12px; }

/* Cards (Philosophy, Services) at full brightness, as released (Director, 21 Oct 2026: the receding cards were
   withdrawn); while one is open, site.css still dims the others slightly. The open card keeps a faint gold glow. */
.js .page-layout .axis-grid .axis-card.is-active .axis-toggle { box-shadow: 0 0 28px rgba(205, 176, 106, .14); }


/* Closed by default (Director, 21 Oct 2026): until page-contents.js runs, a page marked "pc-closed" by the head
   script already shows only the Contents button, so the panel never flashes open. */
.pc-closed .page-contents { display: none; }
.pc-closed .pc-show[hidden] { display: flex; }

/* Erik Haines's links on About (option D, Director, 21 Oct 2026): three outlined buttons in the family of the
   Contact button (gold contour, uppercase label), each with its gold mark; centred under the biography. */
.social-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 40px 0 0; padding: 0; list-style: none; }
.social-button {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 18px 8px 16px;
  border: 1px solid var(--accent-line); border-radius: 4px; background: transparent; color: var(--ink);
  font: 700 13px/1 var(--sans); letter-spacing: .071em; text-transform: uppercase; text-decoration: none;
  transition: border-color .25s ease, background-color .25s ease;
}
.interior .prose a.social-button { color: var(--ink); text-decoration: none; }
.social-button:hover { border-color: var(--accent); background: var(--accent-wash); }
.social-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.social-button svg { display: block; flex: none; width: 17px; height: 17px; stroke-width: 1.9; }
@media (min-width: 768px) { .social-buttons { gap: 14px; } }

/* Without JavaScript: a static box with the list (no controls). */
.page-contents:not(.is-ready) .pc-chevron, .page-contents:not(.is-ready) .pc-hide { display: none; }
.page-contents:not(.is-ready) .pc-toggle { cursor: default; }

/* Reopen button (hidden state): a gold hamburger, without a label (Director, 22 Oct 2026; its accessible name is
   "Contents"). Below 1280px it sits above the text, where the bar was. */
.pc-show {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 0 24px max(0px, calc((100% - var(--main-w)) / 2)); padding: 0;
  border: 1px solid var(--accent-line); border-radius: 4px; background: #0b0b0b; color: var(--ink); cursor: pointer;
  transition: border-color .25s ease, background-color .25s ease;
}
.pc-show:hover { border-color: var(--accent); background: var(--accent-wash); }
.pc-show svg { display: block; width: 22px; height: 22px; color: var(--accent); }

/* ---------- Below 1280px: a bar pinned under the navigation; the list opens as a dropdown ---------- */
@media (max-width: 1279.98px) {
  /* The black shadow above fills the 8px between the navigation and the pinned bar, so no text shows there. */
  .page-contents.is-ready { position: sticky; top: var(--pc-top); box-shadow: 0 -9px 0 #000, 0 10px 24px rgba(0, 0, 0, .7); }
  .page-contents.is-ready .pc-list {
    position: absolute; top: calc(100% + 6px); left: -1px; right: -1px; max-height: min(62vh, 460px); overflow-y: auto; overscroll-behavior: contain;
    background: #0b0b0b; border: 1px solid var(--card-line); border-radius: 4px; box-shadow: 0 14px 30px rgba(0, 0, 0, .75);
  }
  .page-contents.is-ready:not(.is-open) .pc-list { display: none; }
  .page-contents:not(.is-ready) .pc-current { display: none; }
  /* Anchored sections and cards stop below the navigation and the pinned bar (48px + borders). */
  .page-layout:not(.pc-hidden) .page-section, .page-layout:not(.pc-hidden) .axis-card { scroll-margin-top: calc(var(--pc-top) + 50px + 12px); }
  /* Open: a drawer from the left edge, under the navigation (Director, 22 Oct 2026; was a drop-down under the bar).
     The bar becomes the drawer's header, the list fills the rest and the page behind is dimmed; tapping the page,
     Escape, the header or a choice closes it. The bar's place in the page is held, so nothing behind it moves. */
  .page-contents.is-ready.is-open {
    position: fixed; top: var(--nav-h); bottom: 0; left: 0; z-index: 9000; display: flex; flex-direction: column;
    width: min(320px, 86vw); max-width: none; margin: 0; border-width: 0 1px 0 0; border-radius: 0;
    box-shadow: 14px 0 30px rgba(0, 0, 0, .75); animation: pc-drawer .28s ease-out;
  }
  .page-contents.is-ready.is-open .pc-head::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(205, 176, 106, .6), rgba(205, 176, 106, .06)); }
  .page-contents.is-ready.is-open .pc-list {
    position: static; flex: 1; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain;
    padding: 12px 18px 20px 16px; border: 0; border-radius: 0; box-shadow: none;
  }
  .page-layout:has(> .page-contents.is-ready.is-open)::before { content: ""; display: block; height: 78px; } /* the bar (50px) and its margin */
  .page-layout:has(> .page-contents.is-ready.is-open)::after { content: ""; position: fixed; inset: var(--nav-h) 0 0; z-index: 8999; background: rgba(0, 0, 0, .6); }
}
@keyframes pc-drawer { from { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .page-contents.is-ready.is-open { animation: none; } }
@media (max-width: 767.98px) {
  .page-layout:has(> .page-contents.is-ready.is-open)::before { height: 74px; }
  .page-contents { margin-bottom: 24px; }
  .pc-title { font-size: 14px; }
  .pc-current { font-size: 14px; }
}

/* ---------- 1280px and up: two columns ---------- */
@media (min-width: 1280px) {
  .page-layout {
    --pc-w: 240px; --pc-gap: 40px; --pc-top: calc(var(--nav-h) + 28px);
    /* One gap only (inside the first column), so the reading column keeps its full width down to 1280px. */
    display: grid; grid-template-columns: minmax(calc(var(--pc-w) + var(--pc-gap)), 1fr) minmax(0, var(--main-w)) minmax(0, 1fr);
    align-items: start; max-width: none;
  }
  .page-main { grid-column: 2; grid-row: 1; min-width: 0; }
  .page-contents {
    grid-column: 1; grid-row: 1; justify-self: end; position: sticky; top: var(--pc-top); width: var(--pc-w); max-width: none; margin: 0 var(--pc-gap) 0 0;
    max-height: calc(100vh - var(--pc-top) - 28px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(205, 176, 106, .35) transparent;
  }
  .pc-head { align-items: flex-start; padding: 6px 4px 8px 0; }
  .pc-head::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(205, 176, 106, .6), rgba(205, 176, 106, .06)); }
  .pc-toggle { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 6px; min-height: 44px; padding: 14px 0 10px 20px; }
  .pc-title { font-size: 16px; }
  .pc-chevron { grid-column: 2; grid-row: 1; margin: 0 4px 0 12px; }
  .pc-current, .pc-current.has-icon { grid-column: 1 / -1; display: none; white-space: normal; }
  .pc-current:not(:empty)::before { display: none; }
  .page-contents.is-ready:not(.is-open) .pc-current { display: block; }
  .page-contents.is-ready:not(.is-open) .pc-list { display: none; }
  .page-contents.is-ready:not(.is-open) .pc-current:not(:empty) { padding-left: 10px; border-left: 2px solid var(--accent); }
  .page-contents.is-ready:not(.is-open) .pc-current.has-icon { display: flex; }
  .pc-current .pc-tile { width: 44px; height: 44px; }
  .pc-current .pc-tile svg { width: 24px; height: 24px; }
  .pc-hide { margin-top: 2px; }
  .pc-list { padding: 12px 18px 16px 20px; }
  .page-section { scroll-margin-top: calc(var(--nav-h) + 24px); }
  /* Hidden: the reading column returns to its centred position; the reopen button (a hamburger since 22 Oct 2026;
     was an icon and "Contents" label, option H) keeps the column it had, so the reading column does not move. */
  .page-layout.pc-hidden, .pc-closed .page-layout { grid-template-columns: minmax(calc(144px + var(--pc-gap)), 1fr) minmax(0, var(--main-w)) minmax(0, 1fr); }
  .pc-show { grid-column: 1; grid-row: 1; justify-self: end; position: sticky; top: var(--pc-top); margin: 0 var(--pc-gap) 0 0; }
}
@media (min-width: 1536px) {
  .page-layout { --pc-w: 256px; --pc-gap: 44px; }
  .pc-title { font-size: 17px; }
  .pc-list a, .pc-current { font-size: 16px; line-height: 23px; }
}