/* =========================================================================== home.css - the home page The first edition's Default.aspx style block, centralized and namespaced. Loaded by Default.aspx AFTER page.css, which carries the marketing cluster (.btn, .eyebrow, .herocta) this page shares with NotFound.aspx. Every value below is the first edition value. The comments that record WHY a value is what it is are carried across with it, because most of them are measurements taken at 320px and 200% text and nobody should have to take them again. HAZARD 7 IN THE INVENTORY: Default.aspx declared BARE .hero, .stat, .tile, .btn and .dgroup, which collide with site.css's own. Everything here is under .homepage, and the two bare ELEMENT selectors the first edition also used (section and footer) are namespaced too. WHAT IS NOT HERE, and it is reported rather than quietly dropped: .sres the hero type-ahead panel. It reads /api/v1/search, which this edition does not have. The hero box is a plain GET form to the results page, which is what the first edition degrades to with scripting off, so the box looks and behaves identically and the page needs no JavaScript at all. .fgrid WAS ON THAT LIST AND IS NOW BELOW IT. The note read "the Featured today strip needs a daily rotation over entries with blurbs and no such mechanism has been decided here", which was true of the CSS and false about the page: the first edition builds that rotation on the server, in Default.aspx.vb, and never reads its FeaturedItem table for it. The builder is ported, so the rules it needs are here. Two of the first edition's card decorations are NOT here because this edition has nothing to draw them from (its shadow flag and its provenance mark); the rules are carried anyway, unused, so that the day either register arrives the card does not also need a stylesheet change. =========================================================================== */ .homepage .hero{padding:64px 0 30px;text-align:center} /* The fixed 2.9rem below was the desktop value applied unscaled at every width, so at the reader's 200% text setting (root font-size becomes 30px; see js/site.js applyFont) it rendered at 87px inside .wrap's ~343px content width at a 375px phone viewport. An ordinary nine-letter word like "tradition" or "connected" could not fit even on a line of its own, so site.css's sitewide h1-h6 break-word rule (there for the opposite reason: a heading that overflows its clipped html gets silently cut away, site.css line ~323) did what it exists to do and split the word mid-letter. That global rule is left alone: dozens of other headings across the theme rely on it to avoid the clip, and the real defect here is the font size outgrowing its container, not the break rule catching the result. clamp() in rem so the A-/A+ control still moves every bound proportionally (the floor and the ceiling both scale with the reader's chosen text size, never px). The 3vw middle term is what makes it FLUID across viewport width rather than just a smaller fixed size: at phone widths the vw term stays small and the 1.6rem floor governs (48px at 200%, comfortably under a 9-letter word's ~230-270px measured width at that size, calibrated from the audit's own screenshot: "connect"/"ed" and "traditio"/"n" show 7-8 characters fitting 343px at the old 87px, giving roughly 0.49-0.56em per character); by ~900px viewport width at 100% text the term already reaches the 2.9rem ceiling, so ordinary desktop widths render exactly the pre-existing size. */ /* text-wrap:balance REMOVED here, w-herofix-1910, 2026-08-23 (ChangeLog row 1681, ruling 309 prevalence sweep off the FamilyHome fix). This site's own text-size control (js/site.js applyFont) sets document.documentElement's root font size AFTER first paint, and when that runtime change lands on a heading using text-wrap:balance, Chrome does not always redo the two-pass balance layout: the heading is left painted as ONE unwrapped line running off the right edge of the viewport at enlarged text, exactly the defect already reproduced and fixed on FamilyHome's identical ".familyhome .hero h2{...text-wrap:balance}" rule. Dropped here for the same reason: ordinary wrapping needs no two-pass layout and does not carry this failure mode, and text-wrap:balance was purely a cosmetic line-length evener, never load-bearing. */ /* SELECTOR CHANGED FROM h2 TO h1.page, w-launchfix3-2241, 2026-08-23 (board 1793/1812 reversal): the atlas home page hero heading was h2, relying on Site.master's own brand h1 as the page's only h1; now the brand is a non-heading element, so the home page's own subject is promoted to h1. class="page" so a future heading-level change never again forces a selector rename. */ .homepage .hero h1.page{font-family:var(--serif);font-size:clamp(1.6rem, 1.1rem + 3vw, 2.9rem); line-height:1.08;margin:0 0 16px;font-weight:600} .homepage .hero p{color:var(--muted);max-width:64ch;margin:0 auto 26px;font-size:1.06rem} /* The large search box. A plain GET form to the results page: it works with scripting off, on a phone keyboard's Go key, and as a bookmarkable URL. */ .homepage .searchbig{max-width:560px;margin:0 auto 18px;position:relative} .homepage .searchbig input{width:100%;background:var(--panel);border:1px solid var(--edge2); color:var(--ink);border-radius:13px;padding:15px 16px 15px 46px;font:inherit;font-size:1rem;outline:none} .homepage .searchbig input:focus{border-color:var(--gold)} /* The magnifier sits inside the field rather than beside it. pointer-events none so it can never eat a tap meant for the input. */ .homepage .searchbig svg{position:absolute;left:16px;top:50%;transform:translateY(-50%); color:var(--faint);pointer-events:none} /* FIVE COUNTERS, sized as five columns above 1000px, three between 680 and 1000px, two below it, where a lone fifth takes the full width of its row instead. Same three breakpoints as before, still governing the same widths. CENTERED FLEX ROW, not a fixed grid, since owner request 984, 2026-08-20. A grid with a fixed column count (repeat(5,...)) always reserves every column whether or not a tile fills it: the production deploy that carried the new stats code without its matching proc update left only three of five keys resolving, and the fixed five-column grid still occupied only its first three tracks, so the three surviving tiles sat bunched at the left with two empty tracks trailing. A flex row with a fixed basis per tile and justify-content:center wraps and centers however many tiles actually render, so a future absent tile degrades to a centered short row instead of a left-hugging one. The five basis widths below, with their gaps, sum to exactly 100% of the row, so a full five-tile row still fills edge to edge exactly as the grid did; centering only becomes visible when fewer tiles render. min-width:0 replaces the grid's old minmax(0,1fr) zero floor. A flex item's default min-width is its content's max-content width, so a tile holding one unbreakable word ("Disciplines") would refuse to shrink below it and overflow the page, same as a bare 1fr grid track would. Measured in the first edition at 48px past the right edge at a 320px viewport with the root font at 200%. The zero floor lets the tile shrink; the overflow-wrap on .stat below is what then breaks the word. BOTH are needed: break-word does not lower an item's min-content contribution on its own, and a zero floor with no break rule just moves the clipping inside the tile. The narrow breakpoint keeps the grid's old lone-fifth behavior, generalized to any odd count rather than hardcoded to five: :nth-child(odd):last-child only matches a last item with nothing beside it in its own row, so it takes the full row exactly when the grid's :last-child rule used to. */ .homepage .stats{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:20px 0 8px} .homepage .stats>*{flex:0 1 calc((100% - 48px)/5);min-width:0} @media(max-width:1000px){.homepage .stats>*{flex-basis:calc((100% - 24px)/3)}} @media(max-width:680px){.homepage .stats>*{flex-basis:calc((100% - 12px)/2)} .homepage .stats>:nth-child(odd):last-child{flex-basis:100%}} /* BREAK RATHER THAN ESCAPE, the same rule the headings carry in site.css and for the same reason. Measured at a 320px viewport with the root font at 200%: the two-column grid gives each tile about 145px, "Disciplines" is ONE WORD with nowhere to wrap, and the label ran past the right edge of the page. The uppercase transform and the 0.1em letter-spacing both widen it further. break-word and not anywhere, so a label that fits is still never split. */ .homepage .stat{background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--edge);border-radius:13px;padding:16px 14px;text-align:center; overflow-wrap:break-word} .homepage .stat b{font-family:var(--serif);font-size:1.7rem;display:block;font-weight:600; overflow-wrap:break-word} .homepage .stat span{color:var(--faint);font-size:.76rem;text-transform:uppercase;letter-spacing:.1em} /* A counter that links to its area reads as pressable, matching the domain tiles: gold border, a small lift, and the number turns gold on hover. */ .homepage a.stat{text-decoration:none;color:inherit;display:block;transition:.14s} .homepage a.stat:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--shadow)} .homepage a.stat:hover b{color:var(--gold)} .homepage a.stat:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .homepage section{padding:40px 0} .homepage .shead{display:flex;align-items:baseline;gap:12px;margin:0 0 18px;flex-wrap:wrap} .homepage .shead h3{font-family:var(--serif);font-size:1.5rem;margin:0;font-weight:600} .homepage .shead p{color:var(--faint);font-size:.86rem;margin:0} /* ---- the directory bands ------------------------------------------------- */ .homepage .dgroup{margin-bottom:24px} .homepage .dgroup .gh{display:flex;align-items:baseline;gap:10px;margin:0 2px 11px; padding-bottom:7px;border-bottom:1px solid var(--edge)} .homepage .dgroup .gh h4{font-family:var(--serif);font-size:1.1rem;margin:0;font-weight:600; color:var(--gold-soft);min-width:0} /* THE BAND COUNT IS AN ANCHOR AGAIN, and this note is kept because the way it stopped being one is the lesson. It was demoted to a span while this edition had no band landing page, on the sound reasoning that a count styled as pressable that goes nowhere is worse than one that does not claim to be pressable, and the hover rules below were left written for the day the page arrived. Rulings 130 and 177 then minted the bands as section ENTITIES and /sections/{slug} started serving, but this note and the parity audit both went on describing the old world, so the link stayed dead until a reader reported it (2026-08-03). A deferral that names its blocker has to be re-read when the blocker clears; nothing re-reads it on its own. The .gc rules stay shared between the two forms, so the fallback span, still emitted when a slug cannot be resolved, is visually identical. */ .homepage .dgroup .gh .gc{background:var(--panel);border:1px solid var(--edge2);color:var(--muted); border-radius:9px;min-width:2.2em;min-height:2.2em;padding:.2em .6em;font:inherit;font-size:.92rem; line-height:1;display:inline-flex;align-items:center;justify-content:center;margin-left:auto; flex:none;white-space:nowrap;text-decoration:none;transition:.14s;font-variant-numeric:tabular-nums} .homepage .dgroup .gh a.gc{cursor:pointer} .homepage .dgroup .gh a.gc:hover{border-color:var(--gold);color:var(--gold)} /* Its own focus ring, for the same reason .stat, .tile and .feat each carry one: the global :focus-visible in site.css also sets border-radius:4px, which would square off a pill drawn at 9px. Same outline and offset as every other control on the page, so only the corner differs. */ .homepage .dgroup .gh a.gc:focus-visible{outline:2px solid var(--gold);outline-offset:2px; border-radius:9px} /* 10rem is 150.0px against the html{font-size:93.75%} base, so nothing moves at the default. A px track floor is a fixed box around scaling text and on an auto-fill grid it also freezes the COLUMN COUNT, so at 200 per cent the tile stayed 163px while its title went to 22.5px and "Denominations" broke across two lines mid-word, the same symptom arriving again by the other route. min(...,100%) keeps a floor that now grows with the reader from exceeding a narrow column, where html{overflow-x:hidden} would clip it with no scrollbar. */ .homepage .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(10rem,100%),1fr));gap:10px} /* A LONG SINGLE WORD BREAKS RATHER THAN LEAVING THE TILE. Found: "Denominations" ran out of its tile on a phone. The track is minmax(150px,1fr), so a word wider than the column cannot widen it and simply painted over the border and off the screen. break-word, not anywhere: it breaks ONLY when the word genuinely cannot fit, so ordinary two-word titles still wrap at the space rather than being split mid-word for no reason. min-width:0 lets the tile shrink to its grid track instead of being held open by its own content. */ .homepage .tile{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--edge); border-radius:12px;padding:13px 14px;cursor:pointer;transition:.14s;text-decoration:none;display:block; min-width:0} .homepage .tile:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--shadow)} .homepage .tile:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .homepage .tile .n{font-family:var(--serif);font-size:1rem;font-weight:600;overflow-wrap:break-word;min-width:0} .homepage .tile .c{color:var(--faint);font-size:.75rem;font-variant-numeric:tabular-nums} /* Entry count reads as a pill, matching the directory tiles elsewhere. */ .homepage .tile .pill{display:inline-block;margin-top:7px;font-size:.68rem;padding:2px 8px;border-radius:99px; background:var(--panel);border:1px solid var(--edge);color:var(--faint);font-variant-numeric:tabular-nums} /* A type nobody has filled yet is drawn rather than hidden, so the pill has to be able to say zero without looking like a defect. Quieter, not louder. */ .homepage .tile .pill.zero{opacity:.7} /* ---- the feature cards --------------------------------------------------- */ /* THE FIRST EDITION USES repeat(3,1fr) BECAUSE IT HAS EXACTLY THREE CARDS. Its third is the personalized report, which this edition does not sell, so there are two. auto-fit resolves to the same three columns at the same widths when three cards exist, and to two rather than to a hole when two do; the rendered page with three cards is identical. */ /* 18.6667rem is 280.0px at the default. rem floor, see .tiles above. */ .homepage .feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(18.6667rem,100%),1fr));gap:14px} @media(max-width:760px){.homepage .feats{grid-template-columns:1fr}} .homepage .feat{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--edge); border-radius:16px;padding:22px 20px;text-decoration:none;transition:.14s;display:block} .homepage .feat:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--shadow)} .homepage .feat:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .homepage .feat .ic{font-size:1.5rem;margin-bottom:10px} .homepage .feat h4{font-family:var(--serif);font-size:1.16rem;margin:0 0 7px;font-weight:600} .homepage .feat p{color:var(--muted);font-size:.88rem;margin:0} .homepage .feat .tag{display:inline-block;margin-top:12px;font-size:.68rem;text-transform:uppercase; letter-spacing:.1em;color:var(--gold);border:1px solid var(--gold);border-radius:99px;padding:2px 9px} /* ---- the featured strip -------------------------------------------------- The first edition's .fgrid and .fcard, value for value. auto-fill at a 14.6667rem floor, so the strip is four across on a desktop, two on a tablet and one on a phone without a single breakpoint of its own. Eight cards divide evenly into four and into two, which is why the count is eight. THE FLOOR IS rem AND IT WAS 220px (lane textsize-200, 2026-08-05). 14.6667rem is 220.0px at the default, so the desktop strip is still four across; what changes is that raising the text now drops it to three and to two instead of holding four columns of ever smaller cards. See .tiles above for the whole argument and for why the floor is wrapped in min(). */ .homepage .fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(14.6667rem,100%),1fr));gap:12px} .homepage .fcard{background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--edge);border-radius:13px;padding:16px;text-decoration:none; transition:.14s;display:block;min-width:0} .homepage .fcard:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--shadow)} /* Its own focus ring, for the same reason .stat, .tile, .feat and a.gc each carry one: the global :focus-visible in site.css also sets border-radius:4px, which would square off a card drawn at 13px. */ .homepage .fcard:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:13px} .homepage .fcard .k{color:var(--gold);text-transform:uppercase;letter-spacing:.12em; font-size:.64rem;font-weight:600} /* BREAK RATHER THAN LEAVE THE CARD, the same rule .tile carries and for the same reason: the track is minmax(220px,1fr), so an unbreakable name wider than the column cannot widen it and would paint over the border instead. break-word, not anywhere, so an ordinary two-word name still wraps at the space. */ /* text-wrap:balance REMOVED here, w-launchfix1-2148, 2026-08-23 (launch readiness audit item 14, ruling 309 prevalence sweep off the FamilyHome/ homepage-hero fix, w-herofix-1910). Same failure mode as that rule: this site's own text-size control sets the root font size AFTER first paint, and Chrome does not always redo the two-pass balance layout when that happens, leaving the heading painted as one unwrapped line running off the edge at enlarged text. min-width:0 and overflow-wrap:break-word alone do not protect against this, since the failure is in the balance layout pass itself, not in ordinary wrapping. */ .homepage .fcard h4{font-family:var(--serif);font-size:1.12rem;margin:5px 0 6px; font-weight:600;overflow-wrap:break-word;min-width:0} /* Three lines, then an ellipsis. The clamp is what lets a 400-character lede sit in a card sized for a sentence. */ .homepage .fcard p{color:var(--muted);font-size:.82rem;margin:0;display:-webkit-box; -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word} /* CARRIED, UNUSED, AND SAID SO IN THE HEADER ABOVE. Neither decoration has a register in this edition to draw from: .standing-mark is the provenance caveat (dbo.EntityStanding in the first edition) and .dk is the shadow pill. Margins in em so the gap grows with the reader's text size instead of closing up at 200%. */ .homepage .fcard .standing-mark{margin:0 0 .5em} .homepage .fcard .dk{color:var(--dark-c);border:1px solid var(--dark-c);background:var(--dark-bg); border-radius:99px;padding:1px 7px;font-size:.62rem;text-transform:uppercase; letter-spacing:.08em;margin-left:6px} /* ---- the home page's own footer ------------------------------------------ HAZARD 4 IN THE INVENTORY: the first edition home page renders a SECOND