/* restyle */
/* ---------------------------------------------------------------- the header
   Two changes ship together here, and they are separable in principle but not
   in practice: the menu became topic-first (seven items, not three) and the
   whole site took the "Pixel" visual treatment - hard 2px edges and solid
   offset shadows instead of blurs.

   This block is appended AFTER the shared chrome sheet on every page, so it
   overrides by source order and the shared sheet does not have to be touched.
   That matters: the shared sheet is content-hashed and referenced by 127
   documents. */

/* ---- the masthead, rebuilt as the Pixel mockup has it.
   Two goes at this. The first kept the existing structure - a green gradient
   field with a capsule floating on it - and merely hardened its edges. That was
   wrong, and the mockup says so plainly: `.nav{background:var(--bg)}` with
   `.brand` in the display face at ink colour. The Pixel masthead is a LIGHT
   BAR. Dark type on paper, one row, one hard rule underneath, and the only
   colour is the action.

   So the field goes to paper, the capsule stops being a capsule (no fill, no
   border, no shadow, no blur), and the whole bar gets a 3px ink bottom edge -
   which is also what separates it from a dark hero band on the tool pages,
   where the old glass capsule used to dissolve into the gradient behind it.

   Layout is still untouched. The grid, the areas and all four breakpoints in
   the shared sheet do the arranging; this only changes colour and edge. */
.sitenav{background:#FBF9F3;box-shadow:none;border-bottom:3px solid #16211B;
  padding:0}
.sitenav-in{background:none;border:0;border-radius:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
  padding:13px 26px;max-width:1180px}
@media (min-width:1500px){.sitenav-in{max-width:1320px}}
@media (min-width:1900px){.sitenav-in{max-width:1560px}}
.sitenav-wordmark{color:#16211B}
.sitenav-sub{color:#7C766A}
/* the mark becomes a tile. It is already pixel art; an edge stops it floating
   on the paper like a sticker. */
.sitenav-fig{border:2px solid #16211B;border-radius:5px;background:#fff}
/* the gold outline was invisible on paper */
.sitenav-top:focus-visible,.sitenav-mark:focus-visible,
.sitenav-cta:focus-visible{outline:3px solid #16211B;outline-offset:2px}

/* Seven buttons will not fit a three-column grid. A wrapping flex row does,
   and on a phone it becomes a single scrollable line rather than three stacked
   rows of stubs. */
.sitenav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;
  background:none;border:0;border-radius:0;padding:0;max-width:none}
/* plain text, as the mockup has it - no track, no pills at rest. The menu is
   type until you touch it. */
.sitenav-top{font-size:14px;font-weight:700;padding:8px 11px;border-radius:8px;
  min-height:38px;white-space:nowrap;overflow:visible;text-overflow:clip;flex:0 0 auto;
  border:2px solid transparent;color:#4A4437;background:none}
.sitenav-top:after{opacity:.45}
.sitenav-top:hover{background:#F0EADA;color:#16211B}
/* the open one: solid, bordered, offset - the same three moves as every other
   raised thing on the site, so "current" reads without needing a colour rule */
.sitenav-top.on{background:#F6C560;color:#16211B;border-color:#16211B;
  box-shadow:2px 2px 0 #16211B}
.sitenav-top.on:hover{background:#FFD57A}
.sitenav-cta{border:2px solid #16211B;border-radius:10px;
  box-shadow:3px 3px 0 #16211B;color:#16211B}
.sitenav-cta:hover{background:#FFD57A}
.sitenav-cta:active{transform:translate(3px,3px);box-shadow:0 0 0 #16211B}
.sitenav-cta img{border:0}
/* the panel now hangs off a light bar, so it needs its own separation */
.navpanel{top:calc(100% + 3px)}

/* The page qualifier that _dev/breadcrumbs.py re-homes into the masthead
   ("For practicum students and new associates · California") was written for
   the dark bar: rgba(255,255,255,.74) on rgba(255,255,255,.07). On paper it is
   invisible - it rendered as a ghost row under the wordmark, present in the DOM
   and unreadable on screen. Every colour a dark-theme rule set has to be
   restated when the surface flips. */
.bcrq{color:#5E5A50;background:#F0EADA;border:2px solid #16211B;
  border-radius:999px;padding:4px 12px 3px;font-weight:600;
  grid-column:1/-1;justify-self:start;margin:2px 0 0}

/* Seven labels need ~670px and the three-column grid was giving the middle
   column 552px on any page carrying that qualifier, so the row wrapped and the
   masthead grew to two lines. The tagline is decorative and white-space:nowrap,
   which makes it - not the wordmark - the thing setting the left column's
   width. Dropping it below 1250px buys back ~110px, and a slightly tighter pill
   buys the rest.

   The larger cause was subtler and is fixed above: `.bcrq` is a grid item, and
   at 402px of content it was setting the width of column ONE - the column the
   wordmark lives in - which squeezed the nav column to 552px against the ~670px
   the seven labels need. Spanning it across all columns on its own row lets
   column one shrink back to the mark. The wrap only ever appeared on pages
   carrying that qualifier, which is why the home page looked fine. */
@media (max-width:1250px){
  .sitenav-sub{display:none}
  .sitenav-top{font-size:13.5px;padding:8px 9px}
}
@media (max-width:1180px){
  .sitenav-top{font-size:12px;padding:7px 8px}
}
/* 901-1080 is the band where the seven labels total ~580px against ~550px of
   room, so the row wrapped and the masthead grew to 134px - measured at 1000,
   which is where an iPad in landscape sits. The chevron is decorative (the
   panel opens either way) and costs ~10px per item; dropping it is worth 70px
   and buys the single row back. Below 900 the row scrolls and it does not
   matter. */
@media (max-width:1080px) and (min-width:901px){
  .sitenav-top{font-size:11.8px;padding:7px 7px}
  .sitenav-top:after{display:none}
  /* Dropping the chevron alone bought back 1000px but not 960. The tagline is
     white-space:nowrap, so it - not the wordmark - sets the lockup's minimum
     width, and it is the widest thing in the left column. The shared sheet
     already hides it below 860 for exactly this reason; a seven-item menu
     moves that threshold up. Same for the newsletter label, which has a short
     form already in the markup waiting to be used. */
  .sitenav-sub{display:none}
  .sitenav-cta .long{display:none}
  .sitenav-cta .short{display:inline}
}
/* Below the point where the bar stacks, the seven become one scrolling line.
   flex-wrap:wrap would give three ragged rows and a 130px-tall header. */
@media (max-width:900px){
  .sitenav-links{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity}
  .sitenav-links::-webkit-scrollbar{display:none}
  .sitenav-top{scroll-snap-align:start}
  /* the affordance. Seven items do not fit 390px and four of them are off the
     right edge; a hard clip reads as "that is all there is". Fading the last
     18px says there is more without adding a control. */
  .sitenav-links{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent)}
}

/* ---- the panel. One group at a time, so a menu holding 36 destinations never
   shows more than nine. The promo card is outside the groups and always on. */
.navpanel{grid-template-columns:minmax(0,1fr) 250px;gap:20px;
  border:3px solid #16211B;border-radius:16px;
  box-shadow:8px 8px 0 rgba(22,33,27,.9);padding:18px}
.np-col{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:2px 14px;align-content:start}
.np-col[hidden]{display:none}
/* the label spans the sub-columns rather than sitting in the first of them */
.np-col h5{grid-column:1/-1;margin:0 0 8px;font-size:9.5px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:#16211B;
  background:#F6C560;border:2px solid #16211B;border-radius:999px;
  padding:4px 10px 3px;justify-self:start}
.np-col a{border:2px solid transparent;border-radius:10px}
.np-col a:hover{background:#F4F0E6;border-color:#16211B}
/* the hub link that closes each topic column */
.np-hub{grid-column:1/-1;justify-self:start;margin-top:8px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;font-weight:700;
  letter-spacing:.04em;text-decoration:none;color:#16211B;
  border:2px solid #16211B;border-radius:999px;padding:7px 13px;
  box-shadow:2px 2px 0 #16211B;background:#fff}
.np-hub:hover{background:#F6C560}
.np-promo{border:2px solid #16211B;box-shadow:4px 4px 0 #16211B}
/* The five topic hubs carry their own stylesheet, and it styles bare `b` and
   `p`. Inside the menu that meant entry titles turned pine and the promo
   card's paragraph inherited the hub's 17px body size in a dark card - grey on
   near-black, at a size that pushed the button out of the card. The menu has
   to look identical on all 132 pages, so it restates what it needs rather than
   trusting what it inherits. */
.np-col b{color:#16211B}
.np-promo p{margin:7px 0 11px;font-size:11.5px;line-height:1.55;
  color:rgba(255,255,255,.72);text-align:center;max-width:none}
.navpanel .np-promo b{letter-spacing:-.02em;font-family:'Bricolage Grotesque',
  Fraunces,serif;font-weight:800;font-size:16px}
.np-promo .np-all{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:9.6px;letter-spacing:.13em;text-transform:uppercase;opacity:.62;
  margin-bottom:7px}
.np-promo span:last-child{border:2px solid #16211B;box-shadow:2px 2px 0 #16211B}
@media (max-width:820px){
  .navpanel{grid-template-columns:minmax(0,1fr)}
  .np-col{grid-template-columns:minmax(0,1fr)}
}
/* A phone cannot show 250px of promo card under nine links without burying it,
   and the panel is already scrollable there. */
@media (max-width:640px){
  .navpanel{max-height:70vh;overflow-y:auto;box-shadow:5px 5px 0 rgba(22,33,27,.9)}
}


/* ------------------------------------------------------- wide screens
   Reported as "width still wrong", and it was. Measured on the job advisor at
   2100 CSS px: the section container is 1560px and correct, but the content
   inside it is pinned by two fixed widths that predate the wide container -

     .jobs.solo   grid-template-columns: minmax(0,720px)   -> 780px of the card empty
     .fgrid       max-width:420px, as an INLINE STYLE      -> two 205px columns

   so a reader on a 27-inch monitor gets a 720px column of tool inside a 1560px
   card. The caps were right when the container was 1120px; they were never
   re-measured when _dev/widen.py lifted it to 1560 at 1900px.

   Released above 1400px only, so every width that was signed off stays exactly
   as it was. The inline style needs !important - nothing else outranks an
   attribute. Prose is deliberately NOT touched: the 58ch measure is a reading
   decision, not a leftover, and a 1500px line of body copy is worse than an
   empty half-card.

   How far to open it is its own judgement. Taking .jobs.solo all the way to
   1320px did fill the card and gave a 1,200px-wide <select>, which is worse
   than the empty space it fixed - a control should not be four times wider
   than the longest option in it. These numbers are the point where the card
   reads as full and the fields still read as fields. */
@media (min-width:1400px){
  .jobs.solo{grid-template-columns:minmax(0,1000px)}
  .fgrid[style]{max-width:820px !important}
  .fgrid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
}
@media (min-width:1800px){
  .jobs.solo{grid-template-columns:minmax(0,1120px)}
  .fgrid[style]{max-width:920px !important}
}

/* ---------------------------------------------------------------- the footer
   Restyled, and cut. It carried 48 links in five columns, 21 of them in a
   single "Browse" list that ran past the fold - the screenshot that prompted
   this is a wall of blue-grey text with no shape to it.

   Nothing is lost to a crawler. Every one of the 36 deep pages is in the
   mega-panel in the HEADER of all 133 pages, so they keep a sitewide internal
   link; what the footer now carries is the five topic hubs and the three
   indexes, which is the structure a crawler should see repeated, not the leaf
   list. Fewer, better-targeted repeated links is the stronger position. */
.sitefoot{border-top:4px solid #16211B}
.sitefoot h5{color:#16211B;background:#F6C560;border:2px solid #16211B;
  border-radius:999px;padding:4px 10px 3px;display:inline-block}
.ftcols a{border-bottom:2px solid transparent}
.ftcols a:hover{border-bottom-color:#F6C560}
/* Five columns, not four-plus-a-widow. With the nav columns cut to four, the
   small-print column wrapped onto a second row directly under "Tools", where it
   reads as a fifth column that failed rather than as the small print. */
@media (min-width:1000px){
  .ftcols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px}
}
/* ------------------------------------------------------- the display face
   "Much bolder typography" was the brief. Bricolage Grotesque at 800, tracked
   to -.032em, replaces Fraunces on headings sitewide; _dev/typeface.py adds it
   to the font request on every page. Fraunces stays loaded and still sets the
   FIGURES - a serif numeral reads as a quantity, a grotesque one reads as a
   headline - so do not drop it from the request.

   The [class] duplicate is not padding. Bare `h1` is (0,0,1) and loses to the
   scoped `.sc h1` / `.lib h2` rules the article and directory templates carry;
   `[class] h1` is (0,1,1), ties with them, and wins on source order because
   this sheet is appended last on every page. A page whose heading is styled at
   (0,2,1) or higher keeps its own face on purpose. */
h1,h2,h3,[class] h1,[class] h2,[class] h3,
.sitenav-wordmark,.np-col b,.ftcols h5{
  font-family:'Bricolage Grotesque','Archivo',Inter,system-ui,sans-serif;
  letter-spacing:-.032em}
h1,h2,[class] h1,[class] h2{font-weight:800}
h3,[class] h3{font-weight:700}
.sitenav-wordmark{font-weight:800;letter-spacing:-.03em;font-size:16px}
.np-col b{letter-spacing:-.02em}
.ftcols h5{letter-spacing:.1em}

/* ============================================================ INTERIORS
   The chrome and the landing page were converted first, which left every
   article and tool page half-done: Pixel masthead and Pixel headings above,
   rounded cards and blurred shadows below. Half-converted is worse than not
   started, because it reads as a mistake rather than a style.

   These are the shared chrome classes in the sitewide sheet - the ones every
   article, hub and tool page builds from. Three moves, the same three as
   everywhere else: 2px of ink, a solid offset shadow, and a square-ish radius.
   Nothing here changes a layout, a size or a colour role; a card that was white
   is still white and a band that was pine is still pine. */
.card{border:2px solid #16211B;border-radius:12px;box-shadow:3px 3px 0 #16211B}
.sec.alt .card{background:#fff}
.ref{border:2px solid #16211B;border-radius:12px;box-shadow:2px 2px 0 #16211B}
.fact{border:2px solid #16211B;border-radius:10px;box-shadow:2px 2px 0 #16211B}
.sec.alt{border-top:3px solid #16211B;border-bottom:3px solid #16211B}
/* the hero band. The gradient stays - it is the one place on the site that
   earns a gradient, and it carries the figures - but it gets a hard edge top
   and bottom so it reads as a block rather than a fade. */
.band{border-bottom:3px solid #16211B}
.who span{border:2px solid rgba(255,255,255,.34);border-radius:999px}
/* buttons, everywhere. .btn is the shared one; the tool pages each have their
   own name for the same object, which is why they are listed rather than
   matched by a wildcard - a selector that matches nothing looks exactly like a
   rule that works. */
.btn,.clgo,.gherocta > a,.therocta > a,.aherocta > a{
  border:2px solid #16211B;border-radius:10px;box-shadow:3px 3px 0 #16211B}
.btn:active,.clgo:active{transform:translate(3px,3px);box-shadow:0 0 0 #16211B}
.btn.ghost{background:#fff}
.soon{border:2px solid #16211B;border-radius:999px}
/* the up-link block at the foot of every article */
.uplink{border-top:3px solid #16211B}

/* The rest of the interiors, chosen by MEASUREMENT rather than by guessing at
   class names. A headless pass over an article, the hub, the directory and a
   tool page listed every element still drawn soft - border-radius >= 8px, or a
   box-shadow with a blur - and these are the card-like containers that came
   back. The small stuff it also found (.th chips, .gapl bars, .f fields) is
   deliberately left alone: a field's cream fill and tan border is the existing
   "you can edit this" language, and hard-bordering every input would read as
   error state, not as style.

   Two of these carried a genuine blur - .slab.pine and .slab.carbon - which is
   the thing the direction exists to remove. */
.pg,.uc,.lc,.rc,.fb,.how,.job,.reffold,.edge,.ig,.tcard{
  border:2px solid #16211B;border-radius:10px;box-shadow:2px 2px 0 #16211B}
.pg:hover,.rc:hover,.lc:hover{box-shadow:4px 4px 0 #16211B;
  transform:translate(-1px,-1px)}
.slab{border-radius:14px;box-shadow:5px 5px 0 rgba(22,33,27,.55);
  border:2px solid #16211B}
.rule{border-radius:10px}
/* end restyle */