/* ============================================================ ICE answer library — additions only ------------------------------------------------------------ /answers, /answers/ and /answers/category/ render on the existing `.pf` profile composition (ice-profile-v1.css), so they inherit the whole design system, both themes and every dark-mode contrast fix already made there. This file therefore defines ONLY what `.pf` has no pattern for: a data table, the library grid, and the source block. Everything else is pf-panel / pf-kicker / pf-list / pf-steps / pf-defs / pf-chips / pf-fine. Every colour is a `--pf-*` role inherited from `.pf`, never a literal, so graphite dark mode needs no parallel rules here. Two rules from AGENTS.md are honoured deliberately: · no broad element selectors — every selector below is scoped under an `.ans-` class, so nothing can leak into .page-tools or anywhere else; · text is never muted with `opacity`, because opacity composites toward whatever sits behind and lands at a different ratio on the cream canvas, the white card and the graphite card. Muted text uses `--pf-muted`. ============================================================ */ /* ---------- the panel must be allowed to shrink ---------- */ /* `.pf-panel` is a grid item of `.pf-main`, and a grid item defaults to `min-width:auto` — it will not shrink below its content. So a table with a 520px floor pushed the panel to 556px inside a 335px track, and because `body` is `overflow-x:clip` the excess did not scroll, it was CUT OFF: the right-hand columns of the fee table were invisible and unreachable on a phone. Silent data loss, not a cosmetic overflow. Scoped to this stylesheet, which only the /answers routes load, so the shared profile pages are untouched. */ .pf-main > .pf-panel{ min-width:0; } /* ---------- data table ---------- */ /* Wrapper scrolls instead of the page, so a four-column fee table cannot introduce horizontal overflow on a 360px screen. `min-width:0` is load-bearing and not defensive boilerplate. A grid or flex item defaults to `min-width:auto`, which means it refuses to shrink below its content — so the table's 520px floor pushed the whole .pf-panel to 556px on a 375px viewport and the body to 576px, and the wrapper never scrolled because it was never constrained. `min-width:0` lets it shrink and hand the overflow to its own scroll container, which is the entire point of the wrapper. Note also that `document.documentElement.scrollWidth` CLAMPS to the viewport and reported 375 while this was broken. Measure `document.body.scrollWidth`, or the panel's own width, when checking for horizontal overflow. */ .ans-tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; min-width:0; max-width:100%; margin:14px 0 4px; border:1px solid var(--pf-line); border-radius:10px; /* The scrollbar is part of the design here, not chrome to hide. Mobile Chrome shows an overlay scrollbar only once a finger is already moving, which is no use to a reader who does not know there is anything to move towards — so the visible hint below carries that job, and this just makes the desktop scrollbar match the page instead of the OS. */ scrollbar-width:thin; scrollbar-color:var(--pf-line) transparent; } .ans-tablewrap::-webkit-scrollbar{height:9px} .ans-tablewrap::-webkit-scrollbar-track{background:transparent} .ans-tablewrap::-webkit-scrollbar-thumb{ background:var(--pf-line); border-radius:999px; } .ans-tablewrap:hover::-webkit-scrollbar-thumb{background:var(--pf-muted)} /* The wrapper is focusable now (AnswerBody gives it tabindex="0", because a scroll container that cannot be focused cannot be scrolled by keyboard), so it needs its own ring rather than the one the sitewide rule paints on links. */ .ans-tablewrap:focus-visible{ outline:3px solid var(--ice-color-text-action,var(--pf-brand)); outline-offset:2px; } /* ---- say that it scrolls ---- `min-width:0` above made the wrapper scroll instead of the page, which fixed the cut-off. It did not fix the reader's problem: at 390px the wrapper is 314px around a 520px table, and a fully-bordered rounded card with no visible scrollbar looks exactly like a table that ends where it ends. A parent comparing Regular against Full Fee saw one column and no reason to think there were two more. The breakpoint is honest rather than approximate. `.ans-table` carries a 520px min-width FLOOR, so every table in the corpus is at least 520px wide by construction — which means below roughly 620px of viewport every one of them scrolls, and the hint is never shown over a table that fits. If that floor ever changes, change this number with it. */ .ans-tablewrap__hint{ display:none; margin:6px 0 0; font-size:12px; line-height:1.5; color:var(--pf-muted); } @media (max-width:620px){ .ans-tablewrap__hint{display:block} /* ⚠️ A VISIBLE SCROLLBAR, not the overlay one, and it is the point. Mobile Chrome and mobile Safari draw an overlay scrollbar that only appears once a finger is already moving, which is no use to a reader who does not know there is anything to move towards. Styling `::-webkit-scrollbar` opts the container out of overlay mode and leaves the bar permanently drawn, so a table that continues past the edge SAYS it continues. The owner reported this on 2026-09-03 as "content and table is chopped out". The page-level cause was `.pf-main`'s grid items refusing to shrink (see ice-profile-v1.css §5); this is the other half — a table that scrolls correctly still reads as a table that ends where the card ends. */ .ans-tablewrap{ scrollbar-width:auto; scrollbar-color:var(--pf-muted) var(--surface-tint); } .ans-tablewrap::-webkit-scrollbar{ height:8px; -webkit-appearance:none; } .ans-tablewrap::-webkit-scrollbar-track{ background:var(--surface-tint); border-radius:999px; } .ans-tablewrap::-webkit-scrollbar-thumb{ background:var(--pf-muted); border:0; border-radius:999px; } } /* `min-width` is a FLOOR, so the wrapper above scrolls rather than the table compressing. It was written as `min(100%,520px)` first, which resolves to the container width on a phone and therefore did nothing: the four-column fee table crammed into 314px with every rupee figure wrapping onto two lines. A money table that wraps is a money table people misread. */ .ans-table{ width:100%; min-width:520px; border-collapse:collapse; font-size:13.5px; line-height:1.45; /* These tables are mostly money and mostly compared down the column: eight semesters against four years, Regular against Full Fee. The system stack ships proportional figures by default, so "Rs 55,792" and "Rs 4,22,128" set to different widths and the digits do not line up under each other. Tabular figures are the whole reason the feature exists, and a fee table is the clearest case for it on the site. */ font-variant-numeric:tabular-nums; } .ans-table caption{ caption-side:bottom; padding:9px 12px 10px; font-size:12px; color:var(--pf-muted); text-align:left; border-top:1px solid var(--pf-line); } .ans-table th, .ans-table td{ padding:9px 12px; text-align:left; vertical-align:top; border-top:1px solid var(--pf-line); } .ans-table thead th{ border-top:0; background:var(--surface-tint); font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--pf-muted); white-space:nowrap; } .ans-table tbody th{ font-weight:700; color:var(--pf-ink); } .ans-table td{ color:var(--pf-ink); } .ans-table tbody tr:nth-child(even) td, .ans-table tbody tr:nth-child(even) th{ background:var(--surface-tint); } /* ---------- library grid ---------- */ .ans-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:var(--pf-gap); margin:0; padding:0; list-style:none; } /* ---- the card is the
  • ; the LINK is the question ---- The anchor used to wrap the whole card, which made its accessible name the question AND the summary AND the date — 230 to 290 characters of "anchor text" per card, on 65 pages. That is what a screen reader reads out in a link list and what a crawler records as the link's label, and at that length it is neither. So the anchor is the question only, and `.ans-card__q::after` stretches an invisible box over the card to keep the whole surface clickable. The reader loses nothing: same hit area, same hover, and the summary underneath becomes selectable text rather than part of a link. */ .ans-card{ position:relative; display:flex; flex-direction:column; gap:6px; padding:14px var(--pf-pad) 15px; border:1px solid var(--pf-line); border-radius:var(--pf-radius); background:var(--pf-surface); color:inherit; min-height:44px; } .ans-card:hover{ background:var(--surface-tint); } /* The ring goes on the CARD, because the focused thing a keyboard user sees should be the whole target, not the two lines of heading inside it. */ .ans-card:focus-within{ outline:3px solid var(--focus-ring); outline-offset:3px; } .ans-card__q{ font-size:15px; font-weight:800; letter-spacing:-.012em; line-height:1.3; color:var(--pf-brand); text-decoration:none; } .ans-card__q::after{ content:""; position:absolute; inset:0; border-radius:inherit; } /* The card already carries the ring via :focus-within, so the anchor must not draw a second one inside it. */ .ans-card__q:focus-visible{ outline:none; } html[data-theme="dark"] .ans-card__q{ color:var(--pf-ink); } .pf-panel .ans-card__q:not(.pf-btn){ color:var(--pf-brand); } html[data-theme="dark"] .pf-panel .ans-card__q:not(.pf-btn){ color:var(--pf-ink); } .ans-card__a{ margin:0; font-size:13px; line-height:1.5; color:var(--pf-muted); } .ans-card__meta{ margin-top:auto; padding-top:4px; font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--pf-muted); } /* ---------- category index ---------- */ .ans-cats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:var(--pf-gap); margin:0; padding:0; list-style:none; } /* Same title-as-link-plus-overlay pattern as `.ans-card` above, and for the same reason. The section name was also a `` — emphasis markup doing a heading's job inside a link — and is now the anchor itself. */ .ans-cat{ position:relative; display:block; padding:14px var(--pf-pad); border:1px solid var(--pf-line); border-radius:var(--pf-radius); color:inherit; } .ans-cat:hover{ background:var(--surface-tint); } .ans-cat:focus-within{ outline:3px solid var(--focus-ring); outline-offset:3px; } .ans-cat__name{ display:block; font-size:15px; font-weight:800; letter-spacing:-.012em; color:var(--pf-brand); text-decoration:none; } .ans-cat__name::after{ content:""; position:absolute; inset:0; border-radius:inherit; } .ans-cat__name:focus-visible{ outline:none; } html[data-theme="dark"] .ans-cat__name{ color:var(--pf-ink); } .pf-panel .ans-cat__name:not(.pf-btn){ color:var(--pf-brand); } html[data-theme="dark"] .pf-panel .ans-cat__name:not(.pf-btn){ color:var(--pf-ink); } .ans-cat__blurb{ display:block; margin-top:3px; font-size:12.5px; line-height:1.5; color:var(--pf-muted); } .ans-cat em{ display:block; margin-top:7px; font-style:normal; font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--pf-muted); } /* ---------- sources ---------- */ .ans-sources{ margin:16px 0 0; padding:13px var(--pf-pad) 14px; border:1px solid var(--pf-line); border-radius:10px; background:var(--surface-tint); } .ans-sources > p{ margin:0 0 7px; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--pf-muted); } .ans-sources ul{ margin:0; padding-left:17px; } .ans-sources li{ font-size:12.5px; line-height:1.55; color:var(--pf-ink); } .ans-sources li + li{ margin-top:5px; } /* ---------- the ICE block ---------- */ /* Set apart on purpose: a reader should be able to see where the sourced answer stops and the college starts, without having to work it out. The separation is carried by the uppercase label and by sitting on the plain card surface, where `.ans-sources` directly above it sits on the tint. That is deliberate rather than decorative — it was a 3px accent border on one side first, which is a stock "callout" tell and reads as generated rather than designed. The label is the signal; the border was noise. */ .ans-ice{ margin:16px 0 0; padding:13px var(--pf-pad) 14px; border:1px solid var(--pf-line); border-radius:10px; background:var(--pf-surface); } .ans-ice > p:first-child{ margin:0 0 5px; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--pf-muted); } .ans-ice > p:last-child{ margin:0; font-size:13.5px; line-height:1.6; color:var(--pf-ink); } /* ---------- the system group heading ---------- */ /* Renders on /answers only once the library covers more than one admission system (docs/36). Written now so the session that adds the second system adds a data record rather than a template and a stylesheet. Deliberately NOT a `.pf-panel`: it labels the panels below it, so giving it the same card treatment would make it look like one more section rather than the heading over several. It is a rule, a heading and a line of context. */ .ans-systemhead{ margin:26px 0 -2px; padding:0 2px 12px; border-bottom:2px solid var(--pf-ink); } .ans-systemhead h2{ margin:0 0 4px; font-size:22px; line-height:1.2; letter-spacing:-.02em; color:var(--pf-ink); } .ans-systemhead p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--pf-muted); text-wrap:pretty; } .ans-systemhead:first-of-type{ margin-top:6px; } /* ---------- the links block ---------- */ /* Contextual internal links inside an answer body (docs/31 §3.7, shipped 2026-09-01). Deliberately quiet: this is an aside inside prose, not a call to action, and it sits between paragraphs rather than at the end of the page where `.ans-grid` already handles "related answers" as cards. No plate, no tint, no border box. A rule above and the same uppercase micro label the ICE block uses is enough separation, and one more bordered card in a column that already stacks `.ans-tablewrap`, `.ans-figure`, `.ans-sources` and `.ans-ice` would read as a page made of boxes. */ .ans-links{ margin:18px 0 6px; padding:13px 0 0; border-top:1px solid var(--pf-line); } .ans-links__lead{ margin:0 0 7px; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--pf-muted); } .ans-links ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; } /* The marker is a rule rather than a bullet or an arrow glyph: an arrow reads as a button affordance and the list is already a list. Decorative, so a pseudo-element is safe here in a way it is not for a word. */ .ans-links li{ position:relative; padding-left:18px; } .ans-links li::before{ content:""; position:absolute; left:0; top:.62em; width:10px; height:2px; background:var(--pf-line); } .ans-links a{ font-size:14px; line-height:1.5; font-weight:600; color:var(--pf-brand); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:var(--pf-line); } .ans-links a:hover{ text-decoration-color:currentColor; } .ans-links a:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:3px; border-radius:3px; } /* Same inversion the answer cards use: crimson does not carry enough contrast on the graphite card, so dark mode takes the body ink and keeps the underline as the affordance. */ html[data-theme="dark"] .ans-links a{ color:var(--pf-ink); } /* ---------- breadcrumb ---------- */ /* Now a `nav > ol > li` (2026-08-22) so the BreadcrumbList in this page's JSON-LD has a counterpart in the accessibility tree. The separator is a list marker rather than a text node between two anchors, which is what lost its trailing space in the build and rendered "Answers ·Fees and scholarships" on all 59 pages. `::before` is safe for a decorative separator in a way it is not for a word: it carries no meaning, so nothing is lost when a screen reader skips it, and `aria-hidden` is not available on a pseudo-element. */ .ans-crumb{ margin:0 0 10px; font-size:12px; color:var(--pf-muted); } .ans-crumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:0 6px; margin:0; padding:0; list-style:none; } .ans-crumb li{ display:flex; align-items:center; gap:6px; } .ans-crumb li + li::before{ content:'\00B7'; color:var(--pf-line); font-weight:700; } /* `.pf-panel a:not(.pf-btn)` in ice-profile-v1.css is (0,2,1); a bare `.ans-crumb a` is (0,1,1) and loses, so this rule did nothing and the breadcrumb rendered in the terracotta link colour — louder than the h1 it sits above, with a hover that made it quieter instead of stronger. Matching the specificity is the fix; `!important` would have hidden the reason. */ .pf-panel .ans-crumb a:not(.pf-btn){ color:var(--pf-muted); text-decoration-color:var(--pf-line); text-underline-offset:3px; /* 12px text in a 16px line box is a 16px tap target. The padding takes the hit area past the 24px WCAG 2.5.8 floor without moving the text, because the negative margin gives the space back to the layout. */ padding:5px 2px; margin:-5px -2px; } .pf-panel .ans-crumb a:not(.pf-btn):hover{ color:var(--pf-ink); text-decoration-color:currentColor; } .ans-crumb [aria-current='page']{ color:var(--pf-ink); font-weight:600; } /* ---------- reading the answer ---------- Everything below is the answer leaf and the category hub read as prose rather than as a card. It was measured at 89ch on a 1280px screen at 14px, which is outside the 65-75ch the design system asks for and well outside what holds a reader through a two-thousand-word sourced answer. */ /* The h1 had no rule anywhere. `.pf-panel` styles h2 and h3, so the question — the whole point of the page, on 65 of them — fell back to the UA default: 2em, weight 400, `letter-spacing:normal`, and the inherited 1.62 body leading, which set a two-line heading with more air between its lines than a paragraph has. It read as a heading borrowed from a different type system than everything under it, because it was. */ .pf-panel h1{ margin:0 0 10px; font-size:clamp(1.55rem,1.2rem + 1.5vw,2.05rem); font-weight:800; letter-spacing:-.028em; line-height:1.14; color:var(--pf-brand); text-wrap:balance; max-width:26ch; } /* The sentence that IS the answer, and the page's declared `speakable` target. It rendered at exactly the size and colour of the body copy that follows it, so the one paragraph a reader in a hurry needs looked like the first of several. Bigger, and in the ink rather than the muted role. */ /* `.pf-panel > .ans-lede` rather than `.ans-lede !important`: two classes beat the one-class-one-element `.pf-panel > p` it has to outrank, and the next person can see why it wins by reading it. */ .pf-panel > .ans-lede{ margin:0 0 16px; max-width:64ch; font-size:16px; line-height:1.55; color:var(--pf-ink); text-wrap:pretty; } /* Prose measure. Capped on the TEXT blocks only, so tables, card grids and the source block keep the full panel width they need. */ .pf-panel > p, .pf-panel > .pf-list, .pf-panel > .pf-steps, .pf-panel > .pf-defs, .pf-panel > .pf-fine{ max-width:70ch; } .pf-panel > p{ font-size:15px; line-height:1.62; text-wrap:pretty; } /* Section rhythm. `.pf-panel h2` shipped `margin:5px 0 6px`, which collapses against the paragraph above to 12px — the same gap two paragraphs get from each other, so a section boundary on a long answer was not legible as a boundary at all. More space above than below, which is what makes a heading belong to what follows it. Scoped by the fact that only the three /answers routes load this stylesheet. */ .pf-panel h2{ margin:2rem 0 .5rem; max-width:34ch; text-wrap:balance; } .pf-panel h3{ margin:1.5rem 0 .45rem; max-width:38ch; text-wrap:balance; } .pf-panel > *:first-child{ margin-top:0; } /* The section blurb on the /answers hub. It used to be piped into `.pf-kicker`, an 11px uppercase label slot, which turned an 80-character sentence into 80 characters of tracked capitals. */ .ans-sectionlede{ margin:0 0 14px; max-width:66ch; font-size:14.5px; line-height:1.6; color:var(--pf-muted); text-wrap:pretty; } /* ---------- grid items must fill their cell ---------- `.ans-cat` and `.ans-card` are anchors inside `
  • ` grid items. The `li` stretches to the row height; the anchor did not, so a row of section cards had ragged bottoms and the "12 ANSWERS" labels sat at three different heights. One line each, and the row reads as a row. */ .ans-cats > li, .ans-grid > li{ display:grid; } /* ---------- source links ---------- */ /* Same 24px tap-target argument as the breadcrumb: 12.5px text in a 19px line box, in a list where the links sit directly above one another. */ .pf-panel .ans-sources a:not(.pf-btn){ /* 5px, not 4: measured, 4px produced a 23px hit box and the WCAG 2.5.8 floor is 24. One pixel of padding is the difference between passing and nearly. */ padding:5px 2px; margin:-5px -2px; text-underline-offset:3px; } /* ---------- figures ---------- Added 2026-08-31 with the `figure` body block (docs/31 §4). Two jobs a bare image does not do here. THE PLATE. A hand-authored SVG figure is dark strokes and dark labels on a transparent ground, so in graphite dark mode it becomes a black diagram on a near-black card: the figure disappears and the answer keeps the page weight. The plate is a fixed light ground in BOTH themes, which is the same decision for the same reason as the partner logo plates in partners.css (docs/30), with a heavier border in dark to seat it. It rides on the image itself rather than on the
    , so the caption below stays on the card and reads as page text in both themes rather than as part of the picture. This is the one place in this file that names a colour literal instead of a --pf-* role, and the literal is written once, as a local token. THE BOX. `width` and `height` are mandatory on the block (AnswerBody throws without them) so the browser knows the aspect ratio before the file arrives; `height:auto` is what lets that intrinsic pair scale down instead of stretching once `max-width` bites on a phone. */ .ans-figure{ --ans-plate:#FFFFFF; --ans-plate-brd:rgba(19,35,75,.12); --ans-plate-shadow:0 1px 2px rgba(19,35,75,.06); margin:18px 0 6px; } html[data-theme="dark"] .ans-figure{ --ans-plate-brd:rgba(0,0,0,.4); --ans-plate-shadow:0 1px 3px rgba(0,0,0,.4); } .ans-figure img{ display:block; max-width:100%; height:auto; margin:0 auto; padding:10px; background:var(--ans-plate); border:1px solid var(--ans-plate-brd); border-radius:10px; box-shadow:var(--ans-plate-shadow); } .ans-figure figcaption{ margin:9px 2px 0; font-size:13px; line-height:1.55; color:var(--pf-muted); text-wrap:pretty; } /* The credit is a licence obligation for CC BY, CC BY-SA and ODbL files, so it is set as text rather than as fine print: same size as the caption, only the emphasis differs. */ .ans-figure__credit{ font-style:italic; } @media (max-width:640px){ .ans-table{ font-size:13px; } .ans-table th,.ans-table td{ padding:8px 10px; } .ans-figure img{ padding:7px; } } /* ══════════════════════════════════════════════════════════════════════════ THE IMAGE-CENTRIC LIBRARY, 2026-09-03 ------------------------------------------------------------------------ The answer library renders the owner's reference design out of `src/components/profile/`, whose styles are in `public/css/ice-feed.css`. Everything below is what those components need INSIDE the `.pf` shell, plus the surfaces the library has and a college profile does not: the reduced profile head on a category hub, the lead band on an answer, the author row and the share row. Values are measured off `NCE Profile v2.dc.html`. Where a token replaces one of its hexes the reason is on the rule. ══════════════════════════════════════════════════════════════════════════ */ /* ── the feed components inside the .pf shell ── `ice-feed.css` draws them against `--ice-color-*`, which resolves in both themes. What it cannot know is the shell they sit in: `.pf-main` is a grid whose items default to `min-width:auto`, and the mesh sheet owns the library's surfaces. */ .pf-main > .post{ min-width:0; margin:0; } .page-profile .post{ background:var(--ice-post); border-color:var(--ice-post-edge); box-shadow:var(--ice-post-shadow); } /* The prose roles the `.pf-panel` rules above give a panel, applied inside a post body. `.post__body p` in ice-feed.css is (0,1,1) and outranks a plain utility class, so each of these has to name its parent to win. */ .post__body > .ans-lede{ max-width:64ch; } .post__body > .pf-fine{ margin:12px 0 0; font-size:12.5px; line-height:1.5; color:var(--pf-muted); max-width:70ch; } .post__body .ans-links a{ font-size:14px; } /* ── the lead band at the top of an answer ── The reference opens a feed post on an image running the card's full width, under the author row. Here it sits INSIDE the panel's 16px padding at the reference's inner-card radius instead of bleeding to the edge: `.pf-panel` has no `overflow:hidden` and adding one would clip the focus rings the cards below it draw outside their own box. A DRAWN plate fills its frame; a document crop is a figure and keeps the light plate `.ans-figure` gives it, because a table cropped to a 40:12 band is an unreadable table. */ .pf-lead{ margin:0 0 16px; } .pf-lead img{ display:block; width:100%; height:auto; border-radius:18px; } .pf-lead--plate img{ aspect-ratio:1200 / 360; object-fit:cover; background:var(--pf-field); } .pf-lead--figure img{ background:#FFFFFF; border:1px solid rgb(19 35 75 / 12%); padding:10px; max-height:420px; object-fit:contain; } html[data-theme="dark"] .pf-lead--figure img{ border-color:rgb(0 0 0 / 40%); } .pf-lead figcaption{ margin:9px 2px 0; font-size:13px; line-height:1.55; color:var(--pf-muted); text-wrap:pretty; } /* ── the reduced profile head on a category hub ── A `
    `, so `audit:depth` and `audit:uniqueness` both strip it: nine hubs sharing a head must add no words to a floor they did not earn and must dilute no uniqueness score. Same reasoning as `.post__head`. */ .pf-head{ position:relative; margin:0 0 var(--pf-gap); border:1px solid var(--ice-post-edge,var(--pf-line)); border-radius:26px; overflow:hidden; background:var(--ice-post,var(--pf-surface)); box-shadow:var(--ice-post-lift); } .pf-head__cover{ position:relative; height:clamp(148px,17vw,214px); background:var(--pf-field); } .pf-head__cover :is(img,picture){ display:block; width:100%; height:100%; } .pf-head__cover img{ object-fit:cover; object-position:var(--media-focus,center 42%); } .pf-head__veil{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgb(4 9 36 / 34%),rgb(4 9 36 / 0) 52%); } .pf-head__pills{ position:absolute; left:16px; top:16px; z-index:2; margin:0; display:flex; flex-wrap:wrap; gap:8px; } .pf-head__pill{ display:inline-flex; align-items:center; padding:6px 14px; border-radius:999px; background:rgb(12 26 56 / 52%); border:1px solid rgb(255 255 255 / 28%); color:#F0A97A; font-size:12px; font-weight:700; letter-spacing:.12em; line-height:1.4; text-transform:uppercase; } @supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){ .pf-head__pill{ -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); } } .pf-head__body{ position:relative; z-index:1; padding:0 clamp(18px,2.4vw,30px) 20px; display:flex; flex-wrap:wrap; align-items:flex-start; gap:20px; } /* The reference's avatar is 132px on a 7px ring pulled up 78px. A hub is one rung below the library index, so its mark is the section plate at 96px rather than the crest: the two heads should not read as the same page. */ .pf-head__mark{ flex:0 0 auto; width:clamp(72px,7vw,96px); aspect-ratio:1; margin-top:clamp(-56px,-4.4vw,-36px); border-radius:26px; overflow:hidden; box-shadow:0 0 0 6px var(--pf-surface),0 18px 32px -16px rgb(4 9 36 / 50%); background:var(--pf-field); } .pf-head__mark img{ display:block; width:100%; height:100%; object-fit:cover; } .pf-head__text{ flex:1 1 280px; min-width:0; padding-top:18px; } .pf-head__text h1{ margin:0; max-width:24ch; font-size:clamp(24px,2.2vw,34px); font-weight:600; letter-spacing:-.022em; line-height:1.12; color:var(--pf-ink); text-wrap:balance; } /* ⚠️ `overflow-wrap:anywhere`, same reason as `.pf-id__handle`: the handle is a URL path with no spaces, `.pf-head` is `overflow:hidden`, and at 320px the tail was cut off rather than wrapped. */ .pf-head__handle{ margin:7px 0 0; font-size:15.5px; line-height:1.5; color:var(--pf-muted); overflow-wrap:anywhere; } .pf-head__stats{ display:flex; flex-wrap:wrap; gap:6px 22px; margin:12px 0 0; padding:0; list-style:none; font-size:15px; line-height:1.4; font-variant-numeric:tabular-nums; } .pf-head__statv{ font-weight:600; color:var(--pf-ink); } .pf-head__statk{ color:var(--pf-muted); } .pf-head__acts{ display:flex; flex-wrap:wrap; gap:10px; padding-top:18px; } @media (max-width:640px){ .pf-head{ border-radius:22px; } .pf-head__acts{ width:100%; padding-top:4px; } .pf-head__acts .pf-btn{ flex:1 1 auto; } } /* ── the mosaic of the library's own figures ── `ice-feed.css` draws the grid; this gives the tiles the library's field colour and the hover a linked tile needs, which a college gallery does not because its tiles are not links. */ .pf .gal__tile{ background:var(--pf-field); } .pf .gal__tile a{ transition:opacity 160ms cubic-bezier(.2,.7,.2,1); } .pf .gal__tile a:hover{ opacity:.82; } /* ── the thumbnail cards ── `.pcard` in `ice-feed.css` is drawn for a post; inside the library it takes the shell's own hairline and ink so it matches `.ans-card` beside it. */ .page-profile .pcard{ border-color:var(--ice-inner-edge,var(--pf-line)); } .page-profile .pcard:hover{ box-shadow:var(--ice-inner-hover); } .page-profile .pcard__q{ color:var(--pf-brand); } html[data-theme="dark"] .page-profile .pcard__q{ color:var(--pf-ink); } /* ── the author row on an answer ── A `
    `, stripped by both gates. The reference's post head, with the crest in place of a monogram. */ .ans-by{ display:flex; align-items:center; gap:12px; margin:0 0 14px; } .ans-by__crest{ flex:none; width:44px; height:44px; border-radius:15px; background:var(--pf-field) url('/img/ice-crest.png') center/74% no-repeat; box-shadow:0 10px 18px -10px rgb(12 26 56 / 65%),inset 0 2px 3px rgb(255 255 255 / 30%); } .ans-by__meta{ min-width:0; display:grid; gap:1px; } .ans-by__name{ display:block; margin:0; font-size:16px; font-weight:600; line-height:1.35; letter-spacing:-.005em; color:var(--pf-ink); } .ans-by__sub{ display:block; margin:0; font-size:13px; line-height:1.45; color:var(--pf-muted); } /* ── the share row ── A `