/* CONNECTED EXPLORE v1 (2026-10-26): the Elements directory (browse/elements.html) and the eight area pages
   (browse/elements/<key>.html). A catalogue with marginalia: rows, plates and mono provenance lines, on the house
   tokens only (site.css). No cards, no shadows, no pills. Palette fields are the one place a colour that isn't a
   token appears, and it is the palette's own data, set inline. Spacing and type come from the --s and --t scales. */

/* -- inventory and crumb ------------------------------------------------------------------------------------- */
.ce-inv { margin: 0 0 var(--s6); padding-top: var(--s3); border-top: 1px solid var(--rule); max-width: 56rem;
  font: var(--t-xs)/1.6 var(--mono); color: var(--ink-3); }
.ce-inv b { font-weight: 400; color: var(--ink); }
.ce-inv i, .ce-count i { font-style: normal; padding: 0 .45em; }
.ce-crumb ol { display: flex; flex-wrap: wrap; margin: 0 0 var(--s4); padding: 0; list-style: none; font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }
.ce-crumb li + li::before { content: "/"; content: "/" / ""; padding: 0 .5em; }
.ce-crumb a { display: inline-block; min-height: 24px; padding-block: 4px; color: var(--ink-2); text-decoration: none; }
.ce-crumb a:hover { text-decoration: underline; }
.ce-crumb [aria-current] { color: var(--ink); }

/* -- the directory: one row per area, words left, plates right ----------------------------------------------- */
.ce-row { display: grid; grid-template-columns: minmax(13rem, 18rem) minmax(0, 1fr); gap: var(--s6);
  margin: 0; padding: var(--s6) 0; border-bottom: 1px solid var(--rule); scroll-margin-top: var(--s5); }
.ce-dir > .ce-row.ia-area { margin-block-start: 0; }
.ce-dir { scroll-margin-top: var(--s5); }
.ce-row__h { font: 600 var(--t-display-md)/1.02 var(--display); letter-spacing: -0.02em; margin: 0 0 var(--s2); }
.ce-row__h a { color: var(--ink); text-decoration: none; }
.ce-row__h a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.ce-row__p { margin: 0 0 var(--s3); font: var(--t-sm)/1.5 var(--ui); color: var(--ink-2); max-width: 22rem; }
.ce-count { margin: 0; font: var(--t-xs)/1.6 var(--mono); color: var(--ink-3); }
.ce-count i { padding: 0 .3em; }
.ce-row__go { margin: var(--s3) 0 0; font: var(--t-sm)/1.4 var(--ui); }
.ce-row__go a { display: inline-block; min-height: 24px; padding-top: 3px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-firm); }
.ce-row__go a:hover { border-color: var(--ink); }
.ce-row__go a::after { content: " →"; content: " →" / ""; }

/* Plates: the real Element tiles (el-tile, from the wall renderer) and the spare frames share one 3-up grid. */
.ce-plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s4); align-content: start; }
.ce-plates > .el, .ce-plates .el-wall { display: contents; }
.ce-plates > * { min-width: 0; }
.ce-plate { display: grid; gap: var(--s2); align-content: start; color: var(--ink); text-decoration: none; }
.ce-plate__img { display: grid; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-deep); border: 1px solid var(--rule); }
.ce-plate__word { align-self: end; padding: var(--s3); font: 600 var(--t-lg)/1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.ce-plate:hover b { text-decoration: underline; }
.ce-frame { display: grid; place-content: center; aspect-ratio: 4 / 3; padding: var(--s3); text-align: center;
  border: 1px dashed var(--rule-firm); font: var(--t-xs)/1.5 var(--mono); color: var(--ink-3); text-decoration: none; }
a.ce-frame:hover { color: var(--ink); border-style: solid; }

/* -- area pages ---------------------------------------------------------------------------------------------- */
.ce-jump ol { margin-bottom: var(--s5); }
.ce-sec { scroll-margin-top: var(--s5); }
.ce-sec__line { margin: 0 0 var(--s5); max-width: 40rem; font: var(--t-sm)/1.5 var(--ui); color: var(--ink-2); }
.ce-prov { display: block; font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }
.ia-face .ce-prov { margin-top: var(--s1); }
.ia-pair .ce-prov { margin-top: var(--s1); }
.ce-undesc { margin-top: var(--s4); }
.ce-others { margin-block-start: var(--s8); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.ce-others p { margin: 0 0 var(--s2); font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }
.ce-others ul { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: 0; padding: 0; list-style: none; }
.ce-others a { display: inline-block; min-height: 24px; padding-top: 3px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-firm); font-size: var(--t-sm); }
.ce-others a:hover { border-color: var(--ink); }

/* Type scales: one row per Aesthetic, its cited rules left, the ladder right, type at size. */
.ce-scales { border-top: 1px solid var(--rule-firm); }
.ce-scale { display: grid; grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr); gap: var(--s5); padding: var(--s5) 0; border-bottom: 1px solid var(--rule); }
.ce-scale__h h3 { margin: 0 0 var(--s2); font: 600 var(--t-base)/1.3 var(--ui); }
.ce-scale__h h3 a { color: var(--ink); text-decoration: none; }
.ce-scale__h h3 a:hover { text-decoration: underline; }
.ce-rules { margin: var(--s1) 0 0; padding: 0 0 0 1em; font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }
.ce-rules li + li { margin-top: var(--s1); }
.ce-scale__l { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); align-content: start; overflow: hidden; }
.ce-scale__l li { display: grid; gap: 2px; min-width: 0; }
.ce-scale__s { font-family: var(--display); line-height: 1.05; color: var(--ink); overflow-wrap: anywhere; }
.ce-scale__m { font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }

/* Palettes: a proportioned field, then the name and its provenance in type. */
.ce-pals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7) var(--s5); }
.ce-pal { margin: 0; display: grid; gap: var(--s3); align-content: start; min-width: 0; }
.ce-field { display: grid; height: 9.5rem; border: 1px solid var(--rule); }
.ce-field i { display: block; }
.ce-field--plate { height: 100%; border: 0; }
.ce-pal figcaption { display: grid; gap: var(--s1); }
.ce-pal__n { font: 600 var(--t-base)/1.25 var(--ui); color: var(--ink); }
.ce-pal__p, .ce-pal__m { font: var(--t-xs)/1.45 var(--mono); color: var(--ink-3); }
.ce-pal__p a { color: var(--ink-2); }
.ce-pal__i { font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }
.ce-pal__warn { margin-top: var(--s1); padding-left: var(--s3); border-left: 2px solid var(--ink); font: var(--t-xs)/1.5 var(--mono); color: var(--ink); }
.ce-roles summary { cursor: pointer; font: var(--t-xs)/1.4 var(--mono); color: var(--ink-2); }
.ce-roles summary:hover { color: var(--ink); }
.ce-tblwrap { overflow-x: auto; margin-top: var(--s3); }
.ce-tbl { width: 100%; min-width: 36rem; border-collapse: collapse; font: var(--t-xs)/1.45 var(--ui); }
.ce-tbl th, .ce-tbl td { text-align: left; vertical-align: top; padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--rule); }
.ce-tbl thead th { font-family: var(--mono); font-weight: 400; color: var(--ink-3); }
.ce-tbl tbody th { font-weight: 600; color: var(--ink); }
.ce-tbl td { color: var(--ink-2); }
.ce-tbl code { font: var(--t-xs) var(--mono); color: var(--ink-2); }
.ce-sw { display: inline-block; width: .9rem; height: .9rem; margin-right: .4rem; vertical-align: -2px; border: 1px solid var(--rule-firm); }
.ce-cite { display: block; font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); overflow-wrap: anywhere; }
.ce-note { margin: var(--s2) 0 0; font: var(--t-xs)/1.5 var(--mono); color: var(--ink-3); }

/* -- narrow ---------------------------------------------------------------------------------------------------- */
@media (max-width: 60rem) {
  .ce-row { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .ce-row__p { max-width: 40rem; }
  .ce-pals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ce-scale { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
}
@media (max-width: 36rem) {
  .ce-plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ce-pals { grid-template-columns: minmax(0, 1fr); }
  .ce-field { height: 7rem; }
}

/* TYPOGRAPHY, EASIER TO BROWSE (founder 2026-10-27). Quiet indexes, a section strip that stays in reach on wide
   screens, and the twenty type scales in two columns where there is room. Nothing new to operate: only links. */
.ce-index ol { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: 0 0 var(--s5); padding: 0; list-style: none; }
.ce-index a { font: var(--t-xs)/1.9 var(--mono); color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule); }
.ce-index a:hover, .ce-index a:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }
.ce-index--az ol { gap: var(--s1) var(--s3); }
.ce-index--az a { display: inline-block; min-width: 1.5rem; min-height: 1.5rem; text-align: center; }
.ia-face, .ce-scale { scroll-margin-top: calc(var(--s9) + var(--s2)); }

/* TYPEFACES GROUPED BY USE (Elements in context, founder 2026-11-02; FEATURES.elementsInContext). Same .ia-face
   cards as the flat wall, bucketed under a heading and a one-sentence line; each card gets one extra line, a
   small sample set live in the face. */
.ce-fgroup { margin: 0 0 var(--s7); }
.ce-fgroup__h { margin: 0 0 var(--s1); font: 600 var(--t-md)/1.25 var(--ui); color: var(--ink); }
.ce-fgroup__l { margin: 0 0 var(--s5); max-width: 40rem; font: var(--t-sm)/1.5 var(--ui); color: var(--ink-2); }
.ce-ic { margin: 0; padding-top: var(--s2); border-top: 1px solid var(--rule); color: var(--ink); overflow-wrap: anywhere; }
.ce-ic--display { font-size: var(--t-lg); line-height: 1.1; }
.ce-ic--text { font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); }
.ce-ic--script { font-size: var(--t-lg); line-height: 1.2; }
.ce-ic--mono { font-size: var(--t-sm); line-height: 1.4; color: var(--ink-2); }
@media (min-width: 60.0625rem) {
  .ce-jump { position: sticky; top: 0; z-index: 3; background: var(--paper); }
  .ce-sec, .ce-row, .ce-dir { scroll-margin-top: calc(var(--s9) + var(--s2)); }
  /* Resources' "On this page" strip and the Glossary A-Z strip reuse .ce-jump (Savva's review, 2026-11-02); their
     own anchored sections need the same clearance once the strip is pinned. */
  .rl-shelf, .rl-few__stage, .rl-stds, .rl-lib, .stg-gl__row { scroll-margin-top: calc(var(--s9) + var(--s2)); }
}
@media (min-width: 75rem) {
  /* Columns, not a grid: entries differ in height, and a grid would leave gaps beside the short ones. */
  .ce-scales { columns: 2; column-gap: var(--s7); }
  .ce-scales .ce-scale { grid-template-columns: minmax(0, 1fr); gap: var(--s3); break-inside: avoid; }
}