/* =========================================================== HOME — THE SECOND READING. IT WAS index1, THE CLIENT OPTION, AND IT WAS PROMOTED INTO THE ROUTE (Mahesh, 4 Aug). There is no option any more: `index` is the only route that loads this file, and it loads it as the second of two — pageStylesheet ["home", "home-alt"]. Still loaded AFTER home.css, and it still states only the DIFFERENCES. Everything it does not restate — the opening screen, the mosque's own type, the invitation's words, the chrome — comes from home.css. That split is now a division of labour inside one page rather than a guard between two, and it is kept because it is the record of which half of Home the brief changed. The brief (client, through Mahesh, 3 Aug): · the practice beat on PAPER with black type, no drawing, one link, and one line naming the services; · each room a FULL-BLEED photograph with a black band under it carrying the verb and every name in the sector; · the mosque exempt. 🔴 NOTHING HERE IS A NEW VALUE. Every size, colour and space is a token the system already carries. This began as an option and an option is a rearrangement of the system rather than a second system — the moment it needs a value of its own it stops being comparable with the page it is an option ON. The rule outlived the comparison it was written for: a promoted page has no more licence to invent a value than an option did. =========================================================== */ /* ----------------------------------------------------------- 1 · The practice beat, on paper ----------------------------------------------------------- */ /* PAPER IS THIS BAND'S DECIDED PROPERTY, not a change of pace (E1). The beat is the practice speaking in its own voice between two surfaces of evidence, and it is the only band on the page that is neither a photograph nor a drawing — so it is the one band that is nobody's evidence. It takes --gap-section, the site's own section rhythm, on both edges. --gap-section-major was tried first and looked at: at 280 either side the band runs 810px for three elements, which is a whole screen of paper for one sentence — and "the height will be shorter" is half of what the brief asked for. The statement gap is for a statement standing alone; this one stands between two photographs that bound it, and they do the work the extra 160px was buying. */ .ha-beat { padding-block: var(--gap-section); background: var(--color-surface); } /* The colour is STATED. base.css gives every heading --color-ink, but tokens.css lifts the .t-* display classes to white under .surface-dark, and this page carries .surface-dark on the bands either side. Left unstated, a future reordering that nests this band would turn the sentence white on white — the inverse of the fault CLAUDE.md records for headings on black, and silent in exactly the same way. */ .ha-beat__line { margin: 0; color: var(--color-ink); } /* The services, on ONE line. It is a list of names, not reading prose, so it takes the metadata register and the body measure — the display measure (24ch) would stack six names into a column, which is the fault the names wall already records. NOT uppercase, and that is a decision. --ls-nav's tracking belongs to navigation and to labels; these six are the practice's own words in running order, and setting them as a nav strip would make them read as six destinations when the page offers one. */ .ha-beat__services { max-inline-size: var(--measure-body); margin: var(--gap-block) 0 0; font-size: var(--fs-metadata); font-weight: var(--fw-regular); line-height: var(--lh-body); color: var(--color-ink-secondary); } .ha-beat__route { margin: var(--gap-heading) 0 0; } /* ----------------------------------------------------------- 1a · The beat's horizontal (Mahesh, 5 Aug, Session XII) ----------------------------------------------------------- */ /* THE WORDS AND THE DOOR ARE THE TWO ENDS OF ONE LINE — §5.3's construction and the closing band's, applied to the one band on Home that was still without it. Measured before anything was proposed: at 1440 every band on this page reaches 93-99% of its 960px column — the four rooms 93.1 / 96.1 / 96.8 / 98.9, the mosque 97.5, the closing band 93.2 — and THIS ONE REACHED 64.3%, with 342px of the measure standing empty. Stable at 34.6% (1024), 34.8% (768) and 31.9% (640), and gone by a true 375, where the measure fills the column on its own. So it is a wide-screen condition, and it is historical rather than authored: §5.1a's generated mark stood at this column's other end until H14 deleted it at the client's request, and the band was then REDUCED to one column rather than re-composed. 🔴 THE OTHER ARRANGEMENT WAS RENDERED AND REFUSED ON THE PAGE'S OWN CRITERION. Giving the end to the services line AND the door — the mosque band's shape — squeezed the sentence from three lines to FIVE at 1440 and made the band taller. That is exactly the failure p9-home's "the action costs the sentence no width" exists to catch on the closing band, so it was refused without needing a new argument. The door alone costs the sentence nothing: its ink reaches 618 here against 617.5 before. The interval under the sentence is unchanged and was MEASURED, not assumed — 23.8px ink-to-ink either side of this change. H24 lost --gap-block to a flex wrapper with nothing showing in a screenshot, so the wrapper below is measured rather than reasoned about. */ /* 🔴 `justify-content: space-between` HERE CURRENTLY CHANGES NOTHING, and it is written down because the declaration reads as the thing that puts the door at the column's end and it is not. The words take `flex: 1 1 0`, so they absorb every pixel of free space and there is none left for justify-content to distribute: mutated to `flex-start` the door still ends at 1200 against a column of 1200 and p9-home stays 32/32. What actually holds the door out there is the words' flex basis — proved by `order: -1`, which moves the door to the start and fails two assertions. It is kept as a standing guard against the basis changing, on the same terms as the mosque band's `nowrap` (§ 3a), and NOT because it is doing the work. Same family as H25: a published note that credits a guard with a job something else is doing. */ .hm--alt .ha-beat .container { display: flex; align-items: last baseline; justify-content: space-between; column-gap: var(--gap-component); } /* `flex: 1 1 0`, for the reason § 3a states: the hypothetical size becomes the column's own minimum rather than its content's, so the row never breaks on the door's width and cannot alternate across the range. */ .hm--alt .ha-beat__words { flex: 1 1 0; min-inline-size: 0; } /* The door never shrinks, and it stays in one piece: a label with a rule under it, wrapped, reads as two controls rather than one. */ .hm--alt .ha-beat__route { flex: 0 0 auto; margin: 0; white-space: nowrap; } /* .hm-link is white by declaration — it was written for black. On paper it is the same control in ink: same size, same weight, same tracking, same 1px rule that THICKENS rather than fades, so the two grounds share one idiom rather than two. */ .ha-link { display: inline-block; border-block-end: 1px solid currentcolor; padding-block-end: 2px; font-size: var(--fs-metadata); font-weight: var(--fw-medium); letter-spacing: var(--ls-nav); text-transform: uppercase; color: var(--color-ink); transition: border-block-end-width var(--dur-fast) var(--ease-out); } .ha-link:hover, .ha-link:focus-visible { border-block-end-width: 2px; } .ha-link:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 4px; } /* ----------------------------------------------------------- 2 · The rooms — full bleed, then the names on black ----------------------------------------------------------- */ /* The room is the photograph AND the band under it: one object, so the section carries no padding of its own and the two edges meet. The gap between one room and the next is the black band's own bottom padding — there is no seam to space. */ .ha-room { background: var(--color-surface-dark); } /* THE FRAME IS THE PAGE'S, NOT THE ROOM'S — `.ha-frame` / `.ha-img` rather than `.ha-room__frame` / `.ha-room__img` (4 Aug, when the mosque took a photograph). It is the second time this page has had to make the same move and the reason is identical both times: the marker became `.ha-marker` because the page names FIVE territories and only four of them are rooms, and the full-bleed frame is now on all five too. What stays room-scoped is `.ha-room__band` and the names wall inside it, because a set of one has no names to band. */ /* 22 Aug 2026: the tag changed from
to (ProArc review point 5, home.js) so the room's photograph routes to its own record. An anchor is inline by default where a figure is block — display:block restores the full-bleed layout the class always assumed, and color:inherit stops the default link color leaking onto anything the anchor's box paints (nothing in it carries text, but the box itself must not tint). */ .ha-frame { display: block; margin: 0; color: inherit; } /* FULL BLEED, and cropped by HEIGHT. The frames are 1.5:1 to 1.9:1 and the band is wider than any of them, so the crop this takes is vertical — which is the useful direction here: it is what drops the car park out of the bottom of a street elevation and keeps the building and its sky. `object-position` then chooses top-to-bottom, the opposite of the band above, where the cell is TALLER than the frame and the same property chooses left-to-right. Same property, different axis, because the overflow is on a different side — worth stating, because reading the band's crop table as if it applied here would move every one of these the wrong way. 40% rather than centre, for the same reason: a street elevation's subject sits above its middle, and the bottom of these frames is road, car park or paving in three of them. It is ONE value for all FIVE from 4 Aug, when the mosque joined them. 🔴 THE PER-FRAME CROP TABLE WAS EXAMINED AND REFUSED, 4 Aug. This note used to defer it; deferring again would keep re-opening a question that has now been answered by looking at all five at full size. The mosque was named here as the frame that would move first, and it is the one that must NOT. Its whole vertical cut is 157px of 1024, and two things want it: at 40% the minaret arrives complete, finial and all, and the cut takes part of the arched base; at 65% the base returns and the TOP OF THE MINARET is clipped; at 100% worse again. A mosque that loses its tower to keep a doorway is the wrong trade — the minaret is what identifies the building — so 40% is not a compromise here, it is correct. The other four have nothing to gain: North Gate spends its 20% on paving and road, Seaside Hills its 24% on sky and foreground grass with the building whole, City Life 9%, The Black Square 1%. A table would give five values where one is already right, and each would be a number to maintain against the next re-picked frame. 🔴 80vh, RAISED FROM 62 ON 4 AUG (Mahesh: align the image height), and the number came off the measured page rather than off the eye. At 62vh the photograph rendered 504px in every room while its own black band rendered 621, 694, 768 and 815 — so the evidence was the SMALLER half of every room it was the evidence for, and the band's new marker had made that worse rather than better. 80vh does two things at once. The cell becomes 2.2:1 instead of 2.9:1, so the four frames keep 76–98% of their height where they kept 50–66% before — the crop stops being the dominant fact about the picture. And at 650px against an 813px viewport the band's first lines stay visible UNDER the photograph, so the room's words and its evidence are in one view without scrolling, which is the arrangement the opening screen already uses. 100vh was the obvious alternative and it loses exactly that: a full-screen photograph puts its own caption off the bottom. */ .ha-img { display: block; inline-size: 100%; block-size: 80vh; min-block-size: 400px; object-fit: cover; object-position: center 40%; } /* 🔴 THE WORKS ROOM, AND WHY ONE CROP FOR FIVE ROOMS WAS WRONG — found from a screenshot, 22 Aug 2026. ajmanbank/gallery-02 is 1920x1339 (aspect 1.43); the band this class fills is width:100vw, height:80vh, which is nearer 2.2-2.4:1 on an ordinary desktop window — far wider than the source. `cover` scales to the container's WIDTH, so the source renders far taller than the band and roughly 40% of its own height has to go. `center 40%` (the shared default, tuned for nothing in particular) split that loss so the visible window ran from partway down the sign to partway up the parked cars — the "AjmanBank" lettering left with no sky above it, jammed against the top edge, and the cars/base gone anyway. A crop that keeps neither the sign clear nor the ground is worse than one that commits to losing the ground on purpose. `top` keeps the sign with the clearance a full-bleed hero owes it, the full roofline including the crane, and reads as the building rather than as a wall of glass. The parked cars and street-level clutter — which the ORIGINAL reason for using gallery-02 here was to carry ("a wide print at a quieter place on the page carries the cars without trouble", the note above ROOMS_FULL_FRAME in home.js) — are the part of the trade a 2.4:1 band was always going to lose from a 1.43:1 photograph; `top` is the value that loses them on purpose instead of by default. Rendered and compared against three other anchors before this one was picked. */ .ha-img--ajmanbank { object-position: center top; } /* The band, and its two paddings are NOT symmetric by oversight. The top is tight because the words belong to the photograph above them — equal padding floats them between two pictures with no owner. The bottom is the room's separation from the next photograph, and it was widened on 4 Aug (Mahesh: more room below the names): the names are the band's last and loudest line, and at --gap-section they ended 200px above a full-bleed photograph that begins with no margin of its own, so the wall read as sitting ON the next room. --gap-section-major is the value, and it is the one place on this page it is earned. It is reserved for statement sections, and a room here IS the page's statement unit: four of them are the whole argument, each one photograph plus its evidence, and the gap is not spacing WITHIN a section but the seam between two of them. (The practice beat asked for the same token on 3 Aug and was refused, for the opposite reason — 280 either side of three elements is a screen of paper for one sentence, and that band is bounded by two photographs that already do the work.) */ .ha-room__band { padding-block: var(--gap-component) var(--gap-section-major); } /* The verb leads, in the black-ground link idiom .hm-link carries — the room's ONE destination, and the only uppercase label in the band. It sets no type of its own: an h3 whose register is stated by the link inside it, which is the site's rule that a heading's register comes from the page. */ .ha-room__verb { margin: 0; } /* THE SECTOR NAME, AT MEGA SPLASH, HOLLOW — "Learns / Schools and universities" (Mahesh, 4 Aug), and this is where .t-marker earns its second surface. 🔴 IT IS THE SECTOR NAME THAT IS HOLLOW, NOT THE BUILDING NAME, and the two closed doors are worth keeping because both look open: hollow does not survive at the NAMES' scale. Rendered five ways at 32px — stroke 1px at 300 / 600 / 700, stroke 2px at 700, against a solid control — the 300 is indistinguishable from the solid names beside it (the outline is nearly the whole stem width, so it reads as slightly crisper type and marks nothing), and every heavier weight closes its own counters: the o, a and e of "British School" fill in and the word turns to mush. That is §3.4's clause arriving early — it resolves Mega to SOLID below 767 because "at 34px a 1px stroke is a grey suggestion of a word" — and the reason is visible in the two specimens side by side: Mega's counters are wide enough to lose a pixel from each side, and a 32px counter is not. and the building name could not take the register anyway, because .t-marker is UPPERCASE. Setting a building's name in caps is the exact fault this project already corrected across all 47 record pages, where v1's sitewide `h1 { text-transform: uppercase }` leaked through inheritance against Screen 04's decided register. A sector name is not a building name — it names a SECTION, which is what the marker is for and what "ALSO IN AL JURF" is. So the hollow marker lands on the words that can carry it, and it fixes the band's inverted hierarchy on the way: the room's own subject used to be a 14px label under a 32px wall of other buildings' names. Nothing is restated here. The size, the stroke, the @supports guard that keeps an unsupported stroke from leaving an INVISIBLE heading, and the ≤767 collapse to solid all come from .t-marker in tokens.css. The class is `.ha-marker` and not `.ha-room__marker` because THE PRAYS MOMENT TAKES IT TOO (4 Aug): the marker belongs to this page's five territories, not to the four that happen to be rooms. */ .ha-marker { margin: var(--gap-block) 0 0; } /* The names. A wall of names is a FIELD, not reading prose — the display measure would stack sixteen homes into a column — so it takes the body measure at H2 scale, which is the treatment learns' wall already carries on the real page. Here all four rooms get it, which is the option's whole idea: every sector shows its names, not a selection of them. */ .ha-room__names { max-inline-size: var(--measure-body); margin: var(--gap-heading) 0 0; font-size: var(--fs-h2); font-weight: var(--fw-light); line-height: var(--lh-editorial); letter-spacing: var(--ls-editorial); color: var(--color-on-dark-body); } /* EVERY NAME IS A LINK (Mahesh, 4 Aug). No resting rule: sixteen underlined names is a field of rules, not a wall of names, and the wall's job is to be read as one object first. The affordance arrives on hover, in the gesture the rest of the site already uses — a rule DRAWN under the word — and it is joined by WEIGHT, never colour. */ /* No transition: General Sans ships as static weights, so font-weight has no interpolable axis and a declared transition would be a promise the type cannot keep. The response is instant, which is what a weight change is. */ .ha-name { color: inherit; } .ha-name:hover, .ha-name:focus-visible { font-weight: var(--fw-semibold); border-block-end: 1px solid currentcolor; color: var(--color-on-dark); } .ha-name:focus-visible { outline: 2px solid var(--color-on-dark); outline-offset: 4px; } /* THE CURRENT ONE — the building in the photograph above. It is marked by weight and value, the two tools hard rule 3 names when the answer cannot be colour. 700 against the wall's 300 rather than 600, so it stays distinct from a HOVERED neighbour at 600 — the mark has to survive the interaction, not just the resting state. White against #EDEDED carries the same step in value, which is a difference in weight-of-ink rather than a colour signal; the weight alone would satisfy the rule, and this is not the only cue. 🔴 IT IS A LINK NOW, 22 Aug 2026 — it was a when the paragraph above was written, and ".ha-name--current" simply had nothing to hover. As an it inherits `.ha-name:hover`'s 600, and that selector has HIGHER specificity (a class plus a pseudo-class beats one class alone) — so without the rule below, the one weight this file measured against a hovered neighbour would itself become that neighbour's weight on hover, which is the exact collision "has to survive the interaction, not just the resting state" was written to prevent. Restated after `.ha-name:hover` so the cascade doesn't need the override to win on specificity alone. */ .ha-name--current { font-weight: var(--fw-bold); color: var(--color-on-dark); } .ha-name--current:hover, .ha-name--current:focus-visible { font-weight: var(--fw-bold); border-block-end: 1px solid currentcolor; color: var(--color-on-dark); } /* ----------------------------------------------------------- 3 · The mosque, now that it closes the black ----------------------------------------------------------- */ /* THE CONSTELLATION CARRIED THE BLACK REGION'S TAIL, and deleting a section takes its spacing with it. `.hm-prays` opens on --gap-section and states no bottom padding at all, because on Home the map follows it and supplies the distance to the paper invitation below. Cut the map and the mosque's own last line sits flush on the ground change — the kind of fault a deleted section leaves BELOW itself, where nobody is looking. It closes on --gap-section and OPENS ON NOTHING, which is not an asymmetry: the last room's band already ends on --gap-section-major, and the mosque is the fifth verb rather than a new kind of thing, so it takes the same seam every other room is given. Left at its own 200 on top of that 280, the reader met 480px of empty black between the homes wall and "And prays." — a void that reads as the page having ended. 🔴 THE TOP IS NO LONGER NOTHING, from 4 Aug: the mosque's own photograph stands directly above it, so this section stopped being the tail of the homes band and became THE BAND UNDER A FRAME — which is what `.ha-room__band` is, and it takes that band's own top interval rather than a second opinion about it. --gap-component, for the reason stated there: the words belong to the photograph above them, and an equal padding floats them between two pictures with no owner. 🔴 AND THE BOTTOM IS BACK TO NOTHING (5 Aug), WHICH IS THE WHOLE OF THE NOTE ABOVE RUN IN REVERSE. That 200 was never this section's own — it was a SUBSTITUTE for the deleted map's tail, written the day the constellation went, exactly as the paragraph at the top of this block says: "`.hm-prays` opens on --gap-section and states no bottom padding at all, because on Home the map follows it and supplies the distance to the paper invitation below." The map follows it again, so the substitute is now a DOUBLE COUNT: 200 here, then the map's own 200 to the hairline and 200 below it, and the reader met 600px of empty black between the mosque's line and the head of the next band. A DELETION LEAVES A SHAPE BEHIND IT AND SO DOES A RESTORATION, and the second is the harder one to see: the compensation looks like a considered value rather than like scaffolding, because by then it has a paragraph of reasoning attached to it. Nothing measured it as wrong — it was found by screenshotting the band beside its neighbours, which is the fourth session running that method has produced the session's real fault. The value that has to change when a section returns is the one some other section grew while it was away. */ .hm--alt .hm-prays { /* 🔴 THE TAIL WENT TO ZERO WHEN IT SHOULD HAVE GONE TO A ROOM'S VALUE (Mahesh, Session XXXV, on the rendered page): "the black free space under mosque is lesser than the above sections." Measured, it was not a little less — the rooms close 278.8px below their last line and this band closed 54.0px below its own, a 5.2x difference, and it was DECLARED rather than caused by the shorter content. The rule taken is EQUAL AIR BELOW THE LAST LINE, not equal padding: .hm-dark already contributes --gap-component of its own below this band, so restating the rooms' 280 here would overshoot by that much. Subtracting it lands the black ground 270px below the ink against the rooms' 278.8. 🔴 THAT IS 8.8px SHORT, AND THE SHORTFALL IS STRUCTURAL, not a rounding: padding is measured from the content box, so it carries the half-leading, and the rooms end in 32/36.8 type (1.2px of dead line box) where this band ends in 16/25.6 (10px). Padding therefore cannot deliver equal air exactly — true equal air here needs ~289. The tokens are kept anyway: 8.8px on 280 is 3%, it is not perceptible on the rendered band, and a number tuned to the picture would be a constant nobody could re-derive. The rule is the target; this is the tokens' closest honest approach to it. */ padding-block: var(--gap-component) calc(var(--gap-section-major) - var(--gap-component)); } /* ----------------------------------------------------------- 3a · The band's horizontal (Mahesh, 4 Aug, Session XI) ----------------------------------------------------------- */ /* THE MARKER AND THE EVIDENCE ARE THE TWO ENDS OF ONE LINE. What the band had instead was three objects stacked at the inline-start of a 960px column, using 53% of it, with the section's ONE DOOR — the mosque's own record — set at 16px #A6A6A6 in the middle of a sentence, the quietest link anywhere in the black run. Every one of the four bands above it puts its door first and loudest. The column is now 93% spent and the band comes down from 500px to 386px at 1440. Nothing here re-opens what was decided. The quiet REGISTER stands (§5.3, E10.1: civic work is shown, never narrated) — this moves the line, it does not raise it. There is still no names wall, and there will not be one. 🔴 THE FLOOR IS THE DOOR'S OWN WIDTH, NOT A NUMBER, and that is the whole reason this construction survives the width range. The first build used `flex: 0 1 auto`, and flex breaks lines on each item's HYPOTHETICAL size before it shrinks anything — so the row's fate was decided by the MARKER's width, which steps 549 -> 395 -> 226 as .t-marker resizes, while the column steps at 1120, 1024 and 780. Swept rather than spot-checked, that put the horizontal in FOUR alternating bands: it held above 1096, wrapped 1025-1095, held 838-1024, wrapped 768-837, held 629-767, wrapped below. At 1060 the "change" rendered 1222px against today's 1220 — no change at all. That is H4-c exactly: a rule made of tokens inherits those tokens' breakpoints, and the slack GREW at every step down. `flex: 1 1 0` takes the marker's width out of the wrap decision entirely: the line's hypothetical size becomes its own minimum rather than its content's, so the row stops breaking on the marker and the line simply grows into whatever the marker leaves. That is what removed the four alternating bands — and it is ALL it does. It did not settle where the band stacks; the media query at the foot of this file does, and the reason it has to is measured there. The wrapped state IS today's band — marker, then the line beneath it at --gap-heading, which is why the row gap is that token and not --gap-block: without it the sentence tucks under an 84px letterform and reads as its caption. */ /* 🔴 THE VERB-TO-MARKER INTERVAL MOVES ONTO THE ROW, and it is not bookkeeping. Wrapping the marker in a flex container and zeroing its own margin took --gap-block off that interval and NOTHING SHOWED: measured as line boxes, the rooms give verb -> marker +13.0px and this band gave −11.6px — 24.6px tighter than the pattern it is supposed to match — while the screenshot at 1440 looked untouched, because an 84px line box carries enough leading above its caps to hide the loss. The interval belongs to whatever now stands under the verb; that is the row. */ .hm--alt .hm-prays__row { display: flex; flex-wrap: wrap; align-items: last baseline; justify-content: space-between; margin-block-start: var(--gap-block); column-gap: var(--gap-component); row-gap: var(--gap-heading); } /* The marker never shrinks — .t-marker's size is a decided register, and a display word squeezed to fit is a different word. */ /* 🔴 SO IT IS CAPPED IN MEASURE INSTEAD, AND THAT IS WHAT LETS THE MOSQUE BE NAMED (Mahesh, 9 Aug, Session XXXVI: a set of one has a name). The marker stopped being "The mosque" and became `Al Ghala Mosque`, which sets 801px at 84px against a 960px column where the old label set 549. There is no horizontal left to have: 801 + the 64px column-gap leaves 95px for the evidence. 🔴 AND THE BAND DID NOT FAIL, IT STOOD DOWN. At 1440, 1024 and 768 the row simply wrapped and p9-home reported **50 passed, 0 FAILED** against a pin of 52 — the horizontal branch's three assertions replaced by the stacked branch's one. Session XI's construction was gone at every desktop width and the only thing that could see it was the per-configuration count. Where the row DID stay horizontal it broke instead: verb -> marker 61.2 at 640 and 76.6 at RTL-1440 against the rooms' 24.0. The rename did not degrade this band, it INVERTED it — the horizontal survived only at the two widths where it fails, and was abandoned at the three where it worked. 🔴 § 3a's OWN CENTRAL CLAIM IS FALSE ON THE PAGE and this is why the cap is a cap rather than another `flex` value. It says `flex: 1 1 0` takes the marker out of the wrap decision so "the row can never wrap at all". It does not: the line's `min-inline-size: min-content` is 132.6px, so the row wraps whenever marker + 64 + 132.6 exceeds the column. Swept in 8px steps from 1440 to 560, that put the horizontal back in ALTERNATING BANDS — 1016-832 and 760-640 horizontal (and sinking, 38.2 and 35.5->61.1), the rest wrapped — which is H4-c's exact shape and the very fault § 3a was written to remove. A hypothetical-size rule can only ever make the wrap UNLIKELY. Capping the marker makes it IMPOSSIBLE: at every width the capped marker is half the column, so half + 64 + 132.6 is inside the column with room to spare and the row has no decision left to take. HALF, and it is the design stated rather than a number tuned to a picture: the marker takes at most half the row and the evidence takes the rest. `Al Ghala Mosque` then sets as `AL GHALA / MOSQUE` at the full 84px, which is not a new object — `Schools and universities` has set two lines at 84px in the room above since the day the rooms were built. Measured at 1440 the marker is 480 and the evidence 416, which is MORE column than the short label ever left it (347). Register, stroke and the one-pen ratio are all untouched, because nothing about the type moved. */ .hm--alt .hm-prays__row .ha-marker { flex: 0 0 auto; margin-block-start: 0; max-inline-size: 50%; } /* 🔴 `last baseline`, AND THE TWO OBVIOUS ALTERNATIVES ARE BOTH WRONG — this was measured, not reasoned. `baseline` aligns FIRST baselines and would hang the evidence's second line below the marker's. `flex-end` aligns the two BOXES, and a line box carries half-leading that scales with font-size, so at 84px against 16px it left the baselines 10.0px apart — close enough to look right in a screenshot and wrong on the page. `last baseline` pairs the marker's one baseline with the evidence's last: measured DELTA 0.00px at 1440, 1025, 900, 768 and 640. Where it is unsupported the spec's own fallback is safe self-end, which is the flex-end rendering — 10px off, not broken. */ .hm--alt .hm-prays__row .hm-prays__line { flex: 1 1 0; min-inline-size: min-content; margin-block-start: 0; } /* 🔴 THE EVIDENCE IS GONE AND SO ARE ITS TWO RULES (Mahesh, 9 Aug, Session XXXVI: "Prayer runs through it all" is enough for the home page). They are removed rather than left standing, because a rule that matches nothing is not inert-but-harmless — it reads as a live constraint to the next person and stylelint cannot tell the difference. What went, and why each was here: `.hm-prays__evidence { display: block }` — the evidence began a line of its own so the break was the SENTENCE's and not the column's. There is one sentence now, so there is no second block to break. `.hm-prays__evidence .hm-link-inline { white-space: nowrap }` — the band's one target kept in one piece. It was already billed in this file as changing nothing on the page, a standing guard against a longer building name. The building name left the caption; the guard leaves with it. The door it protected is now the verb, and `p9-home` asserts THAT door is one line. The marker's own cap is what holds the horizontal now, above in § 3a. */ /* 🔴 THE HORIZONTAL STOPS AT 639, AND THE NUMBER CAME OFF THE PAGE. Sharing a baseline means the SHORTER object drops to meet the taller one, so as the leftover column narrows and the evidence takes another line, the marker sinks away from "And prays." above it. Swept: the drop is 0 at ≥841, 14 through 768-840 and 12 through 622-767 — all invisible — and then the evidence takes a THIRD line at 621 and the drop jumps to 37, which reads as an orphaned marker with a hole above it. At 460 it is 89. The flex-wrap floor alone does not catch this. It stacks at 437, where the link stops fitting — and 437 is BELOW the largest phones in use (iPhone 16 Pro Max is 440 CSS px), so the worst rendering of this band would have shipped on a current flagship and on nothing else. A condition that is honest about ITS OWN constraint can still be the wrong constraint. 639 rather than 621: this project already names the ≤639 band, and H15 and H21 both cost a session to a value parked on the knife edge. 622-639 is given up to keep an 18px margin on a content-dependent break. */ /* 🔴 AND THE BEAT STACKS AT THE SAME 639, WHICH `flex-wrap` COULD NOT HAVE DONE. This is § 3a's lesson arriving from the other side, and it is worth stating because the two look like the same construction: `flex: 1 1 0` takes the door out of the wrap decision — and on THIS band that means the row can never wrap at all, because the words' column simply keeps shrinking to keep a 128px door beside it. Swept to 320 the horizontal survives and the sentence goes from three lines to TWELVE. A `flex-wrap` here would state a condition that is never met, which is worse than no condition: it reads as a guard and guards nothing. The number is measured against the page as it stands. Today the sentence holds three lines from 1440 all the way down to 449; with the door beside it, it holds three down to 604 and takes a fourth at 603. 604 is where the door starts costing the sentence something — and it is CONTENT-dependent, so any edit to the sentence moves it. 639 sits inside that range, is a band this project already names, and is the mosque band's own key, so the page's two horizontals stack at ONE width rather than two that would have to be kept in step forever. Below it, this band IS what it was: sentence, services at --gap-block, door at --gap-heading, all flush to the column's start. Verified rather than asserted — at 600 the intervals, the band height and both paddings are identical to their values before this change (26.5 / 31.4 / 439.7 / 96 / 102.4), and a true 375 renders the same 6681px document. */ @media (max-width: 639px) { .hm--alt .ha-beat .container { display: block; } /* The door's own margin is what carries the interval when it stands under the words rather than beside them; the row does not exist here. */ .hm--alt .ha-beat__route { margin-block-start: var(--gap-heading); white-space: normal; } .hm--alt .hm-prays__row { display: block; margin-block-start: 0; } /* Transparent again, so the two intervals return to the elements that own them — and they are the rooms' own: --gap-block under the verb, --gap-heading under the marker. */ /* 🔴 AND THE CAP IS RELEASED WITH THEM. Half the ROW is the right measure while there is a row; below 639 there is not one — `display: block` above — so the same declaration would resolve against the whole column and squeeze the marker into half a page for no reason. The cap belongs to the horizontal, and it leaves when the horizontal does. */ .hm--alt .hm-prays__row .ha-marker { margin-block-start: var(--gap-block); max-inline-size: none; } .hm--alt .hm-prays__row .hm-prays__line { margin-block-start: var(--gap-heading); } } /* ----------------------------------------------------------- 4 · The closing band — ONE horizontal (Mahesh, 4 Aug: make it neater) ----------------------------------------------------------- */ /* 🔴 THE TYPE REGISTER IS NOT THE LEVER AND IS NOT TOUCHED. The closing band is 32px light on all fifty-four pages that carry it, LEVELLED at the /ajman build on 1 Aug after §6.2's 700-uppercase had left the site with one band object in two registers across 53 pages. Changing it here would re-open every one of them. The levers are GEOMETRY, SPACE and the ACTION, and what follows uses the first two and moves the third. 🔴 SCOPED TO .hm--alt, AND THE PROMOTION TOOK THE REASON AWAY. While there were two pages the argument was that the FILE was the guard — `pageStylesheet` takes a LIST, Home's was ["home"] and the option's ["home", "home-alt"], so dropping the prefix changed nothing on Home because Home did not load this stylesheet at all. That was proved by breaking it, and it is now FALSE IN BOTH HALVES: `index` is the only route that loads either file, and `.hm--alt` sits on that page's own `main`. **Neither the file boundary nor the prefix guards anything from anything.** Do not read this note as evidence that a stylesheet cannot reach another page — nothing here is holding it back, and the next difference authored in `home.css` will land on this same page. The prefix stays because it still SAYS something true — this rule belongs to the reading, not to the shell — and removing it now would be a diff over the whole file for no rendered change. The measurement the argument was built on is kept because it is a record of the band's two states: the same three declarations appended to `home.css` took the OLD Home's closing band from 398.8px and a stack to 344.4px and a flex row. WHAT WAS MEASURED, at 1440 before anything was decided. The band is 398.8px tall and its two objects use 46.1% of the 960px column: the sentence's ink is 442px, the action's box 205px, and 517.9px of paper sits empty at the line's inline-end. The measure is not the constraint — --measure-h2 allows 511.6 and the sentence asks for 442 — so the emptiness is intrinsic to a short sentence at a locked size, and only GEOMETRY can spend it. Space alone was rendered and refused: at the full --gap-section-major the band runs 678.8px for 119.8px of content, which reads as MORE empty rather than less (82% of the band is padding) and makes the paper taller than the mosque's black band above it. So the two objects become the two ends of ONE horizontal. That is not a new idea on this site: it is the construction H10 gave Home's second beat on 3 Aug — the words' column and the mark's box on the same two edges, so the pair reads as one object bounded by the column rather than as two things that happen to be near each other. 46.1% of the column becomes 93.2%, and the band comes down to 456.4px. AND 140 BECOMES 200, WHICH IS A TOKEN WHERE 140 WAS HALF OF ONE. `calc(var(--gap-section-major) / 2)` is the only halved gap on this page, and --gap-section is what .ha-beat — the page's OTHER paper band — already opens and closes on. The argument opens on paper at 200 and closes on paper at 200; the two paper bands become a pair instead of two different amounts of air. Nothing here is a new value, which is this stylesheet's own standing rule. */ /* 🔴 THE WHOLE OF § 4'S INVITATION BLOCK IS RETIRED (Mahesh, 7 Aug): *"combine the call for action to footer like other pages"* and, asked directly, *stack it, like other pages*. The band is BLACK now and it runs into the footer — see `home.css` § 8 for why that is E1.2 rather than an exception to it. WHAT WAS HERE, AND WHY IT IS NOT ANY MORE. Three rules made the sentence and the action the two ends of one horizontal, on the argument that a short sentence at a locked size leaves 46.1% of the column empty and only GEOMETRY can spend it. That reasoning was sound and it is answered differently now: the emptiness it was spending was PAPER, and this band's paper has gone to the map. On black, continuous with the footer's black, the band is no longer a lit rectangle whose proportions have to be defended — it is the last two lines of one dark object. The 200px padding goes with it. It existed to pair this band with `.ha-beat`'s 200 as the page's two paper bands; the map band is the second paper band now, and this one takes the SITE's closing-band value (`--gap-section-major / 2`, what `.aj-band`, `.sv-band` and `.ab-band` all use) because it is the site's object in the site's arrangement. Nothing replaces these rules. `home.css` § 8 already states the stacked band — margin under the line, action beneath it — which is what every other closing band on the site has always been. An override is deleted rather than neutralised: a rule set back to its own default is a rule the next reader has to work out was doing nothing. */ /* BASELINE, not centre. The action is a bordered box and its box is 56px against the line's 38px, so centring the two would set the sentence 9px above the type inside the button and neither would sit on anything. Aligned on the baseline they share the one line the band is now made of — which is also what lets the pair survive the wrap, since a wrapped row has no cross-axis relationship left to get wrong. */ /* ----------------------------------------------------------- 5 · Tablet and phone ----------------------------------------------------------- */ @media (max-width: 1023px) { /* An 80vh crop on a short landscape phone is a letterbox — the narrower the viewport, the wider the cell at a fixed vh, so the same fraction buys a harsher crop. The steps keep the desktop RATIO (0.74 and 0.61 of it) rather than being re-judged: the reason the number drops is the viewport's proportion, and that changes smoothly. */ .ha-img { block-size: 60vh; min-block-size: 300px; } } @media (max-width: 767px) { .ha-img { block-size: 48vh; min-block-size: 240px; } /* Sixteen names at 32px is most of a phone screen. The names step to the large-body register, which at ≤767 is 20px and is the same step the rest of the site takes here. 🔴 AND THE LEADING STEPS WITH IT — 21 Aug, XLI, on Mahesh's phone screenshots. The size moved register here and the line-height did not: it went on reading `--lh-editorial`, which is a DISPLAY leading (1.25 at this width) sitting under body-sized type, so fifteen names ran at 20/25 and the wall closed up into a block. --lh-body-lg is the leading that belongs to the register the size now names — 20/30. 📌 This is the CLAUDE.md rule about arrival clearance in a smaller place: a rule made of two tokens has to move BOTH when it changes register, and the half that is left behind goes on being correct about a size the element no longer has. It renders as rhythm, which is why no assertion on the board could see it and a photograph of the page could. */ .ha-room__names { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); } }