/* * Befello — Essay single template. * * Split out of style.css so it loads only where it is used. * Every selector here is scoped to .befello-essay-page or .essay-*, so * nothing in it can reach another template. */ /* ========================================================================= SECTION 2 — ESSAY SINGLE TEMPLATE ------------------------------------------------------------------------- Matched to the Opportunity template above, and to the same design system core: brand blue for actions, yellow for category, white surfaces separated by hairlines, soft 14px card corners, no shadows. Tokens are --bfe-* scoped to .befello-essay-page, and every one of them aliases a --befello-* core token, so the two templates cannot drift. ========================================================================= */ /* ------------------------------------------------------------------------- 2.1 Tokens Namespaced --bfe-* and scoped to .befello-essay-page, so they can never collide with Section 1's --bf-* tokens, nor with theme/plugin variables. ------------------------------------------------------------------------- */ .befello-essay-page { --bfe-bg: var(--befello-surface); --bfe-card: var(--befello-surface); --bfe-ink: var(--befello-text); --bfe-body-ink: var(--befello-text); --bfe-muted: var(--befello-text-secondary); --bfe-line: var(--befello-border); --bfe-brand: var(--befello-blue); /* fills and dots */ --bfe-blue: var(--befello-blue-dark); /* accent TEXT on white */ --bfe-blue-on-tint: var(--befello-accent-on-tint); /* on the wash */ --bfe-blue-dark: var(--befello-blue-dark); --bfe-blue-soft: var(--befello-blue-soft); --bfe-blue-border: var(--befello-blue-soft-border); --bfe-yellow: var(--befello-yellow); --bfe-yellow-soft: var(--befello-yellow-soft); /* The voltage, and the type colour that goes on top of it. */ --bfe-voltage: var(--befello-voltage); --bfe-voltage-ink: var(--befello-canvas); /* The teaching band's warm surface. Arc's students sub-palette, scoped to the one section that switches from reporting to teaching. */ --bfe-warm: var(--befello-canvas-warm); --bfe-warm-deep: var(--befello-canvas-deep); --bfe-warm-accent: var(--befello-warm-accent); /* Arc's tight scale: 8px carries cards, chips and controls alike. The three names are kept so the rules below still read. */ --bfe-radius-sm: var(--bf-radius-btn); /* 8 · controls */ --bfe-radius-md: var(--bf-radius-card); /* 8 · badges, tags */ --bfe-radius-lg: var(--bf-radius-card); /* 8 · cards */ --bfe-shadow-card: none; /* Type scale, in px because this section was authored in px. Display comes back up — the previous system compressed the title to 28px on the theory that whitespace carried hierarchy; Arc runs display at 40px with -4% tracking and lets it lead. The reading sizes move too, but for a different reason: the essay is now set in the editorial serif rather than the UI sans, so it needs a point more size and a touch more leading to sit right. */ --bfe-text-caption: 12px; --bfe-text-sm: 14px; --bfe-text-base: 17px; /* Arc body is 17, not 16 */ --bfe-text-lg: 19px; /* the essay, in Newsreader */ --bfe-text-h4: 20px; --bfe-text-h3: 22px; --bfe-text-h2: 28px; --bfe-text-h1: clamp(30px, 1.35rem + 2.2vw, 40px); font-family: var(--befello-font); font-size: var(--bfe-text-base); font-weight: var(--bf-weight-body); /* Arc body is 500 */ line-height: 1.5; color: var(--bfe-body-ink); background: var(--bfe-bg); /* The two full-bleed bands paint with a pseudo-element that reaches 100vw past each edge. `clip` rather than `hidden` because hidden would create a scroll container and break `position: sticky` on any descendant; clip does the same visual job with no side effects. */ overflow-x: clip; } .befello-essay-page *, .befello-essay-page *::before, .befello-essay-page *::after { box-sizing: border-box; } .befello-essay-page .befello-essay { margin: 0; padding: 0; background: transparent; } .befello-essay-page svg { display: block; flex: 0 0 auto; } /* ------------------------------------------------------------------------- 2.2 Layout One reading column plus a narrow context rail. The reading column is the page; the rail exists so the essay does not have to carry its own metadata inline. The measure is the number that matters: 680px of Inter at 18px is about 71 characters, inside the 65–75ch the system asks for (§2). That is what sets the shell width, not the other way round — 680 + 64 gutter + 236 rail = 980. Related essays sit outside the reading column deliberately. They are not the essay, and at the full 980 three cards make one clean row instead of a 2×2 block hanging off the bottom of a narrow column. ------------------------------------------------------------------------- */ /* --- Width ------------------------------------------------------------- FULL WIDTH, not a 980px box. Section 0 of style.css already frees the GeneratePress wrappers on body.single-essay, so this rule was the only thing still containing the essay. The gutter grows with the viewport rather than sitting at a fixed 20px: on a 2560px monitor a 20px gutter reads as an accident, not a decision. What full width does NOT mean here is a full-width line of text. The prose keeps its 66-character measure (see .essay-prose) — that is a readability floor, not a stylistic preference, and stretching an essay to 2000px would undo the entire point of the reading container. The space goes where it helps instead: the hero, the two full-bleed bands, the sidebar and the related-essays grid. Scoped to .essay-shell, which lives inside .befello-essay-page. The site header, navigation, logo and footer are outside it and are not selected by anything in this file. */ .essay-shell { width: 100%; padding-block: 32px 96px; /* 3vw, not 5. At 5vw a 1024px tablet spent 102px on gutters and the reading column dropped to 52 characters — NARROWER than the 980px box this replaced. The gutter should only get generous once there is genuinely space to spare. */ padding-inline: clamp(20px, 3vw, 96px); } /* A ceiling on the LAYOUT, not on the page. Without one, the two-column grid on a 2560px screen puts a 2000px gap between the reading column and the sidebar — which is a hole, not whitespace. 1720px is wide enough that a 1440px laptop and a 1920px monitor both fill edge to edge (the gutter takes them under the cap), and only genuinely huge screens see any margin at all. */ .essay-layout { width: min(100%, 1720px); margin-inline: auto; } .essay-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "context" "related"; row-gap: 48px; } .essay-main { grid-area: main; min-width: 0; } .essay-context { grid-area: context; min-width: 0; } .essay-related { grid-area: related; min-width: 0; } @media (min-width: 900px) { .essay-layout { /* Grows only when the viewport can afford it. Fixed at 280 it took 44px off the reading column at 1024px, where there is nothing spare; the clamp holds it at the old 236 there and lets it reach 300 on a wide monitor, where the About list stops wrapping "Eligible nationality" onto three lines. */ grid-template-columns: minmax(0, 1fr) clamp(236px, 20vw, 300px); grid-template-areas: "main context" "related related"; column-gap: clamp(64px, 3vw, 112px); row-gap: 72px; } } /* --- Back ---------------------------------------------------------------- */ .essay-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 28px; padding-block: 4px; /* 24px target without moving the line */ color: var(--bfe-muted); font-size: var(--bfe-text-sm); font-weight: 500; text-decoration: none; } .essay-back:hover, .essay-back:focus-visible { color: var(--bfe-blue); } /* ------------------------------------------------------------------------- 2.3 Header Programme, then title, then topics, then the facts. Deliberately in that order: the programme is how someone arrived and what makes the essay worth reading, so it leads rather than sitting in a sidebar. ------------------------------------------------------------------------- */ /* The header is one block; the question's own top margin sets the gap after it, so the hero only has to not add a second one. */ .essay-hero { margin: 0; } .essay-programme { margin: 0 0 14px; } /* The page's one claim, and it only turns green when the data says so — see befello_essay_outcome(). Without a stated success the same badge is neutral, which is the difference between reporting and implying. §3: green is for positive semantic meaning, never decoration. */ .essay-programme__badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid var(--bfe-line); border-radius: var(--bfe-radius-md); /* pill badge (DESIGN.md) */ background: var(--bfe-card); color: var(--bfe-muted); font-size: var(--bfe-text-sm); font-weight: 600; line-height: 20px; text-decoration: none; /* Programme names run long, and this one sits in a badge. */ overflow-wrap: anywhere; } .essay-programme__badge.is-successful { background: var(--befello-success-soft); border-color: transparent; color: var(--befello-success-text); } .essay-programme__badge:hover, .essay-programme__badge:focus-visible { text-decoration: underline; text-underline-offset: 3px; } /* Drawn rather than loaded: two borders on a rotated box, taking its colour from the badge so it can never disagree with it. */ .essay-programme__tick { position: relative; width: 12px; height: 12px; flex: 0 0 auto; } .essay-programme__tick::before { content: ""; position: absolute; inset-inline-start: 3px; top: 0; width: 5px; height: 10px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); } .essay-title { margin: 0; color: var(--bfe-ink); /* display-xl: 28px / 700. An essay title is the one place this theme keeps the LOUD display step rather than the quiet 22/500 the Opportunity hero takes — an essay page opens on words, with no hero image to establish where you are, so the title has to do that job. It still drops from a 34–48px clamp; no viewport scaling, because 28px needs none. */ font-size: var(--bfe-text-h1); font-weight: 700; line-height: 1.4; letter-spacing: 0; /* A pasted URL as a title is one unbroken word. min-width:0 lets the grid track shrink, but the text still needs permission to break or it runs straight out of the page — measured at 1238px inside a 320px viewport before this. */ overflow-wrap: break-word; text-wrap: balance; } .essay-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; } /* Soft blue, not the yellow §7 gives Opportunity categories. Essay topics answer a different question — what the prompt asks for, rather than what kind of thing this is — and the two taxonomies appear near each other often enough that sharing one colour would blur them. Blue-dark on blue-soft, so the label still passes on a tinted ground. */ .essay-topic { display: inline-block; padding: 4px 10px; border-radius: var(--bfe-radius-md); /* pill tag (DESIGN.md) */ background: var(--bfe-blue-soft); color: var(--bfe-blue-on-tint); font-size: var(--bfe-text-sm); font-weight: 500; line-height: 20px; text-decoration: none; overflow-wrap: anywhere; } .essay-topic:hover, .essay-topic:focus-visible { text-decoration: underline; text-underline-offset: 3px; } .essay-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 18px 0 0; color: var(--bfe-muted); font-size: var(--bfe-text-sm); font-weight: 500; } /* Each fact is its own span so the separators can be real elements rather than punctuation baked into a string — a missing fact then takes its separator with it instead of leaving a stray middot. */ .essay-fact { white-space: nowrap; } /* Border-grey here measured 1.31:1 and simply did not show, which ran the three facts together. The system has no fourth neutral between border and secondary text (§3), so the separator takes the same colour as the text it separates — one character, and it has to be legible. */ .essay-facts__sep { color: var(--bfe-muted); } /* ------------------------------------------------------------------------- 2.4 Question, then answer The whole relationship is carried here, and without a box. The question is inset behind a rule the way a quotation is; the answer runs at full measure with nothing around it. Marked-up question, plain answer — the shape says "this was asked, this was written" before the labels are read. A filled panel round the question was the alternative and is worse: it makes the prompt the loudest object on a page whose subject is the essay. ------------------------------------------------------------------------- */ /* Very short labels, which is the one case §2 allows caps for. They are signposts, not headings, so they stay small and quiet. */ .essay-label, .essay-eyebrow { margin: 0 0 10px; color: var(--bfe-muted); /* The mono eyebrow, matching Section 1's .befello-eyebrow. Restated here rather than shared because Section 1's component is scoped to .befello-opportunity and this template is not inside it. */ font-family: var(--befello-font-mono); font-size: var(--bfe-text-caption); font-weight: 700; line-height: 1.4; letter-spacing: 0.6px; text-transform: uppercase; } .essay-eyebrow--loose { font-weight: 400; letter-spacing: 1.8px; } .essay-eyebrow--on-voltage { color: var(--bfe-voltage-ink); opacity: 0.75; } /* --- The prompt: the page's one voltage band ---------------------------- Full-bleed blue, cream type, then the page returns to cream and stays there. Arc runs this band at 72px of vertical padding with no inner radius and lets the colour run margin-edge to margin-edge. The bleed is a PSEUDO-ELEMENT, not a negative margin. The usual `margin-inline: calc(50% - 50vw)` trick assumes the block is centred in the viewport; this one sits in the left column of a two-column grid, so that maths put the band's left edge off-screen and clipped the first few characters of every line. Measured: the question lost its opening word at every width above the single-column breakpoint. Stretching a background 100vw past both edges needs no idea where the column is. The text never moves — only the paint does. */ .essay-question { position: relative; /* Forces a stacking context so the z-index:-1 pseudo-element below is contained by THIS element rather than escaping behind the page background — which is exactly what happened without it: the band painted underneath .befello-essay-page's own fill and vanished, leaving cream text on cream. */ isolation: isolate; margin-top: var(--bf-space-12); padding-block: var(--bf-space-18); color: var(--bfe-voltage-ink); } .essay-question::before { content: ""; position: absolute; /* 100vw each side is far more than any gutter, so the band reaches the viewport edge whatever the layout does. .befello-essay-page carries the overflow-x: clip that stops it becoming a scrollbar. */ inset: 0 -100vw; z-index: -1; background: var(--bfe-voltage); } /* The inner wrapper carries no measure of its own — see the text rule below for why the constraint has to live on the element that is actually set in the display face. */ .essay-question__inner { max-width: 100%; } /* Display type, not body. The prompt is a piece of writing being quoted, so it gets the display treatment Arc gives its press quote: 28px at 700 with the tracking pulled negative. */ /* The prompt's measure, and it belongs HERE rather than on the wrapper. 1ch resolves against the element's own font: on the wrapper that is the UI sans at 17px, so a "62ch" cap there measured 586px — the width of 62 characters of a font the question is not set in. On this element it is the 28px display face, so the number means what it says. 56ch rather than the old 46: the band is full-bleed now, and a question stacked five lines deep in the corner of a very large blue rectangle read as an accident. The blue that remains to the right of it is the point of the band, not a gap to be filled. */ .essay-question__text { margin: 0; max-width: min(100%, 56ch); color: var(--bfe-voltage-ink); font-size: var(--bfe-text-h2); /* 28px · display-md */ font-weight: 700; line-height: 1.07; letter-spacing: -0.05em; overflow-wrap: break-word; text-wrap: pretty; } /* The separator. One hairline doing the work a heading would otherwise have to do. */ .essay-answer { margin-top: 36px; /* CENTRED, and the only element on the page that is. The head row and the card are constrained together so they keep one shared edge — that is what stops the "1 min read" caption drifting to the far side of a 1360px column, away from the label it belongs to. `auto` centres the pair inside .essay-main; safe here because .essay-answer is an ordinary block in normal flow, and it is .essay-main above it that is the grid item. 960px rather than a ch-derived value. The card is deliberately wider than the text inside it: the prose keeps its own 66-character measure and centres within the card, so the reading line never stretches even though the section does. Both are inert below ~960px, so mobile is untouched and no media query is needed to say so. */ max-width: 960px; margin-inline: auto; } /* The card's own padding. */ .essay-answer__container { --bfe-card-pad: clamp(24px, 4vw, 48px); } /* The separator belongs to the pair, so it is declared on the pair. An essay with no question then has no rule hanging above it, with no second rule needed to take one away. */ .essay-question + .essay-answer { padding-top: 36px; border-top: 1px solid var(--bfe-line); } /* The label and the reading time open the read together, on one baseline. The time sits at the end of the line rather than under the label so it reads as an aside to the section, not as a second heading. */ .essay-answer__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 14px; } .essay-answer__head .essay-label { margin-bottom: 0; } .essay-answer__time { margin: 0; color: var(--bfe-muted); font-size: var(--bfe-text-caption); font-weight: 500; line-height: 18px; white-space: nowrap; } /* --- The essay ---------------------------------------------------------- THE READING CONTAINER. This reverses an earlier decision in this file — "No card. A border around the essay would make it a component sitting on a page; it is the page." That was defensible when the essay was the only thing in the column. It stopped being true once the page also carried a prompt, a source line, an analysis block and a related rail: without a container, a reader scrolling back has no edge that says where the applicant's own words start and stop, and that boundary is the single most important piece of information on an essay page. So: a hairline, an 8px corner, generous internal padding, and the small shadow tier. Deliberately the SMALL tier and not the medium — the reference reserves medium for image collages and the CTA, and a reading surface that floats too far off the page starts competing with the words on it. The face changes with it. The essay is now set in the editorial serif (Arc's ABC Oracle role, substituted by Newsreader) rather than the UI sans. This is the single most consequential decision on the page: a serif reading column is what separates "a carefully designed editorial publication" from "a WordPress post", and it also draws a clear line between the applicant's writing and the interface talking about it — every other word on the page is sans. */ .essay-answer__container { margin-top: var(--bf-space-5); padding: var(--bfe-card-pad); background: var(--bfe-card); border: 1px solid var(--bfe-line); border-radius: var(--bfe-radius-lg); box-shadow: var(--bf-shadow-small); } .essay-prose { color: var(--bfe-body-ink); font-family: var(--befello-font-dek); font-size: var(--bfe-text-lg); /* 19px */ font-weight: 400; line-height: 1.7; /* The measure, stated in the unit that defines it, so it survives a change of font or size instead of silently drifting with it. 66ch in a serif is a shade tighter than 68ch was in the sans, because Newsreader sets narrower per character and the same ch count would have run the line physically longer. CENTRED in the card now that the page is full width. The card grows with its column; the text does not, so left-aligning it would strand the measure against one edge of a much wider box. Safe to use auto margins here — .essay-prose is an ordinary block inside the card, not a grid item, so this cannot cancel a stretch the way it would one level up. */ max-width: 66ch; margin-inline: auto; /* Orphan control: the browser is allowed to pull a word down so a paragraph never ends on a single stranded word. Costs nothing, and a ragged last line is one of the things that makes long text feel careless. */ text-wrap: pretty; /* Essays are pasted; some contain a bare URL. */ overflow-wrap: break-word; } .essay-prose > :first-child { margin-top: 0; } .essay-prose > :last-child { margin-bottom: 0; } /* Paragraph rhythm is what stops a long essay reading as one slab. The gap has to be clearly larger than the space between lines or the eye cannot find the break: at 1.35em the gap was 24px against a 31.5px line, which is less than the leading and reads as no break at all. 1.6em puts it at ~29px, a shade under one full line — enough to separate, not enough to scatter. */ .essay-prose p { margin: 0 0 1.6em; } .essay-prose em { font-style: italic; } .essay-prose strong { font-weight: 600; } .essay-prose a { color: var(--bfe-blue); text-decoration: underline; text-underline-offset: 3px; } /* An essay is prose. If a pasted one carries a list or a quote, it should still look like it belongs to the same page. */ .essay-prose ul, .essay-prose ol { margin: 0 0 1.35em; padding-inline-start: 1.3em; } .essay-prose li { margin-bottom: 0.5em; } .essay-prose blockquote { margin: 0 0 1.35em; padding-inline-start: 20px; border-inline-start: 2px solid var(--bfe-line); color: var(--bfe-muted); } /* ------------------------------------------------------------------------- 2.5 Provenance Where the essay came from, directly under it. Small and neutral: an acknowledgement, not an action. The wording is "original source" rather than "official" — nothing on this page verifies that, and §17's honesty about state applies to copy as much as to colour. ------------------------------------------------------------------------- */ .essay-source { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--bfe-line); color: var(--bfe-muted); font-size: var(--bfe-text-sm); line-height: 1.5; } .essay-source__name { color: var(--bfe-body-ink); font-weight: 600; } .essay-source__link { display: inline-flex; align-items: center; gap: 6px; padding-block: 3px; /* 24px inline target (WCAG 2.5.8) */ color: var(--bfe-blue); font-weight: 600; text-decoration: none; } .essay-source__link:hover, .essay-source__link:focus-visible { text-decoration: underline; text-underline-offset: 3px; } /* Outbound arrow, drawn. Decorative — the link text already says where it goes, and the screen-reader text says it opens a tab. */ .essay-source__out { position: relative; width: 10px; height: 10px; flex: 0 0 auto; } .essay-source__out::before, .essay-source__out::after { content: ""; position: absolute; background: currentColor; } .essay-source__out::before { top: 0; inset-inline-end: 0; width: 10px; height: 1.5px; transform-origin: 100% 50%; transform: rotate(-45deg); } .essay-source__out::after { top: 0; inset-inline-end: 0; width: 7px; height: 7px; border: 1.5px solid currentColor; border-block-end: 0; border-inline-start: 0; background: none; } .essay-source__note { margin: 6px 0 0; color: var(--bfe-muted); font-size: var(--bfe-text-caption); line-height: 1.5; } /* ------------------------------------------------------------------------- 2.6 Context rail A definition list with hairlines. No icons, no cards, no panel — the things it holds are three short facts, and wrapping each in a box would turn context into a dashboard. Facts already in the header (outcome, year, words) are not repeated. ------------------------------------------------------------------------- */ .essay-context__title { margin: 0 0 4px; color: var(--bfe-muted); font-size: var(--bfe-text-caption); font-weight: 600; line-height: 18px; letter-spacing: 0.08em; text-transform: uppercase; } .essay-context__list { margin: 0; } /* Rules between rows, not after the last one — a trailing hairline under the final fact reads as a section that lost its content. */ .essay-context__row { padding: 14px 0; border-bottom: 1px solid var(--bfe-line); } .essay-context__row:last-child { border-bottom: 0; padding-bottom: 0; } .essay-context__row dt { margin: 0 0 2px; color: var(--bfe-muted); font-size: var(--bfe-text-caption); line-height: 18px; } .essay-context__row dd { margin: 0; color: var(--bfe-ink); font-size: var(--bfe-text-sm); font-weight: 600; line-height: 20px; overflow-wrap: break-word; } .essay-context__row dd a { display: inline-block; /* 20px line box + 2px either side clears the 24px target minimum. The exemption for links inside a sentence does not apply here: this one stands alone in a definition list. */ padding-block: 2px; color: inherit; text-decoration: none; } .essay-context__row dd a:hover, .essay-context__row dd a:focus-visible { color: var(--bfe-blue); text-decoration: underline; text-underline-offset: 3px; } @media (min-width: 900px) { /* align-self:start keeps the rail its own height instead of stretching to the essay beside it. It is deliberately NOT sticky: three short facts are not worth a column that follows you down a long read, and nothing here is needed while the essay is being read. */ .essay-context { align-self: start; } .essay-context__row:first-of-type { padding-top: 0; } } /* ------------------------------------------------------------------------- 2.7 What to notice The reason the page exists rather than just reprinting an essay. Cards, because each note is a separate observation and a list would run them together — but flat cards with no icon. Typography does the work; a lightbulb beside "Show, don't tell" would say nothing the words do not. ------------------------------------------------------------------------- */ /* 64px between major sections (§8: 64-96px on desktop). The other half of the compression-and-release contrast: the notice grid and the related row are dense, so the space that introduces them has to be generous. */ /* --- What to notice: the teaching band ---------------------------------- Full-bleed like the prompt, but warm rather than blue — the page has already spent its one voltage moment and the reference is explicit that the blue never repeats within a page. The warm cream is the tonal switch: everything above it reports what the applicant wrote, everything inside it teaches. Essay -> Analysis -> Lesson, expressed as three grounds: cream page, bordered white-ish reading card, warm band. A reader always knows which of the three they are in without reading a word. */ .essay-notice { position: relative; isolation: isolate; /* same containment as the prompt band */ margin-top: var(--bf-space-18); padding-block: var(--bf-space-18); } .essay-notice::before { content: ""; position: absolute; inset: 0 -100vw; z-index: -1; background: var(--bfe-warm); } /* A short rule in the warm accent, the one place that colour is allowed to appear. It is a graphic at 3.09:1, never text. */ .essay-notice__rule { display: block; width: 2rem; height: 3px; margin: 0 0 var(--bf-space-4); background: var(--bfe-warm-accent); border-radius: var(--bfe-radius-sm); } .essay-section-title { margin: 0 0 20px; color: var(--bfe-ink); font-size: var(--bfe-text-h3); /* 21px · display-md */ font-weight: 700; line-height: 1.4; letter-spacing: 0; } .essay-notice__grid { display: grid; /* Two per row in the reading column, one on a phone, and never a card so narrow that a two-word heading wraps. auto-fill rather than auto-fit so that on a full-width page a single note keeps its column instead of stretching to 1300px. */ grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); /* The teaching band spans the page, but its cards should not run past the width the eye is already tracking. Four across at most. */ max-width: 1120px; gap: 16px; margin: 0; padding: 0; list-style: none; } /* 2026 (§5, §14): the one place yellow earns its keep on this page. These are the encouraging notes — why the essay works — and a tint at 8% marks that shift from reproduction to teaching without a heading announcing it. Tonal contrast rather than shadow, which §6 asks for first; the essay above stays white and calm. */ /* The notes sit ON the warm band, so they invert the usual relationship: the card is the cream canvas and the band around it is the tint. That is one fewer surface than tinting a card on a tinted band, and it keeps the note text on the highest-contrast ground available. */ .essay-note { padding: var(--bf-space-5); background: var(--bfe-card); border: 1px solid var(--bfe-line); border-radius: var(--bfe-radius-lg); /* 8px */ } .essay-note__title { margin: 0 0 6px; color: var(--bfe-ink); font-size: var(--bfe-text-base); font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; } .essay-note__text { margin: 0; color: var(--bfe-muted); font-size: var(--bfe-text-sm); line-height: 1.6; } /* ------------------------------------------------------------------------- 2.8 Related essays Wide cards, not square: the content is a programme, a title and a few tags, all of which read along the line, and there is no image to justify height. Full page width, so three sit in one row. The whole card is one link — unlike the Opportunity card, which carries three separate actions and so must never be wrapped in an anchor. An essay card has one destination and nothing inside it to click, which makes one link the simplest correct answer: one tab stop, one announced name. ------------------------------------------------------------------------- */ .essay-related__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; } .essay-related__head .essay-section-title { margin-bottom: 0; } .essay-related__all { display: inline-flex; align-items: center; gap: 8px; padding-block: 4px; color: var(--bfe-blue); font-size: var(--bfe-text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; } .essay-related__all:hover, .essay-related__all:focus-visible { text-decoration: underline; text-underline-offset: 3px; } /* The card, the card list and the shared arrow glyph now live in assets/css/essay-card.css — they are needed anywhere essays are listed, not only here. This stylesheet declares that file as a dependency, so the related rail below still receives both. */ /* ------------------------------------------------------------------------- 2.9 Focus Hover is never the only way to reach anything here, and every control shows a ring. §15's blue focus treatment, restated for this template because Section 1's is scoped to the Opportunity article. ------------------------------------------------------------------------- */ .befello-essay-page a:focus-visible, .befello-essay-page button:focus-visible { outline: 2px solid var(--bfe-brand); outline-offset: 2px; /* The ring follows each control's own corner — a pill topic tag and a 14px card no longer round the same way. */ } /* ------------------------------------------------------------------------- 2.11 Reading type on a narrow screen A separate breakpoint from the layout one on purpose. The rail moves below the essay at 900px, but the column stays a full 680px down to roughly 712px, and at 680px the desktop setting is still correct — measured, a 768px tablet was getting 17px text at 72 characters, which is the worst of both. Below 720px the column really is narrower and the type follows it. ------------------------------------------------------------------------- */ @media (max-width: 719.98px) { /* 17px is the floor, and only to buy back a little measure. §18 is explicit that body text does not shrink to fit a layout. */ .essay-prose { font-size: 17px; line-height: 1.72; /* On a phone the column IS the measure; a ch cap would only strand a margin down one side. */ max-width: none; /* Hyphenation earns its place only here. At ~36 characters the ragged edge gets deep enough to hurt and breaking a long word is the lesser evil; at 68 it would just add hyphens nobody needs. */ hyphens: auto; } } /* ------------------------------------------------------------------------- 2.10 Mobile Not the desktop layout shrunk: the rail stops being a rail and becomes a block after the essay, the header type steps down, and the reading size stays where it is. §18 is explicit that body text does not shrink. ------------------------------------------------------------------------- */ @media (max-width: 899.98px) { .essay-shell { /* Same box model as the desktop rule, just a tighter gutter — the old `width: min(100% - 32px, 980px)` plus a `padding` SHORTHAND silently reset the padding-inline set above it, so below 900px the shell was still the old 980px box with no gutter of its own. 16px each side (§18); on a phone that is already full width. */ width: 100%; padding-block: 24px 72px; padding-inline: 16px; } /* Without the rail beside it the reading content would take the whole shell, which at 768px is 78 characters — past the 75 §2 allows. The measure is capped and centred instead; related essays sit outside .essay-main and keep the full width. */ /* width, not max-width. An auto inline margin on a grid item cancels its stretch, so `max-width` alone left the item sized to its own max-content and merely clamped — an essay titled with a bare URL then measured 680px inside a 288px track and took the page with it. min() sizes it from the track first and caps second. */ .essay-main, .essay-context { width: min(100%, 680px); margin-inline: auto; } .essay-context { padding-top: 28px; border-top: 1px solid var(--bfe-line); } .essay-question { margin-top: 32px; } .essay-question__text { font-size: var(--bfe-text-lg); /* 18px; still above the essay's ink weight */ } .essay-answer { margin-top: 28px; padding-top: 28px; } .essay-notice { margin-top: 44px; } .essay-section-title { /* 21 → 20 and the tracking that goes with display-sm. §18: scale headings, not body. */ font-size: var(--bfe-text-h4); letter-spacing: -0.18px; } }