/* ============================================================
   SITE LAYER — loaded AFTER report-light.css
   Adds only what a site needs and a report does not: a masthead,
   a plain-text nav, a dated index list, and the gated marker.
   No cards, no shadows, no rounded corners. The page is a page.
   ============================================================ */

/* ---- masthead ------------------------------------------------
   A rule, a name, a line of nav. Nothing else. The 2000s-web
   part of the brief: the header is not a component, it is a
   heading with a line under it.                               */
.masthead { margin-top:3.5rem; padding-bottom:.6rem;
  border-bottom:1px solid #111; display:flex; flex-wrap:wrap;
  align-items:baseline; justify-content:space-between; gap:1rem;
  width:55%; }
@media (max-width:760px){ .masthead{ width:100%; } }

.masthead .wordmark { font-size:1.35rem; letter-spacing:.02em; }
.masthead .wordmark a { text-decoration:none; background:none; color:#111; }
.masthead nav { font-size:1.05rem; }
.masthead nav a { margin-left:1.1rem; }
.masthead nav a:first-child { margin-left:0; }
.masthead nav a[aria-current="page"] { background:none; color:#111;
  border-bottom:1px solid #111; }

/* ---- standfirst: the one paragraph that says what this is --- */
.standfirst { font-size:1.5rem; line-height:1.5; margin-top:2.2rem; }

/* ---- index list ---------------------------------------------
   An academic's publication list, not a grid of cards. Date in
   old-style figures on the left, title carrying the link.      */
.indexlist { width:55%; margin-top:1.4rem; }
@media (max-width:760px){ .indexlist{ width:100%; } }
.indexlist td { padding:.55rem .8rem .55rem 0; vertical-align:baseline; }
.indexlist td.when { font-family:et-book-roman-old-style; white-space:nowrap;
  color:#555; width:7.5rem; }
.indexlist td.what { padding-right:0; }
.indexlist .blurb { display:block; font-size:1.15rem; color:#444;
  margin-top:.15rem; line-height:1.4; }

/* ---- the gated marker ---------------------------------------
   THE single amber signal on the public pages. It marks the one
   boundary that matters on this site: where the open research
   stops and the named positions begin. Nothing else on a public
   page is allowed to use it.                                  */
.locked:after { content:" \00b7 gated"; color:#8a5d0f;
  font-family:et-book-roman-old-style; font-size:.9em; letter-spacing:.02em; }

/* ---- colophon ---- */
.colophon { width:55%; margin:4.5rem 0 5rem; padding-top:1rem;
  border-top:1px solid #ddd8c6; font-size:1.1rem; color:#555; }
@media (max-width:760px){ .colophon{ width:100%; } }
.colophon p { font-size:1.1rem; width:100%; }

/* ============================================================
   TABLES
   report-light.css right-aligns every cell and sets nowrap,
   which is correct for a financial exhibit and wrong for every
   list on this site. Anything with prose in it opts out here.
   ============================================================ */
.indexlist td, .structure td, .datatable td, .datatable th {
  text-align:left; white-space:normal; vertical-align:top; }

/* The house data table: left-aligned, one hairline per row, first
   column carries the label in bold. Same shape as the Avexo
   pages, so the two sites read as one hand.                   */
.datatable { width:90%; max-width:90%; border-collapse:collapse;
  border-top:2px solid #111; border-bottom:2px solid #111;
  font-size:1.15rem; margin:1.4rem 0 1rem; }
.datatable th { border-bottom:1px solid #111; font-style:normal;
  font-family:et-book-roman-old-style; font-size:1rem; letter-spacing:.08em;
  text-transform:uppercase; color:#7a7565; padding:.4rem .9rem .4rem 0; }
.datatable td { padding:.75rem .9rem .75rem 0;
  border-bottom:1px solid #ece7d6; line-height:1.5; }
.datatable tr:last-child td { border-bottom:none; }
.datatable td.label { font-weight:700; width:11rem; }
.datatable td.note { color:#555; font-size:1.05rem; }

/* Mobile: a three-column table of prose is unreadable at 375px,
   so each row becomes a stacked block with the label on top.  */
@media (max-width:760px){
  .datatable { width:100%; max-width:100%; font-size:1.1rem; }
  .datatable thead { display:none; }
  .datatable tr { display:block; border-bottom:1px solid #ddd8c6;
    padding:.9rem 0; }
  .datatable tr:last-child { border-bottom:none; }
  .datatable td { display:block; padding:0 0 .35rem; border-bottom:none; }
  .datatable td.label { width:auto; font-family:et-book-roman-old-style;
    letter-spacing:.06em; text-transform:uppercase; font-size:1rem;
    font-weight:400; color:#7a7565; }
}

/* ============================================================
   FRAMEWORK GRID
   The four-dimension overview. Hairline-ruled panes, no radius,
   no shadow, no accent bar. Panes size to their own content
   rather than stretching to the tallest in the row, because a
   four-item pane next to a five-item pane was leaving a block
   of dead paper under the shorter one.
   ============================================================ */
.framework { width:90%; margin:1.8rem 0 1.2rem;
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid #ddd8c6; }
@media (max-width:760px){ .framework{ width:100%; grid-template-columns:1fr; } }
.framework .pane { background:#fffff8; padding:1.5rem 1.6rem 1.4rem;
  border-right:1px solid #ddd8c6; border-bottom:1px solid #ddd8c6; }
.framework .pane:nth-child(2n) { border-right:none; }
.framework .pane:nth-last-child(-n+2) { border-bottom:none; }
@media (max-width:760px){
  .framework .pane { border-right:none; }
  .framework .pane:nth-last-child(-n+2) { border-bottom:1px solid #ddd8c6; }
  .framework .pane:last-child { border-bottom:none; }
}

.framework .kicker { font-family:et-book-roman-old-style; font-size:1.15rem;
  letter-spacing:.09em; text-transform:uppercase; color:#7a7565; }
.framework h3 { font-size:1.75rem; font-style:normal; font-weight:400;
  margin:.3rem 0 .9rem; line-height:1.2; }
.framework ul { list-style:none; width:100%; max-width:100%;
  margin:0; padding:0; -webkit-padding-start:0; }
.framework li { font-size:1.2rem; line-height:1.45; color:#2a2a2a;
  padding-left:1.05rem; text-indent:-1.05rem; margin:0 0 .5rem; width:100%; }
.framework li:last-child { margin-bottom:0; }
.framework li:before { content:"\2013\00a0"; color:#9a9484; }

/* A note under the grid. Rule on top only, so it reads as a
   footnote to the grid rather than a fifth pane.              */
.notebox { width:90%; margin:0 0 1rem; padding:1.1rem 0 0;
  border-top:1px solid #ddd8c6; }
@media (max-width:760px){ .notebox{ width:100%; } }
.notebox .kicker { font-family:et-book-roman-old-style; font-size:1.05rem;
  letter-spacing:.09em; text-transform:uppercase; color:#7a7565; }
.notebox p { width:100%; font-size:1.15rem; margin-top:.4rem; }

/* ---- structure list: what lives where on this site ---------- */
.structure { width:80%; margin:1.2rem 0; border-top:none; border-bottom:none; }
@media (max-width:760px){ .structure{ width:100%; } }
.structure td { padding:.55rem 1.2rem .55rem 0; font-size:1.2rem; }
.structure td.what { width:13rem; }
.structure td.why { color:#444; font-size:1.15rem; }
@media (max-width:760px){
  .structure tr { display:block; margin-bottom:.9rem; }
  .structure td { display:block; padding:0 0 .2rem; }
  .structure td.what { width:auto; }
}

/* ============================================================
   PICKS FILTER
   Two plain selects above the index. No library, no fetch: the
   rows are already in the page and the filter only toggles
   display, so it works with the page served straight out of
   StaticCrypt's decrypt step.
   ============================================================ */
.filters { display:flex; gap:1.6rem; flex-wrap:wrap; align-items:baseline;
  width:90%; margin:1.6rem 0 .4rem; padding-bottom:1rem;
  border-bottom:1px solid #ddd8c6; }
@media (max-width:760px){ .filters{ width:100%; } }
.filters label { font-family:et-book-roman-old-style; font-size:1rem;
  letter-spacing:.09em; text-transform:uppercase; color:#7a7565;
  margin-right:.5rem; }
.filters select { font-family:et-book-roman-old-style; font-size:1.15rem;
  background:#fffff8; color:#111; border:none;
  border-bottom:1px solid #111; padding:.15rem 1.4rem .15rem .1rem;
  border-radius:0; -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#111 50%),
                   linear-gradient(135deg,#111 50%,transparent 50%);
  background-position:calc(100% - 9px) .62em, calc(100% - 4px) .62em;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
.picks { width:90%; max-width:90%; border-collapse:collapse;
  border-top:none; border-bottom:2px solid #111; margin-top:0; }
@media (max-width:760px){ .picks{ width:100%; max-width:100%; } }
.picks td { text-align:left; white-space:normal; vertical-align:top;
  padding:.9rem .9rem .9rem 0; border-bottom:1px solid #ece7d6; }
.picks td.when { font-family:et-book-roman-old-style; color:#7a7565;
  width:6.5rem; white-space:nowrap; font-size:1.05rem; }
.picks td.what a { font-size:1.3rem; }
.picks .blurb { display:block; font-size:1.1rem; color:#555; margin-top:.2rem; }
.picks td.verdict { width:8rem; text-align:right; white-space:nowrap;
  font-family:et-book-roman-old-style; font-size:1.05rem;
  letter-spacing:.07em; text-transform:uppercase; color:#8a5d0f; }
.picks tr.empty td { color:#777; font-style:italic; }
@media (max-width:760px){
  .picks tr { display:block; padding:.8rem 0; border-bottom:1px solid #ddd8c6; }
  .picks td { display:block; padding:0 0 .25rem; border-bottom:none; }
  .picks td.when, .picks td.verdict { width:auto; text-align:left; }
}

/* Research list reuses the data table; the blurb sits under the
   title rather than in its own column. */
.datatable .blurb { display:block; color:#555; font-size:1.05rem;
  margin-top:.25rem; line-height:1.5; }

/* ============================================================
   PAGE GUTTER
   report-light.css indents the whole body 12.5% to leave a wide
   Tufte margin. On a site page that reads as a slab of dead
   paper down the left, so it is halved here. The sidenote gutter
   on the right is untouched, since the notes still live in it.
   ============================================================ */
body { padding-left:6.25%; width:93.75%; }
@media (max-width:760px){ body { padding-left:8%; width:92%; } }