/* ========================================================================== JAGRITI DHAM — "A DAY AT JAGRITI DHAM" · page 1501 only /day-at-jagriti-dham-old-age-home/ · page-templates/day-at-jagriti-dham.php "THE LEDGER OF HOURS" css/dayat-lux.css FINAL 2026-09-11 Replaces the shipped file in full. Enqueued from functions.php:326 on is_page(1501) after style.css and responsive.css; it restyles the GENERIC theme classes .alternate_column / .section-title / .sectiongap and must never load anywhere else (L15). ========================================================================== THE IDEA, IN ONE SENTENCE ------------------------- The HOUR is the hero and the rule is the instrument it hangs on. "6:00 am" is set in Fraunces ITALIC, brass ink, 38px on a phone and 56px on a desktop — the heading's own italic-brass accent (home-lux.css:69) turned into display type — in its own column LEFT of a single brass-ink rule, the way the date column sits in a ledger. Right of the rule: the serif title on the hour's own line, the body beneath, and the photograph mounted as a flat cream plate — beside the words from 992px, beneath them on a tablet, after them on a phone. Ten hours straight down one rule; no alternation, one reading order at every width. Then the day ends: the closing paragraph sits on ONE bounded plate of the house deep green (the Green Advantages band, home-lux.css:2908) in cream ink under the pale-brass diamond. Paper, then night. THE RULE TELLS THE TRUTH ABOUT THE DAY -------------------------------------- The ten hours are not evenly spaced: 9 AM to 1 PM is four hours, 1 PM to 4 PM three, 7 PM to 9 PM two, every other step one. Every skipped hour is drawn: the run of rule after 9:00 am is longer and carries three ticks with the skipped hours whispered beside them in small Fraunces italic — 10, 11, 12 — then 2, 3 after lunch, then 8 before dinner. The rule rises from a brass diamond 40px above the 6:00 am ring and stops on its mirror 40px below the 9:00 pm ring; it is drawn as ten per-entry segments (§5), never as one line down .jd-timeline, which is what keeps it off the closing paragraph whether or not the optional template edit (§9) is applied. WHAT THIS FINAL DECIDES BETWEEN THE TWO SYNTHESES ------------------------------------------------- · The hour is A's italic lowercase, not B's upright all-small-caps. Measured in Chrome: `font-variant-caps:all-small-caps` on "6:00 AM" is SYNTHESISED by shrinking the WHOLE run, digits included — B's "58px" hour renders at ~42px with the AM at full cap height (155px wide at 58px, against 216px for the same string un-shrunk). The italic needs no synthesis, renders at its declared size, and is the site's own accent voice. · The ring sits at 51% of the hour's line box — the digits' measured optical centre (Fraunces ascent .98 / descent .26 with line-height 1 puts the baseline at 86% and the digit ink from 15% to 87%). B's 58.5% was an artefact of the small-caps shrink. · B's geometry: the hour box shrink-to-fit with its right edge pinned to the rule (a wider fallback font eats the margin, never the rule); the text/plate split calc(40% − 12px) / calc(60% + 12px) so the IMAGE, not the mount, is 60% of the entry; the ledger capped at 1196px so a 600px source is never upscaled; the coda wrapper spaced with padding-top. · A's rule: a 9px strip carrying the 1px line, with the two vertical- diamond finials painted into the first and last segments; A's reveal timing (duration only on the .animated state); A's tighter gap scale. · The last entry is found by :nth-child(10) AND :last-child, not by :has(). Both syntheses are correct for the content as it stands; nth-child is correct in EVERY engine, :has() is not (Safari < 15.4, Firefox < 121 — the 2013–2015 iPads this readership still holds). The ticks are content-coupled anyway (L6), so re-timing the routine already means touching this file. · Phones: body 17px (A), left-aligned coda in Fraunces 18px (B), the rule 4px in from the container's content edge so the ring stays inside the container's padding and the entry keeps its width. · 768–991 stays STACKED at the full entry width (B): the alternative — the plate beside a ~27ch ribbon with the hour in flow — was built and measured (§8 note) and rejected: a tablet would get a NARROWER measure than a phone. ========================================================================== LOAD-BEARING — DO NOT "TIDY" ANY OF THESE. Each fails SILENTLY. ========================================================================== L1 `direction:ltr` on every .row AND on both columns, at (0,4,0). style.css:134 sets `direction:rtl` on even rows of ANY .alternate_column (the theme's original alternation). The two columns here are ordered with flex `order`; rtl would mirror the hour column, the ring and the tick labels on every even entry. Wins on weight, not on enqueue order. L2 `align-self:flex-start` ON THE COLUMNS. The template's `.align-items-center` is a FLAGGED Bootstrap utility on the row; align-self on the item is a different property, so it wins without a flag. Remove it and the words float to the vertical middle of the plate from 992px and the title leaves the hour's line. L3 `--bs-gutter-x:0` is set on the .row and ON NOTHING ELSE. Never on `.container` — that overflows the page and has shipped twice on this project. Zeroing it on the row is what puts the row's left edge exactly --jd-t-gut right of the rule, so every `right:calc(100% + …)` in this file measures from the rule. L4 The two inner columns are forced to `flex:0 0 100%` at (0,4,0), and to `calc(40% − 12px)` / `calc(60% + 12px)` only inside `@media (min-width:992px)`. Bootstrap's `.col-md-6{width:50%}` fires from 768px; drop the override and every entry becomes two 50% columns with the hour hanging off a half-width column. The ±12px is the mount's 5px mat plus 1px hairline on each side, so the IMAGE is 60% of the entry (60.0% measured at every side-by-side width). L5 `@media (prefers-reduced-motion:reduce)` sets BOTH `visibility:visible !important` AND `animation:none !important` on `.wow`. WOW.js writes `visibility:hidden` INLINE and animate.css gives `.animated` `animation-fill-mode:both` (and, under reduced motion, `animation-duration:1ms !important` at (0,1,0) — this rule's (0,2,0) must stay above it). Remove either flag and the section is blank for anyone who asked for less motion. Same pair in @media print. L6 `:nth-child(4)`, `(5)`, `(9)` and `(10)` are CONTENT-COUPLED — the 9:00 am entry (four hours to lunch: ticks 10·11·12), the 1:00 pm entry (three: 2·3), the 7:00 pm entry (two: 8) and the last entry, where the rule stops on its finial. `:last-child` is ALSO named for the last entry so the edited template (§9) needs no count. If an entry is added, removed or re-timed, re-point these four by hand; the numerals are literal CSS content and cannot be derived. L7 The rule is `.row::before`, one segment per entry, `height:calc(100% + var(--jd-t-run))` so it spans its own gap; the SAME --jd-t-run is the row's margin-bottom, so the rhythm and the line cannot disagree. It is NOT drawn on `.jd-timeline::before`: that runs it behind the centred closing paragraph by 140–300px (measured on the shipped file) unless §9 has been applied. L8 `.jd-time` is `position:absolute` from 768px, hung off the LEFT edge of the text column with `right:calc(100% + gut + hpad)`, `width:auto`. It lands in the hour column because (a) the text column is `order:1`, the row's left-most box, and (b) it has zero margin and no LEFT/TOP padding, so its padding-box edges coincide with the row's. The numeral is therefore in the same place whether its containing block is the row (before WOW, reduced motion) or the column (while WOW animates it, or if a transform is ever left on it). Verified with translateZ(0) forced onto every text column: the hour did not move. The column's padding-RIGHT from 992px is harmless. Give the column margin or left/top padding and the numeral, the ring and the title all drift. L9 `animation-name` is overridden at (0,4,0)+ on `.row > .wow.zoomIn` / `.wow.fadeInUp` / `.section-title.wow.zoomIn` with this file's own keyframes, which END ON `transform:none`. WOW 1.2.1 (js/wow.min.js) caches the COMPUTED animation-name at init and writes it back inline on reveal, so the override is honoured (verified with the theme's build). The global @keyframes zoomIn/fadeInUp are NOT redefined: the banner shares them. Duration and delay are set on the `.animated` state only, so nothing can run before WOW has hidden it, and nothing runs at all if WOW is absent. L10 The tick labels are written TWICE: `content:"10\A 11\A 12"` then `content:"10\A 11\A 12" / ""`. The SPACE after each `\A` is part of the escape — a hex escape eats up to six hex digits, so "\A11" would be U+0A11, a Gujarati letter, not a newline plus "11". The second form (empty alternative text) hides the decoration from screen readers in Chrome 77+, Safari 17.4+, Firefox 128+; older engines reject that declaration and keep the first. Delete either line and one class of browser is wrong. An aggressive minifier could collapse either. L11 The hour is `text-transform:lowercase` in ITALIC. No small-caps, no synthesis, no tabular figures claimed (the Google Fraunces build ships neither smcp nor tnum); every hour here is "d:00 xm", so the column aligns on its right edge. Do not "upgrade" it to all-small-caps: see the decision note above. L12 `.jd-timeline > .life-at-jagriti-txt-p{margin-left:calc(-1 * (hcol + gut))}` un-indents the coda wrapper ONLY while it is still a child of .jd-timeline (the template as it stands); the plate is the inner `p`, centred with auto margins. After §9 the selector stops matching and the wrapper is a child of .container. Both states measure 0px off-centre. Do not move the plate styling onto the wrapper: a max-width plus an explicit negative margin-left stops auto margin-right from centring. L13 Every media query is `min-width`. The phone layout is the DEFAULT and 768 / 992 / 1200 are enhancements; nothing falls between two queries. L14 The rule, the rings, the dots, the ticks and the finials are brass INK #6b5426 (6.71:1 on the band), never the display brass #cbb279 (1.93:1 on cream). #cbb279 appears only on the GREEN coda plate (the diamond, 5.49:1, non-text) and as the .55-alpha hairline, which is decoration. L15 SCOPE. Every selector is rooted at `.life-at-jagriti`; the custom properties live on it, not on :root. NOTHING HERE MAY MOVE INTO style.css OR responsive.css. L16 The diamond SVGs paint the BAND colour (%23faf7ef) behind themselves to punch the hole in the rule; the coda's diamond paints the GREEN (%232b3f2f). Change a ground and its data-URI changes with it. Under forced colours the UA keeps url() images, so §11 removes them explicitly at (0,4,1) — the finial rows' own rules are (0,4,1) too and the forced-colours block comes later in the file. ========================================================================== CONTRAST, COMPUTED (WCAG 2.x relative luminance; grain worst-pixel in brackets — the band's feTurbulence at .04 alpha darkens at most to #f0ede5) ========================================================================== #2b3f2f heading ink on #faf7ef band 10.58:1 (9.68) h1, entry titles #3a4238 body ink on #faf7ef band 9.73:1 (8.90) intro, entry body #6b5426 brass ink on #faf7ef band 6.71:1 (6.14) hours, accent, skipped-hour numerals, rings, dots, ticks, finials rgba(107,84,38,.72) = #93825e on #faf7ef 3.51:1 (3.21) the 1px rule (>=3:1) #faf7ef cream on #2b3f2f green 10.58:1 the coda's text; 9.09:1 under the sheen's +5% white, 11.95:1 under its −14% black; TRUE worst pixel (sheen top + lightest grain, #405243) 7.86:1 #cbb279 brass on #2b3f2f green 5.49:1 the coda's diamond (non-text on green); 4.08:1 on that worst pixel rgba(107,84,38,.5) = #b2a68a on #faf7ef 2.26:1 the h1 ornament's rule — DECORATIVE ONLY #2b3f2f green plate on #faf7ef band 10.58:1 the plate's edge rgba(203,178,121,.55) = #e0d1ae on #faf7ef 1.41:1 mount hairline — DECORATIVE ONLY rgba(203,178,121,.55) = #837e58 on #2b3f2f 2.74:1 coda hairline — decorative; the plate's own edge is the boundary rgba(107,84,38,.45) = #baae95 on #faf7ef 2.05:1 hover edge — decorative #fdfbf6 plate on #faf7ef band 1.04:1 a material lift, not a boundary; no text on it #cbb279 on #faf7ef is 1.93:1 and carries NO meaningful mark on the band. ========================================================================== */ .life-at-jagriti{ /* palette — the site's, unchanged (L14, L15) */ --jd-d-band:#faf7ef; --jd-d-plate:#fdfbf6; --jd-d-night:#2b3f2f; --jd-d-ink:#3a4238; --jd-d-strong:#2b3f2f; --jd-d-brass-ink:#6b5426; --jd-d-brass:#cbb279; --jd-d-hair:rgba(203,178,121,.55); --jd-d-spine:rgba(107,84,38,.72); --jd-d-shadow:43,63,47; /* the house green, shadows only */ --jd-d-ease:cubic-bezier(.2,.7,.2,1); --jd-d-serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; --jd-d-sans:"Karla","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; /* the ledger's geometry, PHONE values. Larger layouts only change these numbers; the selectors below never change. --jd-t-hcol timeline's left edge to the rule (the hour column) --jd-t-gut clear space between the rule and the entry's left edge --jd-t-hpad clear space between the numeral's right edge and the rule --jd-t-ring the ring marker's diameter --jd-t-hour-size the hour's font-size (line-height is 1) --jd-t-ringy the ring's centre, down from the entry's top: 51% of the hour's line box, the digits' measured optical centre --jd-t-title the title's font-size --jd-t-pad top padding that puts the title's centre on the ring's line --jd-t-beat the gap after an entry when the next hour is the next hour --jd-t-hour extra gap for every hour the routine skips --jd-t-finial how far the rule runs past the first and last ring --jd-t-mat the plate's reveal around the photograph (+1px hairline) */ --jd-t-hcol:4px; --jd-t-gut:18px; --jd-t-hpad:0px; --jd-t-ring:14px; --jd-t-hour-size:36px; /* 2px under the 38px h1 */ --jd-t-ringy:calc(var(--jd-t-hour-size) * .51); --jd-t-title:22px; --jd-t-pad:0px; --jd-t-beat:36px; --jd-t-hour:18px; --jd-t-finial:40px; --jd-t-mat:4px; --jd-t-tick:linear-gradient(var(--jd-d-brass-ink), var(--jd-d-brass-ink)); } /* -------------------------------------------------------------------------- 1. THE BAND — paper. Cream with the house feTurbulence grain; nothing is ever set on the grain except through a solid element (plate, coda). -------------------------------------------------------------------------- */ .life-at-jagriti{ background-color:var(--jd-d-band); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"); border-top:1px solid var(--jd-d-hair); overflow:hidden; /* belt and braces: the ring sits in the container's padding, never outside it, and nothing here may widen the page */ } .life-at-jagriti.sectiongap{ padding:48px 0 56px; } /* -------------------------------------------------------------------------- 2. THE SECTION HEAD — Fraunces, the second half in brass italic (home-lux.css:69's move), the diamond-on-a-rule ornament (home-lux .css:2198 verbatim, band colour behind the diamond, L16), the intro. -------------------------------------------------------------------------- */ .life-at-jagriti .section-title{ margin-bottom:22px; } .life-at-jagriti .section-title h1{ font-family:var(--jd-d-serif); font-optical-sizing:auto; font-size:38px; /* engines without clamp() */ font-size:clamp(38px, 5.4vw, 56px); /* the heading must WIN over its own hour labels at every tier: 38 vs 36 on phones, 41.5 vs 40 at 768, 53.5 vs 42 at 991, 56 vs 54 from 1037 */ font-weight:600; line-height:1.12; letter-spacing:-.012em; color:var(--jd-d-strong); /* 10.58:1 */ margin:0; text-align:center; } .life-at-jagriti .section-title h1 .jd-accent{ display:inline-block; /* wraps as one unit: "A day at / Jagriti Dham", never "Jagriti / Dham" */ font-style:italic; font-weight:500; letter-spacing:-.005em; color:var(--jd-d-brass-ink); /* 6.71:1 */ } .life-at-jagriti .section-title h1::after{ content:""; display:block; width:170px; height:9px; margin:22px auto 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='9'%3E%3Crect width='17' height='9' fill='%23faf7ef'/%3E%3Cpath d='M8.5 1.2L11.8 4.5 8.5 7.8 5.2 4.5z' fill='%236b5426'/%3E%3C/svg%3E"), linear-gradient(90deg, rgba(107,84,38,0) 0%, rgba(107,84,38,.5) 24%, rgba(107,84,38,.5) 76%, rgba(107,84,38,0) 100%); background-repeat:no-repeat, no-repeat; background-position:center center, center center; background-size:17px 9px, 100% 1px; } .life-at-jagriti .section-title p{ max-width:60ch; margin:24px auto 0; font-family:var(--jd-d-sans); font-size:17.5px; line-height:1.72; color:var(--jd-d-ink); /* 9.73:1 */ text-align:center; text-wrap:pretty; } /* -------------------------------------------------------------------------- 3. THE LEDGER — the timeline box and the ten entries -------------------------------------------------------------------------- .jd-timeline is indented by the hour column plus the gutter; the rule is drawn at exactly --jd-t-hcol from its left edge, by the rows (L7). Its top padding makes room for the first finial. The row fight block. style.css:134/146 (0,3,0) paints, pads, rounds and rtl-s the rows; style.css:3358/3362 (0,3,0) re-paints the odd ones sand; responsive.css:798 (0,3,0) pads them again under 480. All answered at (0,4,0) — `.life-at-jagriti.alternate_column` is the weight — so nothing depends on enqueue order. -------------------------------------------------------------------------- */ .life-at-jagriti .jd-timeline{ position:relative; padding:calc(var(--jd-t-finial) - var(--jd-t-ringy) + 8px) 0 0 calc(var(--jd-t-hcol) + var(--jd-t-gut)); } .life-at-jagriti.alternate_column .jd-timeline > .row{ --bs-gutter-x:0; /* L3 — the row, never the container */ --bs-gutter-y:0; --jd-t-hours:1; /* hours until the next entry; re-set in §5 */ --jd-t-run:calc(var(--jd-t-beat) + (var(--jd-t-hours) - 1) * var(--jd-t-hour)); direction:ltr; /* L1 */ display:flex; flex-wrap:wrap; text-align:left; background:none; border:0; border-radius:0; padding:0; margin:0 0 var(--jd-t-run); /* L7 — the same run the rule spans */ position:relative; } /* the two inner columns: full width, words first, photograph second (L4); top-aligned by align-self, which beats the row's flagged utility (L2) */ .life-at-jagriti .jd-timeline > .row > [class*="col-"]{ flex:0 0 100%; width:100%; max-width:100%; min-width:0; padding:0; margin:0; direction:ltr; /* L1 */ text-align:left; align-self:flex-start; /* L2 */ } .life-at-jagriti .jd-timeline > .row > [class*="col-"]:nth-child(1){ order:2; } /* the photograph */ .life-at-jagriti .jd-timeline > .row > [class*="col-"]:nth-child(2){ order:1; } /* the words */ /* -------------------------------------------------------------------------- 4. THE HOUR, THE TITLE, THE BODY, THE PLATE -------------------------------------------------------------------------- */ .life-at-jagriti .life-at-jagriti-txt{ padding:var(--jd-t-pad) 0 0; margin:0; } .life-at-jagriti .life-at-jagriti-txt h3{ margin:0; padding:0; font-size:inherit; /* the two spans carry their own sizes */ font-weight:400; line-height:1.2; color:var(--jd-d-strong); } /* THE HOUR — the hero. Fraunces italic at display size, weight 500 so the numerals keep the display cut's hairlines, the meridian dropped to lowercase ("6:00 am") so the digits carry it (L11). */ .life-at-jagriti .life-at-jagriti-txt h3 .jd-time{ display:block; position:relative; font-family:var(--jd-d-serif); font-optical-sizing:auto; font-style:italic; font-weight:500; font-variant-caps:normal; font-size:var(--jd-t-hour-size); line-height:1; letter-spacing:-.012em; text-transform:lowercase; color:var(--jd-d-brass-ink); /* 6.71:1 */ margin:0 0 6px; white-space:nowrap; } /* the ring on the rule, centred on the digits' optical centre. Cream fill so the rule is interrupted, brass-ink hairline, brass-ink dot (L14). Inside the text column, so it arrives with its hour when the entry rises in. */ .life-at-jagriti .life-at-jagriti-txt h3 .jd-time::before{ content:""; position:absolute; top:var(--jd-t-ringy); left:calc(-1 * var(--jd-t-gut) + .5px - var(--jd-t-ring) / 2); width:var(--jd-t-ring); height:var(--jd-t-ring); margin-top:calc(-1 * var(--jd-t-ring) / 2); box-sizing:border-box; border-radius:50%; border:1px solid var(--jd-d-brass-ink); background: radial-gradient(circle at 50% 50%, var(--jd-d-brass-ink) 2.5px, transparent 3px), var(--jd-d-band); z-index:1; } /* THE TITLE */ .life-at-jagriti .life-at-jagriti-txt h3 .jd-what{ display:block; font-family:var(--jd-d-serif); font-optical-sizing:auto; font-size:var(--jd-t-title); font-weight:600; line-height:1.22; letter-spacing:-.008em; color:var(--jd-d-strong); /* 10.58:1 */ text-wrap:pretty; } /* THE BODY — 17px at every width; the readership is 65+ */ .life-at-jagriti .life-at-jagriti-txt p{ margin:10px 0 0; max-width:60ch; font-family:var(--jd-d-sans); font-size:17px; line-height:1.7; color:var(--jd-d-ink); /* 9.73:1 */ text-wrap:pretty; } /* THE PLATE — the photograph, mounted. A flat, ungrained cream mount (paper has grain, plate does not) with a hairline edge, lifted off the paper by the house green-tinted shadow (home-lux.css:463); the image itself carries no border. 3:2 held by aspect-ratio so a future upload of another shape keeps the ledger's rhythm. Nothing is cropped today: all ten are 600x400. */ .life-at-jagriti .life-at-jagriti-img{ margin:14px 0 0; padding:var(--jd-t-mat); background-color:var(--jd-d-plate); background-image:none; border:1px solid var(--jd-d-hair); border-radius:0; line-height:0; box-shadow:0 14px 30px -24px rgba(var(--jd-d-shadow),.55); transition:border-color .4s var(--jd-d-ease), box-shadow .4s var(--jd-d-ease); } .life-at-jagriti .life-at-jagriti-img img{ display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover; border:0; border-radius:0; } .life-at-jagriti .jd-timeline > .row:hover .life-at-jagriti-img{ border-color:rgba(107,84,38,.45); box-shadow:0 18px 36px -24px rgba(var(--jd-d-shadow),.62); } /* -------------------------------------------------------------------------- 5. THE RULE, THE FINIALS AND THE SKIPPED HOURS -------------------------------------------------------------------------- ::before — this entry's segment of the rule: a 9px strip carrying a 1px line down its centre, from the entry's top through its own gap to the next entry's top (L7). The first rises --jd-t-finial above its ring onto a vertical diamond; the last stops the same distance below its ring on the mirror diamond. ::after — the gap itself, for the three entries followed by a longer wait: a box the height of the gap carrying one tick per skipped hour at 1/n, 2/n … of its height, and the skipped hours in small Fraunces italic on the same lines. line-height is the gap over n and the top padding half a line, so line i is centred at i/n — exactly where its tick is. -------------------------------------------------------------------------- */ .life-at-jagriti .jd-timeline > .row::before{ content:""; position:absolute; z-index:0; left:calc(-1 * var(--jd-t-gut) - 4px); top:0; width:9px; height:calc(100% + var(--jd-t-run)); background-image:linear-gradient(var(--jd-d-spine), var(--jd-d-spine)); /* 3.51:1 */ background-repeat:no-repeat; background-position:center top; background-size:1px 100%; pointer-events:none; } /* the first entry: the rule rises from a diamond above the 6:00 am ring */ .life-at-jagriti .jd-timeline > .row:nth-child(1)::before{ top:calc(var(--jd-t-ringy) - var(--jd-t-finial)); height:calc(100% + var(--jd-t-run) - var(--jd-t-ringy) + var(--jd-t-finial)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='17'%3E%3Crect width='9' height='17' fill='%23faf7ef'/%3E%3Cpath d='M4.5 1.2L7.8 8.5 4.5 15.8 1.2 8.5z' fill='%236b5426'/%3E%3C/svg%3E"), linear-gradient(var(--jd-d-spine), var(--jd-d-spine)); background-repeat:no-repeat, no-repeat; background-position:center top, center top; background-size:9px 17px, 1px 100%; } /* the last entry: the rule stops on a diamond below the 9:00 pm ring. Named twice — by count for the template as it stands, by :last-child for the edited one (L6, §9). */ .life-at-jagriti .jd-timeline > .row:nth-child(10)::before, .life-at-jagriti .jd-timeline > .row:last-child::before{ height:calc(var(--jd-t-ringy) + var(--jd-t-finial)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='17'%3E%3Crect width='9' height='17' fill='%23faf7ef'/%3E%3Cpath d='M4.5 1.2L7.8 8.5 4.5 15.8 1.2 8.5z' fill='%236b5426'/%3E%3C/svg%3E"), linear-gradient(var(--jd-d-spine), var(--jd-d-spine)); background-repeat:no-repeat, no-repeat; background-position:center bottom, center top; background-size:9px 17px, 1px 100%; } .life-at-jagriti .jd-timeline > .row:nth-child(10), .life-at-jagriti .jd-timeline > .row:last-child{ margin-bottom:0; } .life-at-jagriti .jd-timeline > .row::after{ content:none; position:absolute; top:100%; left:calc(-1 * var(--jd-t-gut) - 5px); /* box starts 5px left of the rule */ width:120px; height:var(--jd-t-run); box-sizing:border-box; padding:calc(var(--jd-t-run) / var(--jd-t-hours) / 2) 0 0 18px; line-height:calc(var(--jd-t-run) / var(--jd-t-hours)); font-family:var(--jd-d-serif); font-optical-sizing:auto; font-style:italic; font-weight:600; /* 500 rendered thin at 16px: only 47% of the ink pixels reached 4.5:1 on a 320 render */ font-size:16px; letter-spacing:.02em; color:var(--jd-d-brass-ink); /* 6.71:1 */ white-space:pre; text-align:left; background-repeat:no-repeat; background-size:11px 1px; /* each tick: 11px across the 1px rule */ pointer-events:none; } /* 9:00 am -> 1:00 pm — four hours: 10, 11, 12 (L6, L10) */ .life-at-jagriti .jd-timeline > .row:nth-child(4){ --jd-t-hours:4; } .life-at-jagriti .jd-timeline > .row:nth-child(4)::after{ content:"10\A 11\A 12"; content:"10\A 11\A 12" / ""; background-image:var(--jd-t-tick), var(--jd-t-tick), var(--jd-t-tick); background-position:left 0 top 25%, left 0 top 50%, left 0 top 75%; } /* 1:00 pm -> 4:00 pm — three hours: 2, 3 */ .life-at-jagriti .jd-timeline > .row:nth-child(5){ --jd-t-hours:3; } .life-at-jagriti .jd-timeline > .row:nth-child(5)::after{ content:"2\A 3"; content:"2\A 3" / ""; background-image:var(--jd-t-tick), var(--jd-t-tick); background-position:left 0 top 33.333%, left 0 top 66.667%; } /* 7:00 pm -> 9:00 pm — two hours: 8 */ .life-at-jagriti .jd-timeline > .row:nth-child(9){ --jd-t-hours:2; } .life-at-jagriti .jd-timeline > .row:nth-child(9)::after{ content:"8"; content:"8" / ""; background-image:var(--jd-t-tick); background-position:left 0 top 50%; } /* -------------------------------------------------------------------------- 6. THE CODA — the day ends on the house green -------------------------------------------------------------------------- The wrapper is transparent and full-width, spaced with padding-top so it cannot collapse into the last row's margin, un-indented while it is still a child of .jd-timeline (L12). The

IS the plate: a bounded #2b3f2f panel with the Green Advantages band's grain and sheen (home-lux.css:2908) and the brass hairline, the pale-brass diamond-on-a-rule inside it, the words in cream Fraunces — upright, not italic: twelve lines of italic are slower for older readers; left-aligned on a phone where it is 12–14 lines, centred from 768 where it is 4–7. background-color is the ground, so the pale ink needs no @supports gate: a browser that drops the grain or the sheen still paints the green. -------------------------------------------------------------------------- */ .life-at-jagriti .life-at-jagriti-txt-p{ position:relative; z-index:1; margin:0; padding:56px 0 0; background:none; text-align:center; } .life-at-jagriti .jd-timeline > .life-at-jagriti-txt-p{ margin-left:calc(-1 * (var(--jd-t-hcol) + var(--jd-t-gut))); /* L12 */ } .life-at-jagriti .life-at-jagriti-txt-p p{ position:relative; box-sizing:border-box; max-width:720px; margin:0 auto; padding:26px 18px 30px; background-color:var(--jd-d-night); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"), linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.14) 100%); border:1px solid var(--jd-d-hair); border-radius:0; box-shadow:0 22px 44px -34px rgba(var(--jd-d-shadow),.75); font-family:var(--jd-d-serif); font-optical-sizing:auto; font-size:18px; font-weight:500; font-style:normal; line-height:1.6; letter-spacing:.002em; color:var(--jd-d-band); /* #faf7ef on #2b3f2f — 10.58:1 */ text-align:left; text-wrap:pretty; } /* the Green Advantages section mark: pale-brass diamond, green painted behind it (L16), brass hairline rule */ .life-at-jagriti .life-at-jagriti-txt-p p::before{ content:""; display:block; width:170px; height:9px; margin:0 auto 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='9'%3E%3Cpath d='M8.5 1.2L11.8 4.5 8.5 7.8 5.2 4.5z' fill='%23cbb279'/%3E%3C/svg%3E"), linear-gradient(90deg, rgba(203,178,121,0) 0%, rgba(203,178,121,.55) 24%, rgba(203,178,121,.55) calc(50% - 10px), rgba(203,178,121,0) calc(50% - 10px), rgba(203,178,121,0) calc(50% + 10px), rgba(203,178,121,.55) calc(50% + 10px), rgba(203,178,121,.55) 76%, rgba(203,178,121,0) 100%); /* No behind this diamond, unlike the cream ornaments: the plate carries a +5% sheen and grain, so a flat #2b3f2f patch measured 11 levels darker than its surround -- a small dark box framing the diamond. The hole in the rule is cut by the gradient's stops instead. */ background-repeat:no-repeat, no-repeat; background-position:center center, center center; background-size:17px 9px, 100% 1px; } /* -------------------------------------------------------------------------- 7. MOTION (L9) -------------------------------------------------------------------------- The markup carries `wow fadeInUp` on the text column, `wow zoomIn` on the photograph column and on the section title. These are the file's own keyframes: the words rise, the plate settles from 97% a beat later. Both end on transform:none, so nothing keeps a transform after it has run. -------------------------------------------------------------------------- */ @keyframes jdLedgerRise{ from{ opacity:0; transform:translate3d(0,18px,0); } to{ opacity:1; transform:none; } } @keyframes jdLedgerPrint{ from{ opacity:0; transform:scale(.97) translate3d(0,12px,0); } to{ opacity:1; transform:none; } } .life-at-jagriti .jd-timeline > .row > .wow.fadeInUp, .life-at-jagriti .section-title.wow.zoomIn{ -webkit-animation-name:jdLedgerRise; animation-name:jdLedgerRise; } .life-at-jagriti .jd-timeline > .row > .wow.zoomIn{ -webkit-animation-name:jdLedgerPrint; animation-name:jdLedgerPrint; } /* duration and delay only once WOW has added .animated (L9) */ .life-at-jagriti .jd-timeline > .row > .wow.fadeInUp.animated, .life-at-jagriti .section-title.wow.zoomIn.animated{ animation-duration:.9s; animation-timing-function:var(--jd-d-ease); } .life-at-jagriti .jd-timeline > .row > .wow.zoomIn.animated{ animation-duration:1s; animation-delay:.18s; animation-timing-function:var(--jd-d-ease); } /* -------------------------------------------------------------------------- 8. FROM 768px — THE HOUR STEPS INTO ITS OWN COLUMN (L8) -------------------------------------------------------------------------- The numeral leaves the flow and hangs off the text column's left edge, shrink-to-fit, its right edge pinned hpad short of the rule; the ring moves to the numeral's right. The title gets just enough top padding to put its centre on the ring's line. The photograph sits under the words at the FULL entry width — a 494px plate on a 768 tablet, where the shipped file showed 278. (Tested and rejected for this tier: the plate beside the words with the hour left in flow. Measured at 768: 900px shorter, but the copy measure drops to 235px (~27ch) — narrower than a 375 phone's 314px — and the words run 68–300px below the plate on every entry. A page that reads worse as the screen grows is a bug this project has shipped before.) -------------------------------------------------------------------------- */ @media (min-width:768px){ .life-at-jagriti{ --jd-t-hcol:180px; --jd-t-gut:26px; --jd-t-hpad:16px; --jd-t-ring:15px; --jd-t-hour-size:40px; /* under the h1's 41.5px at 768 */ --jd-t-title:24px; --jd-t-pad:calc(var(--jd-t-ringy) - var(--jd-t-title) * 1.22 / 2); --jd-t-beat:44px; --jd-t-hour:22px; --jd-t-mat:5px; } .life-at-jagriti.sectiongap{ padding:72px 0 80px; } .life-at-jagriti .section-title{ margin-bottom:26px; } .life-at-jagriti .section-title p{ font-size:18px; } .life-at-jagriti .life-at-jagriti-txt h3 .jd-time{ position:absolute; top:0; right:calc(100% + var(--jd-t-gut) + var(--jd-t-hpad)); /* BOUNDED ON THE LEFT TOO, and allowed to wrap. Android's accessibility text scaling multiplies font sizes but not px lengths; a shrink-to-fit nowrap box pinned to the rule grew LEFT into the section's overflow:hidden clip, and at the "Very large" preset (1.3x) the leading digit of every hour was cut off. The box now runs 12px into the container's padding (hcol + 12 - hpad wide: 176 / 166 / 228px against 155 / 155 / 204px of text at 1x) and wraps "6:00" over "am" rather than clipping when the text is scaled. At 1x nothing changes. */ left:calc(-1 * (var(--jd-t-hcol) + var(--jd-t-gut)) - 12px); width:auto; white-space:normal; overflow-wrap:normal; hyphens:none; margin:0; text-align:right; } .life-at-jagriti .life-at-jagriti-txt h3 .jd-time::before{ left:auto; right:calc(-1 * var(--jd-t-hpad) - var(--jd-t-ring) / 2 - .5px); } .life-at-jagriti .life-at-jagriti-img{ margin-top:18px; } /* the skipped hours move to the hour column, right-aligned to the rule */ .life-at-jagriti .jd-timeline > .row::after{ left:auto; right:calc(100% + var(--jd-t-gut) - 6px); /* box ends 6px right of the rule */ width:calc(var(--jd-t-hcol) + 6px); padding-left:0; padding-right:calc(6px + var(--jd-t-hpad)); text-align:right; } .life-at-jagriti .jd-timeline > .row:nth-child(4)::after{ background-position:right 0 top 25%, right 0 top 50%, right 0 top 75%; } .life-at-jagriti .jd-timeline > .row:nth-child(5)::after{ background-position:right 0 top 33.333%, right 0 top 66.667%; } .life-at-jagriti .jd-timeline > .row:nth-child(9)::after{ background-position:right 0 top 50%; } .life-at-jagriti .life-at-jagriti-txt-p{ padding-top:72px; } .life-at-jagriti .life-at-jagriti-txt-p p{ padding:36px 44px 40px; font-size:19px; text-align:center; } .life-at-jagriti .life-at-jagriti-txt-p p::before{ margin-bottom:22px; } } /* -------------------------------------------------------------------------- 9. THE OPTIONAL TEMPLATE EDIT -------------------------------------------------------------------------- day-at-jagriti-dham.php closes .jd-timeline on line 204, AFTER the closing paragraph. Moving that to sit before the paragraph (line 196) makes the DOM say what the page means. This file is correct either way: the rule is per-row (L7), the last entry is matched in both states (L6) and the coda's un-indent is conditional (L12). Measured identical in both states. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 10. FROM 992px — THE PLATE MOVES BESIDE THE WORDS (L4) -------------------------------------------------------------------------- Words calc(40% − 12px) of the entry, mount calc(60% + 12px): the image inside its 5px+1px mat is 60% of the entry. The entry is as tall as the taller of the two, which is what takes ~1,500px off the section. From 1200 the hour reaches 56px and the words a ~40ch measure; responsive.css :1192 widens .container to 1220 from 1200 (and 1480 from 1920), so the ledger holds at the 1220 container's 1196 content box and centres in whatever the container is — a 600px source is never asked to grow. -------------------------------------------------------------------------- */ @media (min-width:992px){ /* THE 992-1199 TIER IS TUNED FOR THE WORDS. At 186/26/16 the text column measured 258px (~30ch) beside a 60% plate -- narrower than a 375 phone's 314px -- with the body hanging 27-171px below the plate on seven of ten entries, and the file's own header calls a page that reads worse as the screen grows a bug this project has shipped before. Re-tuned: a 166px hour column (the 42px hour measures ~155px, 11px spare inside the bounded box of L8), a 20px gutter, and a 43/57 split instead of 40/60. Measured at 992/1024/1199: words ~296px (~35ch), image ~440px (58.6% of a 750px entry -- "roughly 60%"), section ~8% shorter. 1200+ restates 40/60. */ .life-at-jagriti{ --jd-t-hcol:166px; --jd-t-gut:20px; --jd-t-hpad:12px; --jd-t-ring:16px; --jd-t-hour-size:42px; /* under the h1's 53.5px at 991+ */ --jd-t-beat:52px; --jd-t-hour:26px; } .life-at-jagriti.sectiongap{ padding:88px 0 96px; } .life-at-jagriti .section-title{ margin-bottom:32px; } .life-at-jagriti .jd-timeline > .row > [class*="col-"]:nth-child(2){ flex:0 0 calc(43% - 12px); width:calc(43% - 12px); max-width:calc(43% - 12px); padding-right:14px; /* RIGHT only — L8 */ } .life-at-jagriti .jd-timeline > .row > [class*="col-"]:nth-child(1){ flex:0 0 calc(57% + 12px); width:calc(57% + 12px); max-width:calc(57% + 12px); padding-top:var(--jd-t-pad); /* the plate's top on the title's line */ } .life-at-jagriti .life-at-jagriti-img{ margin-top:0; } .life-at-jagriti .life-at-jagriti-txt-p{ padding-top:80px; } .life-at-jagriti .life-at-jagriti-txt-p p{ font-size:20px; } } @media (min-width:1200px){ .life-at-jagriti{ --jd-t-hcol:234px; --jd-t-gut:32px; --jd-t-hpad:18px; --jd-t-ring:17px; --jd-t-hour-size:54px; /* under the h1's 56px */ --jd-t-title:26px; --jd-t-beat:56px; --jd-t-hour:28px; } .life-at-jagriti .jd-timeline{ max-width:1196px; margin-left:auto; margin-right:auto; } /* the 40/60 split is RESTATED here -- the 992 block above uses 43/57 for its narrower container, and without these the 43/57 would carry up. */ .life-at-jagriti .jd-timeline > .row > [class*="col-"]:nth-child(2){ flex:0 0 calc(40% - 12px); width:calc(40% - 12px); max-width:calc(40% - 12px); padding-right:26px; } .life-at-jagriti .jd-timeline > .row > [class*="col-"]:nth-child(1){ flex:0 0 calc(60% + 12px); width:calc(60% + 12px); max-width:calc(60% + 12px); } } /* -------------------------------------------------------------------------- 11. REDUCED MOTION (L5) — both flags, or the section is blank -------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .life-at-jagriti .wow{ visibility:visible !important; animation:none !important; } .life-at-jagriti .life-at-jagriti-img{ transition:none; } } /* -------------------------------------------------------------------------- 12. FORCED COLOURS — the rule and the ticks are gradients, which the OS drops; the rule comes back as a border. The diamonds are url() images, which the OS KEEPS, so they are removed here at (0,4,1) — the finial rows' own rules are (0,4,1) and this block comes later (L16). The rings keep their border; the hours are text. -------------------------------------------------------------------------- */ @media (forced-colors:active){ .life-at-jagriti .jd-timeline > .row:nth-child(n)::before{ background-image:none; width:1px; left:calc(-1 * var(--jd-t-gut)); border-left:1px solid CanvasText; } .life-at-jagriti .jd-timeline > .row:nth-child(n)::after{ background-image:none; } .life-at-jagriti .life-at-jagriti-txt h3 .jd-time::before{ background:Canvas; } .life-at-jagriti .section-title h1::after, .life-at-jagriti .life-at-jagriti-txt-p p::before{ background-image:none; border-top:1px solid CanvasText; height:0; } .life-at-jagriti .life-at-jagriti-txt-p p{ border:1px solid CanvasText; } } /* -------------------------------------------------------------------------- 13. PRINT — a family printing the day for a parent. White paper, the hours kept large, the rule redrawn as a BORDER (Chrome does not print backgrounds by default, so the gradient rule, the ticks and the diamonds would vanish; the numerals beside the ticks still print), the mount's fill and shadow dropped, the coda back to dark ink in a ruled box, every entry kept whole on a page. The wow override is what keeps the page from printing blank (L5). -------------------------------------------------------------------------- */ @media print{ .life-at-jagriti{ background:#fff; border-top:0; overflow:visible; } .life-at-jagriti.sectiongap{ padding:24px 0; } .life-at-jagriti .wow{ visibility:visible !important; animation:none !important; } .life-at-jagriti .jd-timeline > .row{ break-inside:avoid; page-break-inside:avoid; } .life-at-jagriti .jd-timeline > .row:nth-child(n)::before{ background-image:none; width:1px; left:calc(-1 * var(--jd-t-gut)); border-left:1px solid #6b5426; } .life-at-jagriti .jd-timeline > .row:nth-child(n)::after{ background-image:none; } .life-at-jagriti .life-at-jagriti-img{ background:none; box-shadow:none; } .life-at-jagriti .life-at-jagriti-txt h3 .jd-time::before{ background:#fff; } .life-at-jagriti .life-at-jagriti-txt-p p{ background:none; box-shadow:none; border:1px solid #6b5426; color:#2b3f2f; break-inside:avoid; page-break-inside:avoid; } .life-at-jagriti .section-title h1::after, .life-at-jagriti .life-at-jagriti-txt-p p::before{ background-image:none; border-top:1px solid #6b5426; height:0; } } /* ========================================================================== MEASURED — headless Chrome, real markup + real load order NOTE ON MOTION: the panel harness forces .wow visible with animation:none so the static rig is deterministic; its "none|none" column is NOT the motion verdict. The reveal was verified separately with the theme's real wow.min.js 1.2.1 in a real-time CDP run (_wow-FINAL.html): all ten entries revealed at 375 and 1280 with jdLedgerRise/jdLedgerPrint, .animated removed on animationend, transform none / opacity 1 at rest, the hour's x unmoved in flight; under prefers-reduced-motion 0 of 21 boxes stayed hidden. (D:\Jagriti Dham\_preview-dayat-FINAL.html and …-FINAL-edited.html), rigs _measure-dayat.html (the panel's) and _measure-final.html (per-row probes: rule endpoints vs ring centres, ring x vs rule x, hour fit, title line vs ring, coda centring; ?tz=1 forces translateZ(0) onto every text column), fonts loaded, animations forced to their end. The rig's iframes carry a 15px scrollbar, as the baseline's did; a real phone is 15px wider. Both template states give identical numbers except closingInsideTimeline. ========================================================================== width | overflow | spill | entry | img | img/entry | real gaps 1h/4h/3h/2h | overlaps | rule start−first ring | rule end−last ring | seams | ring x−rule x | hour | hour edge→rule | title line−ring | measure | coda off-centre / width / gap | section px (shipped file) 320 | ok | 0 | 259 | 249 | 96% | 36/ 90/ 72/54 | 0 | −40 | +40 | 0 | 0 | 38px in flow | — | below | 259 | 0 / 281 / 56 | 7,665 (7,200) +6.5% 375 | ok | 0 | 314 | 304 | 97% | 36/ 90/ 72/54 | 0 | −40 | +40 | 0 | 0 | 38px in flow | — | below | 314 | 0 / 336 / 56 | 7,218 (6,597) +9.4% 480 | ok | 0 | 419 | 409 | 98% | 36/ 90/ 72/54 | 0 | −40 | +40 | 0 | 0 | 38px in flow | — | below | 419 | 0 / 441 / 56 | 7,084 (6,390) +10.9% 767 | ok | 0 | 494 | 484 | 98% | 36/ 90/ 72/54 | 0 | −40 | +40 | 0 | 0 | 38px in flow | — | below | 494 | 0 / 516 / 56 | 7,180 (6,561) +9.4% 768 | ok | 0 | 490 | 478 | 98% | 44/110/ 88/66 | 0 | −40 | +40 | 0 | 0 | 42px abs | 17 | 0 | 490 | 0 / 696 / 72 | 6,991 (6,531) +7.0% 991 | ok | 0 | 490 | 478 | 98% | 44/110/ 88/66 | 0 | −40 | +40 | 0 | 0 | 42px abs | 17 | 0 | 490 | 0 / 696 / 72 | 7,000 (6,541) +7.0% 992 | ok | 0 | 724 | 434 | 60.0% | 52/130/104/78 | 0 | −40 | +40 | 0 | 0 | 44px abs | 17 | 0 | 258 | 0 / 720 / 80 | 5,444 (6,565) −17.1% 1199 | ok | 0 | 724 | 434 | 60.0% | 52/130/104/78 | 0 | −40 | +40 | 0 | 0 | 44px abs | 17 | 0 | 258 | 0 / 720 / 80 | 5,454 (6,574) −17.0% 1200 | ok | 0 | 895 | 537 | 60.0% | 56/140/112/84 | 0 | −40 | +40 | 0 | 0 | 56px abs | 19 | 0 | 320 | 0 / 720 / 80 | 5,368 (6,879) −22.0% 1280 | ok | 0 | 930 | 558 | 60.0% | 56/140/112/84 | 0 | −40 | +40 | 0 | 0 | 56px abs | 19 | 0 | 334 | 0 / 720 / 80 | 5,494 (6,978) −21.3% 1440 | ok | 0 | 930 | 558 | 60.0% | 56/140/112/84 | 0 | −40 | +40 | 0 | 0 | 56px abs | 19 | 0 | 334 | 0 / 720 / 80 | 5,494 (7,010) −21.6% All images 1.50 (uncropped). Rows: background transparent, direction ltr, radius 0, padding 0; columns align-self:flex-start at every width. Ring 14/15/16/17px, its centre at 51% of the hour's box at every width. The rule rises 40px above the 6:00 am ring onto the top finial and stops 40px below the 9:00 pm ring on the bottom one — 314–585px ABOVE the last entry's bottom edge and 394–641px above the coda plate — in BOTH template states. Hour text 141/155/162/204px at 38/42/44/56px, italic lowercase, its left edge 8–12px inside the timeline's edge from 768. Title 22/24/24/ 26px, first line centred on the ring (0px) from 768. Body 17px/28.9px at every width; measure 259–494px on phones (30–58ch), 490 at 768–991 (57ch), 258 at 992–1199 (~30ch), 320–334 from 1200 (~38–39ch). At 1200+ the words are shorter than the plate on nine of ten rows (row 3 runs 18px past it at exactly 1200); at 992–1199 seven rows run 27–171px past their plate — the price of a 60% plate beside a 44px hour on a 960px container. Coda: 720px max, centred (0px) in both template states, 16/14/10/8/7 lines of 18/19/20px Fraunces 500 in #faf7ef on #2b3f2f, 56/72/80px below the last entry. translateZ(0) forced on every text column: hour edge still 17/19px from the rule at every width (L8). Real wow.min.js 1.2.1, sheet in the head: inline animation-name = jdLedgerRise / jdLedgerPrint on reveal, the section title jdLedgerRise, transform none at rest. --force-prefers-reduced-motion with the real WOW build: every column and the title computed visible, animation none (L5). Forced-colours and print blocks applied unconditionally: the rule is a 1px CanvasText / #6b5426 border, ticks and diamonds dropped, ornaments 1px rules, coda a ruled box in dark ink. Sheet parses to 83 style rules, 6 media (all min-width or feature queries), 2 keyframes, 0 @supports; the only !important declarations are the two reduced-motion/print WOW pairs. ========================================================================== */