/* StemSkills templates: PER-TEMPLATE LAYOUT ONLY.
   Components style themselves (components.css); this file only positions them and
   sets section rhythm, ground alternation and the template-specific reflow.
   If a rule here describes a components internals, it is in the wrong file.

   Naming is the t- system (stage-4 code guide §4: templates use t-). It is the ONLY
   section system: the ssl-section-* names and every topic modifier (--router, --split,
   --mentors, --research, --teach, --how, --results, --visit, --faculty, --faq) are gone.
   Nothing styled them, so nothing should emit them.

   The complete surface this file offers the patterns, and it is deliberately this short:
     t-section  t-section--paper  t-section--surface
     t-section__head  t-section__actions  t-section__note
     t-card-grid  t-card-grid--2  t-home__quotes
   Anything else a pattern needs is a component and belongs in components.css.

   Section comments cite the stage-3 composition tables:
   t-home   = docs/redesign/stage-3-system-design/01-template-system-and-batch1.md §5
   t-campus = same file, §6
   Breakpoint ladder is mobile-first: base (375+), 768, 1024. 1440 is identical to
   1024 because .ssl-wrap caps content at var(--ssl-maxw) with var(--ssl-s-7) side margins. */


/* ===============================================================
   SHARED SECTION PRIMITIVE (both Batch-1 templates)
   =============================================================== */

/* Section rhythm, ADR-0004 and brand guideline §4 (sections breathe, 64 to 96).
   48 on mobile, 64 from 768, 96 from 1024, per side. */
.t-section{ padding-block:var(--ssl-s-7); }
@media (min-width:768px){ .t-section{ padding-block:var(--ssl-s-8); } }
@media (min-width:1024px){ .t-section{ padding-block:var(--ssl-s-9); } }

/* Ground alternation. Paper is the page ground; surface is the quiet lift.
   Full-bleed bands are their own ground (c-band--indigo / c-band--amber-tint) and
   carry their own padding, so they take neither modifier. */
.t-section--paper{ background:var(--ssl-paper); }
.t-section--surface{ background:var(--ssl-surface); }

/* Two sections on the same ground are separated by the 1px hairline rule,
   never by a box or a shadow (ADR-0004). Load-bearing where the dynamic blog strip
   lands between two pattern sections and the alternation cannot be checked by eye. */
.t-section--paper + .t-section--paper,
.t-section--surface + .t-section--surface{ border-block-start:1px solid var(--ssl-line); }

/* Anchored nodes must clear the sticky header, or the target lands underneath it.
   The mega menu and the mobile nav deep-link to /himachal/#teach, #visit and #campuses,
   which are section ids; the mobile CTA bar links to #ssl-counsellor-h, which is a
   HEADING id. So the rule has to cover every anchored node in scope, not just section
   wrappers: .t-section[id] is listed for the contract it names, .ssl-scope [id] is what
   catches the heading anchors. The offset tracks the headers own height, which
   components.css steps from --ssl-header-h-sm to --ssl-header-h at 768, plus one space
   step so the target is not flush against the header edge. */
.t-section[id],
.ssl-scope [id]{ scroll-margin-block-start:calc(var(--ssl-header-h-sm) + var(--ssl-s-4)); }
@media (min-width:768px){
  .t-section[id],
  .ssl-scope [id]{ scroll-margin-block-start:calc(var(--ssl-header-h) + var(--ssl-s-4)); }
}

/* Section head: the h2 and its lede, stacked and held to a readable measure. */
.t-section__head{
  display:flex; flex-direction:column; gap:var(--ssl-s-3);
  max-width:70ch; margin-block-end:var(--ssl-s-6);
}

/* GUTENBERG PUTS A DIV BETWEEN A GROUP AND ITS CHILDREN, and until this rule existed that
   quietly cancelled both of the layouts below.
   `wp:group` renders as `.wp-block-group > .wp-block-group__inner-container > (real children)`.
   So `.t-section__head` had exactly ONE flex child, and a gap between one item is nothing:
   measured on the live page, all six section headings on /himachal/ declared `gap:12px` and
   sat at 0px, every H2 touching its own lede. `.t-card-grid` had the same problem with worse
   consequences: one grid child means every card lands in a single cell, so the two parent
   quotes in campus-results stacked instead of sitting two across.
   `display:contents` removes the wrapper from the box tree so the real children become the
   flex and grid items they were always written to be. Safe here because the wrapper is a
   presentational div with no role of its own.
   This is invisible in a pattern file and invisible in the CSS; it only shows up by measuring
   a rendered page, which is why it survived until the UI/UX validation pass. */
.t-section__head > .wp-block-group__inner-container,
.t-card-grid > .wp-block-group__inner-container,
.t-section__actions > .wp-block-group__inner-container,
/* the homepage audience router: same wrapper, twice over. The grid wrapper AND each
   card are wp:groups, so without both rules the four cards render as one overlapping
   column (found the night the homepage was pattern-seeded through do_blocks for the
   first time; the offline preview never ran the block renderer). */
.c-router > .wp-block-group__inner-container,
.c-router-card > .wp-block-group__inner-container,
/* every other homepage grid/flex wp:group, found the same night: the 2-up campuses
   split, its panels, and the three-quote row inside the workshop band. */
.c-split > .wp-block-group__inner-container,
.c-split__panel > .wp-block-group__inner-container,
.t-home__quotes > .wp-block-group__inner-container,
.c-quote > .wp-block-group__inner-container{ display:contents; }

/* A row of buttons closing a section. Patterns ship this as a core wp:buttons block,
   whose flex gap comes from a zero-specificity :where(.is-layout-flex) rule, so this
   single class wins cleanly and does not need propping up. */
.t-section__actions{
  display:flex; flex-wrap:wrap; gap:var(--ssl-s-4);
  margin-block-start:var(--ssl-s-6);
}

/* Small print closing a section (a credential line, a caveat). Slate on paper measures
   8.0:1, so it clears AA at this size. */
.t-section__note{
  max-width:70ch;
  font-size:var(--ssl-fs-1); color:var(--ssl-slate);
}

/* base.css writes `.ssl-scope p{ margin:0 0 var(--ssl-s-4) }` at (0,1,1), which outranks
   a bare class. The heads lede and the note both ship as paragraphs, so that trailing
   margin double-counts against the section padding; reset it at (0,2,1). Do not flatten
   these selectors. t-section__actions is always a wp:buttons div, never a p, so it is
   deliberately absent here. */
.ssl-scope .t-section__head p,
.ssl-scope p.t-section__note{ margin-block-end:0; }

/* The notes TOP margin has to live at this specificity too, for the same reason: the
   `margin` shorthand in base.css sets margin-top to 0, so a bare `.t-section__note` rule
   is silently discarded. s-6, not s-5, because the note follows a grid whose own row gap
   is s-6: any smaller and it reads as the last cards caption rather than the sections
   footnote. On the campus faculty section that attached the whole teams IIT and CSIR
   credentials to one teacher. A section-level note must sit further from the grid than the
   grids own rows sit from each other. */
.ssl-scope p.t-section__note{ margin-block-start:var(--ssl-s-6); }

/* The AEO answer capsule, where a SECTION carries it instead of the hero. /himachal/ moved
   its capsule here (patterns/campus-what-we-teach.php) when the hero was cut back to the
   hairline, H1, a short description, the tags and the CTA. It keeps the treatment the hero
   gave it, ADR-0004: set apart by a hairline rather than a tinted box, and ink rather than
   the ledes slate, because this is the sentence most likely to be quoted back at us.
   Measure is 60ch, not the heads 70ch: this runs long and wants the tighter line.
   Margins are already zeroed by the `.t-section__head p` reset above, so this adds only the
   rule and the measure. Written at (0,2,1) to match that reset; do not flatten it to a bare
   class or `.ssl-scope p{margin:...}` at (0,1,1) will beat it. */
.ssl-scope p.t-section__answer{
  max-width:60ch; color:var(--ssl-ink);
  border-inline-start:1px solid var(--ssl-line); padding-inline-start:var(--ssl-s-4);
}

/* Template card grid: for lists of the generic c-card, and for any list of components
   that has no grid of its own. c-router, c-profile-grid, c-blog-grid and c-pub-list ship
   their own grids in components.css and must NOT use this. */
.t-card-grid{
  display:grid; grid-template-columns:1fr; gap:var(--ssl-s-5);
  list-style:none; margin:0; padding:0;
}
@media (min-width:768px){ .t-card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){
  .t-card-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--ssl-s-6); }
  /* --2 exists only to hold the grid at two columns where three would leave an orphan.
     Below 1024 the base grid is already 1 then 2, so it has nothing to say there. */
  .t-card-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Both template grids can be a wp:group rather than a wp:list (campus-results and the
   workshop-band quotes are groups of groups). A group carries cores flow layout, which
   adds `margin-block-start` to every child after the first. In a grid that does not
   stack the rows, it shoves columns 2 and 3 down by a block gap. Zero the child margins
   so the grids own `gap` is the only spacing. (0,2,0), because a paragraph child would
   otherwise be caught by `.ssl-scope p` at (0,1,1). */
.ssl-scope .t-card-grid > *,
.ssl-scope .t-home__quotes > *{ margin-block:0; }


/* ===============================================================
   t-home: homepage, stage-3 §5
   =============================================================== */

/* §5.1 header + mega-menu, §5.2 hero, §5.10 footer: global chrome and the hero
   position themselves. No template CSS.
   §5.3 audience router (surface): c-router owns its 4 / 2x2 / 1 grid. Head only.
   §5.4 one institute, two ways to learn (paper, id=campuses): c-split owns its 2-up.
   §5.6 taught by published scientists (surface): c-profile-grid owns its 3 / 2 / 1.
   §5.7 research strip (paper): head plus .t-section__actions. No unique layout.
   §5.8 from the blog: c-blog-grid owns its 3 / 2 / 1. Head plus .t-section__actions.
   §5.9 schools band: c-band--amber-tint, its own ground, with c-band__* elements. */

/* §5.5 featured workshop band: the three learner quotes sit inside c-band--indigo, which
   is a full-bleed ground rather than a t-section, so the bands own head elements apply
   and this grid is the only template-side rule the section needs.
   One column while the quotes are long, three across once there is room. */
.t-home__quotes{
  display:grid; grid-template-columns:1fr; gap:var(--ssl-s-5);
  list-style:none; margin:0; padding:0;
}
@media (min-width:1024px){
  .t-home__quotes{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--ssl-s-6); }
}


/* ===============================================================
   t-campus: /himachal/, stage-3 §6
   =============================================================== */

/* Every section here composes from the shared primitive above; the template adds no
   rules of its own, which is the point of the primitive.
   §6.1 header, §6.2 hero plus answer capsule, §6.10 footer: chrome and hero.
   §6.3 what do we teach (surface, id=teach): .t-card-grid, 1 / 2 / 3.
   §6.4 who will teach my child (surface): c-profile-grid owns its 3 / 2 / 1; four items
        wrap 3 plus 1 and the orphan stays in column 1. Closes on .t-section__note.
   §6.5 how does coaching work (paper): .t-card-grid.
   §6.6 results (paper): two parent quotes, so .t-card-grid .t-card-grid--2 holds it at two.
   §6.7 visit us (surface, id=visit): c-counsellor owns its intro / form / map grid.
   §6.8 FAQ (paper): c-faq is full width inside .ssl-wrap by contract and sets its own
        answer measure, so the section needs no override.
   §6.9 closing CTA: c-band--amber-tint, its own ground, with c-band__* elements. */


/* ===============================================================
   t-page / t-post / t-listing: the site-wide templates (stage 6)
   Added 2026-07-27, when the child theme took over page.php,
   single.php and index.php so that no sitemap URL falls back to
   the MasterStudy chrome.
   =============================================================== */

/* --- t-page: /about-us/, /contact-us/, /courses/, the assessments, /verify/ ---- */
/* A pages own H1, held to a reading measure. The parents grey title_box banner is
   deliberately gone, so this heading is the pages only title and carries the weight. */
.t-page__head{ max-width:70ch; margin-block-end:var(--ssl-s-6); }
.ssl-scope .t-page__title{ margin:0; }
/* Page bodies are author-written prose from the block editor, so they get the reading
   measure rather than the full 1200px grid. Media is allowed to break out to full width,
   because a screenshot in a tutorial is worth more space than a paragraph. */
.t-page__body{ max-width:74ch; }
.t-page__body > figure,
.t-page__body > .wp-block-image,
.t-page__body > .wp-block-table{ max-width:none; }

/* --- t-post: the ~40 tutorial posts, the sites whole search asset ------------- */
/* One column on mobile, article plus sidebar from 1024. The sidebar is 320px because
   c-offer needs room for a two-line CTA without the button wrapping, and any wider
   starts eating the measure of the article, which is the thing people came for. */
.t-post__layout{ display:grid; grid-template-columns:1fr; gap:var(--ssl-s-7); }
@media (min-width:1024px){
  .t-post__layout{ grid-template-columns:minmax(0,1fr) 320px; gap:var(--ssl-s-8); align-items:start; }
}
.t-post__head{ max-width:70ch; margin-block-end:var(--ssl-s-6); }
.ssl-scope .t-post__eyebrow{
  margin:0 0 var(--ssl-s-3); max-width:none;
  font-size:var(--ssl-fs-1); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
}
.ssl-scope .t-post__title{ margin:0 0 var(--ssl-s-4); }
.ssl-scope .t-post__meta{
  margin:0; max-width:none;
  display:flex; flex-wrap:wrap; gap:var(--ssl-s-4);
  font-size:var(--ssl-fs-1); color:var(--ssl-slate);
}
/* Updated earns an amber marker: on a tutorial, freshness is the single fact a reader
   most wants, and it is also what search engines reward. --ssl-accent-strong, not
   --ssl-accent, because this is small text and has to clear AA (ADR-0015). */
.ssl-scope .t-post__updated{ color:var(--ssl-accent-strong); font-weight:700; }
.t-post__lead{ margin-block-end:var(--ssl-s-7); }
/* The article measure. 74ch rather than the 70ch used for marketing copy: these posts
   carry code blocks and tables, and a tighter measure forces those to scroll sooner. */
.t-post__body{ max-width:74ch; }
.t-post__body > figure,
.t-post__body > .wp-block-image,
.t-post__body > .wp-block-table,
.t-post__body > pre{ max-width:none; }
/* Code and tables must scroll inside their own box, never widen the page. This is the
   rule that keeps the mobile check clean on posts full of GROMACS commands. */
.t-post__body pre,
.t-post__body .wp-block-table{ overflow-x:auto; }
.t-post__tags{ margin-block-start:var(--ssl-s-7); }

/* --- the sidebar -------------------------------------------------------------- */
/* Sticky only where there is a real second column. Below 1024 it is a block at the end
   of the article, which is correct: a reader who cannot see the answer they arrived for
   does not convert, they leave. */
.c-aside-stack{ display:flex; flex-direction:column; gap:var(--ssl-s-5); }
@media (min-width:1024px){
  .t-post__aside{ position:sticky; top:calc(var(--ssl-header-h) + var(--ssl-s-5)); }
}
.c-offer{
  background:var(--ssl-surface); border:1px solid var(--ssl-line);
  border-radius:var(--ssl-radius); padding:var(--ssl-s-5);
  display:flex; flex-direction:column; gap:var(--ssl-s-3);
}
/* The lead magnet is the one thing on the page we most want clicked, so it takes the
   amber edge. Exactly one element in this stack gets it; if everything is emphasised
   nothing is. TOP edge, not side: the system's accent-edge vocabulary is the 3px
   border-block-start (c-notice--ok/--error and the comps' response states all use it),
   and a colored SIDE tab is the classic generated-UI tell this system avoids
   (UX call taken 2026-08-21; same reasoning removed the newsletter card's side tab). */
.c-offer--magnet{ border-block-start:3px solid var(--ssl-accent-strong); }
.c-offer--quiet{ background:transparent; box-shadow:none; }
.ssl-scope .c-offer__eyebrow{
  margin:0; max-width:none;
  font-size:var(--ssl-fs-1); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--ssl-accent-strong);
}
.ssl-scope .c-offer__title{ margin:0; font-size:var(--ssl-fs-3); }
.ssl-scope .c-offer__body{ margin:0; max-width:none; font-size:var(--ssl-fs-1); color:var(--ssl-slate); }
.ssl-scope .c-offer__cta{ align-self:flex-start; }
.c-aside-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--ssl-s-3); }
/* 44px minimum on every link in a list of links, or a thumb misses on a phone. */
.ssl-scope .c-aside-links a{ display:block; min-height:var(--ssl-tap); font-size:var(--ssl-fs-1); font-weight:700; }

/* --- t-listing: /blog/, categories, tags, search ------------------------------ */
/* c-blog-grid owns its own columns, so the template adds nothing but the wrapper. */

/* ===============================================================
   t-opps: the Submit Opportunity page (ADR-0026)
   =============================================================== */

/* Page shell: breadcrumb to closing rule. 40/96 vertical per the comp. */
.t-opps{ padding-block:var(--ssl-s-6) var(--ssl-s-9); }

/* Form column beside a 340px aside at 900px+, stacked below. 900 rather than
   the 768/1024 ladder because a 340px aside plus a usable form needs ~900px;
   at 768 both columns would be starved. The comp breaks at the same point. */
.t-opps__grid{ display:grid; grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){
  .t-opps__grid{ grid-template-columns:minmax(0,1fr) 340px; gap:var(--ssl-s-7); }
}
.t-opps__form-col{ max-width:620px; min-width:0; }
/* the form card itself is a c-notice base without a verdict border */
.t-opps__card{ margin-block-start:var(--ssl-s-6); display:grid; gap:var(--ssl-s-5); }
.t-opps__aside-card{
  background:var(--ssl-paper); border:1px solid var(--ssl-line);
  border-radius:var(--ssl-radius); padding:var(--ssl-s-5);
  margin-block-start:var(--ssl-s-6);
}
/* submit row: button plus the one-line reassurance beside it */
.t-opps__submit{ display:flex; align-items:center; gap:var(--ssl-s-4); flex-wrap:wrap; }
.ssl-scope .t-opps__submit-note{ margin:0; max-width:none; font-size:var(--ssl-fs-1); color:var(--ssl-slate); }

/* ===============================================================
   t-oppdir / t-opprec: the opportunities directory + record (ADR-0027)
   =============================================================== */

.t-oppdir{ padding-block:var(--ssl-s-6) var(--ssl-s-9); }
/* collection chips: one scrolling row, never wrapped into a wall */
.t-oppdir__chips{
  display:flex; gap:var(--ssl-s-2); overflow-x:auto;
  padding-block:var(--ssl-s-4) var(--ssl-s-1);
}
.t-oppdir__chip{
  flex:none; display:inline-flex; align-items:center; min-height:var(--ssl-tap);
  padding:10px 16px; border-radius:var(--ssl-radius-pill);
  font-weight:700; font-size:var(--ssl-fs-1); text-decoration:none;
  border:1px solid var(--ssl-line); background:var(--ssl-surface); color:var(--ssl-ink);
}
.t-oppdir__chip[aria-current]{
  border-color:var(--ssl-primary); background:var(--ssl-primary); color:var(--ssl-surface);
}
.t-oppdir__bar{
  display:flex; flex-wrap:wrap; gap:var(--ssl-s-2); align-items:center;
  margin-block:var(--ssl-s-4);
}
.t-oppdir__search{ position:relative; flex:1 1 240px; min-width:220px; }
.t-oppdir__search .c-field__input{ padding-inline-start:38px; }
.t-oppdir__search svg{
  position:absolute; inset-inline-start:12px; inset-block-start:13px;
  color:var(--ssl-slate); pointer-events:none;
}
.ssl-scope .t-oppdir__count{ margin:0 0 var(--ssl-s-3); max-width:none; font-size:var(--ssl-fs-1); color:var(--ssl-slate); }
.t-oppdir__select{
  min-height:var(--ssl-tap); border:1px solid var(--ssl-line); border-radius:var(--ssl-radius);
  background:var(--ssl-surface); color:var(--ssl-ink); font:inherit; font-size:var(--ssl-fs-1);
  padding-inline:10px;
}
/* empty state: a quiet card, never a bare page */
.t-oppdir__empty{
  background:var(--ssl-surface); border:1px solid var(--ssl-line);
  border-radius:var(--ssl-radius); padding:var(--ssl-s-7) var(--ssl-s-6); text-align:center;
}

.t-opprec{ padding-block:var(--ssl-s-6) var(--ssl-s-9); }
.t-opprec__grid{ display:grid; grid-template-columns:1fr; align-items:start; gap:var(--ssl-s-2); margin-block-start:var(--ssl-s-2); }
@media (min-width:900px){
  .t-opprec__grid{ grid-template-columns:minmax(0,1fr) 360px; gap:var(--ssl-s-7); }
  .t-opprec__aside{ position:sticky; top:calc(var(--ssl-header-h) + var(--ssl-s-4)); }
}
/* on phones the deadline card outranks the prose: the comp orders it first */
.t-opprec__aside{ order:-1; margin-block-start:var(--ssl-s-6); }
@media (min-width:900px){ .t-opprec__aside{ order:0; } }
.t-opprec__facts{ display:grid; gap:10px; }
.t-opprec__fact{ display:flex; justify-content:space-between; gap:var(--ssl-s-4); font-size:var(--ssl-fs-1); }
.t-opprec__fact b{ text-align:end; }
.t-opprec__stages{
  max-width:560px; margin-block-start:var(--ssl-s-3);
  border:1px solid var(--ssl-line); border-radius:var(--ssl-radius);
  background:var(--ssl-surface); overflow:hidden;
}
.t-opprec__stage{
  display:flex; justify-content:space-between; gap:var(--ssl-s-4);
  padding:12px 18px; border-block-start:1px solid var(--ssl-line);
}
.t-opprec__stage:first-child{ border-block-start:none; }
.t-opprec__stage b{ font-variant-numeric:tabular-nums; text-align:end; }
.t-opprec__elig{ list-style:none; margin:var(--ssl-s-3) 0 0; padding:0; max-width:66ch; display:grid; gap:10px; }
.t-opprec__elig li{ display:flex; gap:12px; }
/* the brand hexagon as the list glyph, from CSS so kses cannot eat it (gotcha 21) */
.t-opprec__elig li::before{
  content:""; flex:none; width:12px; height:12px; margin-block-start:7px;
  background:var(--ssl-primary); opacity:.75;
  clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
}

/* ===============================================================
   t-blog additions: the comp Blog Listing over index.php
   (chips + bar reuse the t-oppdir classes; only the new pieces here)
   =============================================================== */
.t-blog__chips{ padding-block-start:0; }
.t-blog__sort{ display:inline-flex; gap:var(--ssl-s-2); margin-inline-start:auto; }
.t-blog__featured{
  display:grid; grid-template-columns:1fr; gap:var(--ssl-s-5);
  margin-block-end:var(--ssl-s-6); padding:0; overflow:hidden;
}
@media (min-width:900px){ .t-blog__featured{ grid-template-columns:380px minmax(0,1fr); } }
.t-blog__featured-media{ background:var(--ssl-paper); min-height:180px; }
.t-blog__featured-img{ display:block; width:100%; height:100%; object-fit:cover; }
.t-blog__featured-body{ padding:var(--ssl-s-5) var(--ssl-s-6) var(--ssl-s-6); }
.ssl-scope .t-blog__featured-title{
  font-size:26px; line-height:1.2; margin:var(--ssl-s-2) 0 var(--ssl-s-3);
}
.t-blog__featured-title a{ color:var(--ssl-ink); text-decoration:none; }
.t-blog__featured:hover .t-blog__featured-title a{ text-decoration:underline; text-underline-offset:3px; }
.ssl-scope .t-blog__featured-dek{ max-width:66ch; color:var(--ssl-slate); margin:0 0 var(--ssl-s-3); }
.t-blog__more{
  display:flex; justify-content:center; gap:var(--ssl-s-3);
  margin-block-start:var(--ssl-s-6);
}
.t-blog__news{ margin-block-start:var(--ssl-s-7); }
/* comp update (b): the closing band is its own block, never fused to the footer */
.t-blog__band{ margin-block-end:var(--ssl-s-9); }

/* ===============================================================
   t-post additions: the comp Blog Post over single.php
   =============================================================== */
.ssl-scope .t-post__meta.c-post-row__by{ max-width:none; }
.t-post__toc,
.t-post__toc-inline{
  background:var(--ssl-surface); border:1px solid var(--ssl-line);
  border-radius:var(--ssl-radius); padding:var(--ssl-s-4) var(--ssl-s-5);
}
.t-post__toc-inline{ margin-block:var(--ssl-s-5); }
@media (min-width:1000px){ .t-post__toc-inline{ display:none; } }
.t-post__toc{ display:none; }
@media (min-width:1000px){ .t-post__toc{ display:block; } }
.t-post__toc-h{
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ssl-slate); margin:0 0 var(--ssl-s-2);
}
.t-post__toc ol,
.t-post__toc-inline ol{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.t-post__toc a,
.t-post__toc-inline a{
  display:block; padding-inline-start:10px; border-inline-start:2px solid transparent;
  font-size:var(--ssl-fs-1); line-height:1.45; color:var(--ssl-slate); text-decoration:none;
}
.t-post__toc a:hover,
.t-post__toc-inline a:hover{ color:var(--ssl-primary); text-decoration:underline; }
/* scrollspy state, set by ssl-chrome.js */
.t-post__toc a[data-current]{
  border-inline-start-color:var(--ssl-primary); color:var(--ssl-ink); font-weight:700;
}
/* anchor targets clear the sticky header (comp: scroll-margin-top 96px) */
.t-post__body h2{ scroll-margin-top:96px; }
.t-post__share{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--ssl-s-2);
  margin-block-start:var(--ssl-s-6);
}
.t-post__share-label{
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ssl-slate); margin-inline-end:var(--ssl-s-2);
}
.t-post__author{
  display:flex; gap:var(--ssl-s-4); align-items:flex-start;
  margin-block-start:var(--ssl-s-6);
}
.ssl-scope .t-post__author-h{ max-width:none; font-weight:700; margin:0 0 4px; }
.ssl-scope .t-post__author-p{ max-width:66ch; font-size:var(--ssl-fs-1); color:var(--ssl-slate); margin:0 0 6px; }
.t-post__related{ margin-block-start:var(--ssl-s-7); }
.ssl-scope .t-post__related-h{ margin:0 0 var(--ssl-s-4); }
/* a featured guide without a figure keeps one clean column, no empty media pane */
.t-blog__featured--nomedia{ grid-template-columns:1fr; }

/* ===============================================================
   t-results: the student results lookup (comp Student Results, ADR-0029)
   =============================================================== */
.t-results{ padding-block:var(--ssl-s-6) var(--ssl-s-9); }
.ssl-scope .t-results__promise{ max-width:66ch; color:var(--ssl-slate); margin:6px 0 var(--ssl-s-5); }
.t-results__card{ max-width:520px; display:grid; gap:var(--ssl-s-4); }
.t-results__card--wide{ max-width:720px; display:block; }
.t-results__go{ width:100%; justify-content:center; }
.t-results__label{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ssl-slate); margin:0; }
.ssl-scope .t-results__name{ max-width:none; font-family:var(--ssl-font-serif, Georgia, serif); font-size:26px; line-height:1.2; font-weight:700; margin:4px 0 2px; }
.ssl-scope .t-results__meta{ max-width:none; font-size:var(--ssl-fs-1); color:var(--ssl-slate); margin:0 0 var(--ssl-s-5); }
.t-results__exam{ border:1px solid var(--ssl-line); border-radius:var(--ssl-radius); overflow:hidden; margin:0 0 var(--ssl-s-5); }
.t-results__exam-head{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; background:var(--ssl-paper); border-block-end:1px solid var(--ssl-line); padding:12px 18px; }
.t-results__exam-head span{ font-size:var(--ssl-fs-1); color:var(--ssl-slate); }
.t-results__scroll{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.t-results__table{ width:100%; border-collapse:collapse; font-size:15px; }
.t-results__table th{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ssl-slate); text-align:start; padding:10px 18px; border-block-end:1px solid var(--ssl-line); }
.t-results__table td{ padding:10px 18px; border-block-end:1px solid var(--ssl-line); }
.t-results__table tr:last-child td{ border-block-end:0; }
.t-results__num{ text-align:end; font-variant-numeric:tabular-nums; }
.t-results__exam-foot{ display:flex; justify-content:space-between; border-block-start:1px solid var(--ssl-line); padding:12px 18px; font-weight:700; }
.t-results__pct{ color:var(--ssl-ok); }
.t-results__remarks{ background:var(--ssl-primary-tint); border-radius:var(--ssl-radius); padding:12px 18px; font-size:15px; margin:0 0 var(--ssl-s-3); }
.t-results__remarks b{ display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ssl-primary); margin-block-end:4px; }
.ssl-scope .t-results__fine{ max-width:66ch; font-size:var(--ssl-fs-1); color:var(--ssl-slate); margin:0; }
.t-results__notice{ max-width:520px; margin:0 0 var(--ssl-s-5); }
.t-results__notice--warn{ border-block-start:3px solid var(--ssl-warn); }
.ssl-scope .t-results__notice-h{ font-size:21px; margin:0 0 6px; }
.ssl-scope .t-results__notice-p{ max-width:none; font-size:15px; color:var(--ssl-slate); margin:0; }
/* The newsletter mu-plugin ships its own old-palette styles (navy/teal/gold). On the
   redesigned blog listing the block is re-grounded to the token system; two-class
   specificity beats its single-class rules, and its inline vars are simply unused here. */
/* A clean surface card, NOT the mu-plugin's 6px side-tab (that thick one-side accent is an
   AI tell and nothing else in the redesign uses one; c-card is a plain 1px border). The
   indigo kicker and the amber button carry the brand, so the border does not need to. */
.t-blog__news .ssl-news{ border:1px solid var(--ssl-line); border-radius:var(--ssl-radius); background:var(--ssl-surface); box-shadow:var(--ssl-shadow); }
.t-blog__news .ssl-news__kicker{ color:var(--ssl-primary); letter-spacing:.12em; }
.t-blog__news .ssl-news__h{ color:var(--ssl-ink); font-weight:700; }
.t-blog__news .ssl-news__btn{ background:var(--ssl-accent); color:var(--ssl-ink); border-radius:var(--ssl-radius-pill); font-weight:700; }
.t-blog__news .ssl-news__btn:hover,
.t-blog__news .ssl-news__btn:focus{ background:var(--ssl-primary); color:#fff; }

/* ===============================================================
   t-contact: the contact page (comp Contact StemSkills Lab, ADR-0031)
   =============================================================== */
.t-contact__cols{ display:grid; grid-template-columns:1fr; gap:var(--ssl-s-6); align-items:start; }
@media (min-width:860px){ .t-contact__cols{ grid-template-columns:360px minmax(0,1fr); } }
.t-contact__facts{ display:grid; gap:var(--ssl-s-4); }
.t-contact__fact{ display:block; }
.t-contact__label{ display:block; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ssl-slate); margin-block-end:4px; }
.ssl-scope .t-contact__p{ max-width:none; margin:0 0 var(--ssl-s-2); font-size:var(--ssl-fs-1); color:var(--ssl-ink); }
.t-contact__fact .c-btn{ margin-block-start:var(--ssl-s-2); }
.t-contact__map{ border:1px solid var(--ssl-line); border-radius:var(--ssl-radius); overflow:hidden; background:var(--ssl-primary-tint); min-height:320px; }
.t-contact__map iframe{ display:block; width:100%; min-height:320px; border:0; }
.t-contact__form{ margin-block-start:var(--ssl-s-4); }
/* skin the existing Contact Form 7 markup to the token system without touching its backend */
.t-contact__form .wpcf7-form{ max-width:620px; }
.t-contact__form .wpcf7-form p{ margin:0 0 var(--ssl-s-4); max-width:none; }
.t-contact__form label{ display:block; font-size:14px; font-weight:700; color:var(--ssl-ink); }
.t-contact__form input.wpcf7-form-control:not([type=submit]),
.t-contact__form textarea.wpcf7-form-control{
  width:100%; margin-block-start:6px; min-height:var(--ssl-tap);
  border:1px solid var(--ssl-line); border-radius:var(--ssl-radius);
  background:var(--ssl-surface); color:var(--ssl-ink); font:inherit; font-size:16px; padding:11px 12px;
}
.t-contact__form textarea.wpcf7-form-control{ min-height:120px; resize:vertical; }
.t-contact__form input.wpcf7-form-control:focus,
.t-contact__form textarea.wpcf7-form-control:focus{ outline:2px solid var(--ssl-primary); outline-offset:2px; }
.t-contact__form input.wpcf7-submit{
  min-height:var(--ssl-tap); border:0; border-radius:var(--ssl-radius-pill);
  background:var(--ssl-primary); color:#fff; font:700 16px/1 inherit; padding:0 28px; cursor:pointer;
}
.t-contact__form input.wpcf7-submit:hover{ background:var(--ssl-primary-700); }
/* the opp row title is a real h2 for the crawlable outline; the class styles it and
   this keeps the heading from picking up base h2 margins inside the row grid */
.ssl-scope h2.c-opp-row__title{ margin:0; font-size:var(--ssl-fs-2); }
.t-oppdir__news{ margin-block-start:var(--ssl-s-7); }
/* the results page banner: capped, rounded, never pushing the form below the fold on desktop */
.t-results__hero{ margin:0 0 var(--ssl-s-5); max-width:720px; }
.t-results__hero img{ display:block; width:100%; height:auto; max-height:300px; object-fit:cover; border-radius:var(--ssl-radius); border:1px solid var(--ssl-line); }

/* ===============================================================
   Handoff round 2 (2026-08-23): the floating behaviors the comps specify
   =============================================================== */
/* The listing filter bar is STICKY (comp: position sticky, top 0, paper ground,
   hairline bottom) so search/sort stay at hand while the long list scrolls.
   Below the sticky header, so it sits at the header's height, not 0. */
.t-oppdir__bar{
  position:sticky; top:var(--ssl-header-h-sm); z-index:20;
  background:var(--ssl-paper); border-block-end:1px solid var(--ssl-line);
  padding-block:var(--ssl-s-3);
}
@media (min-width:768px){ .t-oppdir__bar{ top:var(--ssl-header-h); } }
/* (the post rail is already sticky at 1024, see the t-post section above) */
/* skeleton rows for the ajax load-more (comp: 1.2s pulse, match row height, no shift) */
.c-skel-row{ display:grid; gap:8px; padding:var(--ssl-s-4) var(--ssl-s-5); border-block-start:1px solid var(--ssl-line); }
.c-skel-row span{ display:block; height:14px; border-radius:6px; background:var(--ssl-primary-tint); animation:ssl-pulse 1.2s ease-in-out infinite; }
.c-skel-row span:nth-child(1){ width:20%; }
.c-skel-row span:nth-child(2){ width:70%; height:18px; }
.c-skel-row span:nth-child(3){ width:50%; }
@keyframes ssl-pulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .c-skel-row span{ animation:none; } }

/* ===============================================================
   t-research / t-paper: the research pages to the handoff comps (2026-08-23)
   =============================================================== */
.c-pub-list--wall{
  background:var(--ssl-surface); border:1px solid var(--ssl-line);
  border-radius:var(--ssl-radius); overflow:hidden;
}
.c-pub-list--wall > li{ margin:0; }
a.c-pub-row--link{
  display:grid; grid-template-columns:1fr; gap:4px var(--ssl-s-5);
  padding:var(--ssl-s-4) var(--ssl-s-5); text-decoration:none; color:var(--ssl-ink);
}
.c-pub-list--wall > li + li a.c-pub-row--link{ border-block-start:1px solid var(--ssl-line); }
a.c-pub-row--link:hover{ background:#F5F5FA; }
a.c-pub-row--link:hover .c-pub-row__title{ text-decoration:underline; text-underline-offset:3px; }
a.c-pub-row--link .c-pub-row__title{ color:var(--ssl-primary); font-weight:700; font-size:var(--ssl-fs-2); line-height:1.35; }
.c-pub-row__main{ min-width:0; display:grid; gap:4px; }
.c-pub-row__cite{
  display:flex; flex-direction:column; align-items:flex-start; gap:0;
  font-weight:700; font-variant-numeric:tabular-nums; font-size:var(--ssl-fs-2); color:var(--ssl-warn);
}
.c-pub-row__cite em{ font-style:normal; font-weight:400; font-size:var(--ssl-fs-1); color:var(--ssl-slate); }
@media (min-width:768px){
  a.c-pub-row--link{ grid-template-columns:minmax(0,1fr) 120px; }
  .c-pub-row__cite{ align-items:flex-end; text-align:end; }
}
.t-oppdir__chipcount{
  margin-inline-start:6px; font-variant-numeric:tabular-nums; color:var(--ssl-slate); font-weight:400;
}
.t-oppdir__chip[aria-current] .t-oppdir__chipcount{ color:inherit; opacity:.8; }
.ssl-scope .t-paper__title{ margin-block-start:var(--ssl-s-2); max-width:28ch; }
.t-paper__summary{ max-width:66ch; }
.t-paper__cite{ display:grid; gap:var(--ssl-s-3); max-width:66ch; }
.ssl-scope .t-paper__cite-text{ max-width:none; font-size:15px; font-variant-numeric:tabular-nums; margin:0; }
.t-paper__cite .c-btn{ justify-self:start; }
.t-paper__cta{ margin-block-start:var(--ssl-s-4); background:var(--ssl-accent-tint); border-color:var(--ssl-accent-strong); }

/* ---- research search + sort bar (handoff comp; sort = pills, not select: gotcha 24) */
.t-research__bar{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--ssl-s-2); padding-block:var(--ssl-s-2); }
.t-research__search{ position:relative; display:flex; align-items:center; gap:var(--ssl-s-2); flex:1 1 260px; max-width:480px; }
.t-research__search svg{ position:absolute; inset-inline-start:12px; color:var(--ssl-slate); pointer-events:none; }
.t-research__search input[type="search"]{
	width:100%; height:44px; border:1px solid var(--ssl-line); border-radius:8px;
	background:var(--ssl-surface); padding-inline:38px 12px; font-size:1rem; color:var(--ssl-ink);
}
.t-research__search input[type="search"]:focus-visible{ outline:2px solid var(--ssl-primary); outline-offset:1px; }
.t-research__sort{ display:flex; align-items:center; gap:var(--ssl-s-2); margin-inline-start:auto; }
.t-research__sort-label{ font-size:.875rem; color:var(--ssl-slate); }
.t-oppdir__chip--sort[aria-current]{ pointer-events:none; }
.t-research__empty{ text-align:center; padding-block:var(--ssl-s-7); }
.t-research__empty-h{ font-weight:700; font-size:1.125rem; margin-block:0 var(--ssl-s-2); }
.t-research__empty-p{ color:var(--ssl-slate); margin-block:0 var(--ssl-s-4); }