:root{color-scheme:light}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important} :root{ --navy:#0C2249; --navy-2:#143366; --navy-3:#2A4774; --navy-deep:#081733; --lacquer:radial-gradient(120% 90% at 18% 0%,rgba(110,160,240,.22),rgba(110,160,240,0) 55%),linear-gradient(168deg,#173C78 0%,#0E2856 42%,#091A3A 100%); --brass:#C9A15E; --brass-deep:#7A5F34; --brass-soft:#E6CF9E; --brass-sheen:linear-gradient(180deg,#F2D38E 0%,#D1A85F 48%,#B48A45 100%); --fring-out:var(--navy-deep); --fring-in:0 0 0 2px var(--brass-soft); --oxblood:#5A1B23; --chart:#13332A; --slate:#6E7C8C; /* --edge / --edge-dark: the boundary color for anything a visitor can operate. WCAG 2.2 SC 1.4.11 asks 3:1 for "visual information required to identify user interface components and states". A sweep of 278 controls over 25 routes found 98 under that figure, because every border token in use was picked as a hairline rather than as a boundary. Measured ratios: --rule-2 #C0B69F 1.98 / 1.82 / 1.47 on #FFFDF7 / #F7F3E8 / #E4DCC7 --line #D3CBB6 1.57 / 1.46 / 1.18 on the same three hero and on-dark ghost #3A4D65 1.81 on navy picker and get2 ghost #4A6080 2.44 on navy sampler and flip #2E4C78 2.15 on the sampler ground #0A1320 dark --line #22406B 1.76 / 1.51 / 1.40 on the dark grounds Two values are needed because no single one clears 3:1 against both a cream ground and a mid-navy band. Both already existed in the palette, so the count of distinct colors does not rise. --edge #6E7C8C (--slate) 4.19 / 3.85 / 3.12 light, 4.30 / 3.70 / 3.43 dark --edge-dark #93A3B3 6.06 on #0C2249, 4.21 on the lightest navy band #1A3C72, 7.21 on #0A1320, 4.80 on #143366 Decorative hairlines keep --rule and --line. A section divider or a table rule is not a user interface component, so 1.4.11 does not reach it, and raising those would coarsen the page for no accessibility gain. */ --edge:var(--slate); --edge-dark:#93A3B3; /* ==== 5.56 THE PAPER, 27 October 2026 ==== Measured before this change, over 1,180 large painted surfaces on 98 routes: 665 light surfaces carried 0.0 percent gradient, 8.6 percent shadow and 91.4 percent completely flat fill, while 401 dark surfaces carried 96.0 percent gradient. The site had two different levels of craft divided by color, which is why every light page read as dull and every navy band did not. Card against page measured 1.090:1, below the ratio at which the eye accepts a second plane, so a card existed only by its hairline. Now 1.199:1. Alt band against page was 1.233:1 and is now 1.242:1. Every ink pair RISES: ink on paper 14.81 -> 15.84, muted 9.65 -> 10.54, faint 6.93 -> 7.20, accent 6.10 -> 6.53. Weakest pair on the site is accent on the alt band at 5.03:1, against a 4.5 requirement. Nothing regressed. */ /* ==== 5.61 NEW PAINT, NOT SUN-FADED, 27 October 2026 ==== OWNER: "we don't want to appear our color has the look of fading from sitting in the sun for umpteen years we want new paint fresh look". MEASURED IN CIELCh, AND THE FAULT IS MINE. The 5.56 pass took the cream from L* 95.9 / chroma 5.8 to L* 92.5 / chroma 10.2. That is 76 percent MORE yellow pigment and 3.4 points LESS light, which is the exact recipe for aged parchment. The owner was reading a real measured change, not a mood. NEW PAINT IS THE OPPOSITE OPERATION: more light, less pigment. The page goes back up to L* 95.9 at chroma 5.3, cleaner than it has ever been, and the panels go to pure white. WHERE THE DEPTH COMES FROM NOW. Card against page measures 1.108:1, which on its own is below the ratio the eye reads as a second plane, so tone is NOT doing the separating any more: the specular top edge and the cast shadow are. That is also how gloss actually behaves on a bright wall, where a white panel is told from its ground by its highlight and its shadow, never by being lighter. --lift and --sheen below are strengthened to carry that load. INK: deepened to #0B121C so fresh ink sits on fresh paper. Measured 16.96:1 on the page, 18.79:1 on a panel, and 15.40:1 on the darkest stop of the page ramp. The weakest pair anywhere is the accent on the alt band at 6.08:1, against a 4.5 requirement. */ /* ==== 5.64 THE HUE WAS THE FAULT, 27 October 2026 ==== OWNER, after 5.61: "still appears dull and even more faded". Correct, and the correction is mine twice over. "Faded" in ordinary use means WASHED OUT, lacking color. I read it as "yellowed" and so I cut the chroma from 10.2 to 5.3, which made the page paler. Paler is more faded. Then the real fault, which three passes missed because none of them looked at it: measured in CIELCh the cream has sat at hue 92 to 95 degrees in EVERY version of this site, the original included. Past 90 degrees the yellow is drifting toward GREEN, and a slightly green cream is precisely what the eye reads as dingy, old and sun-bleached. Lightness and chroma were adjusted repeatedly while the one value actually causing the look was never touched. NOW: hue 79.8, a warm gold cream, at L* 95.0 and chroma 8.8. Bright, clearly a color rather than an off-white, and warm instead of olive. The alt band holds the same hue family at L* 89.0 so the page has rhythm, and panels stay pure white so they read as fresh stock laid on cream. MEASURED: ink 16.58:1 on the page and 18.79:1 on a panel, body copy 13.64, small labels 9.59. Weakest pair anywhere is the accent on the alt band at 5.69:1 against a 4.5 requirement. Card against page rises to 1.134:1 and the alt band to 1.172:1, both up from this morning. Nothing regressed. */ /* ==== 5.65 THE CLEAN BAND, 27 October 2026 ==== OWNER, on 5.64: "did u put pink hue in this?" Yes, and it was an overcorrection: 5.64 swung the hue from 94 degrees (the green side) straight PAST yellow to 79.8, and at this lightness that reads peach. STOP GUESSING AT THE TARGET. Measured hue of the named reference creams: Old Lace #FDF5E6 H 88.8 clean Floral White #FFFAF0 H 90.3 clean Papaya Whip #FFEFD5 H 85.0 clean, richer Antique Whte #FAEBD7 H 80.9 PEACH <- where 5.64 landed, at 79.8 Cornsilk #FFF8DC H 98.8 olive Beige #F5F5DC H 109.2 olive <- where every earlier version lived The clean cream band is hue 85 to 91. Below 84 it goes peach; above 93 it goes olive. This site has never once been inside that band: the original sat at 95.3 and my own passes at 92.6, 94.0 and 79.8. NOW: hue 87.8, the middle of the band, at L* 95.5 and chroma 11.0, which is nearly double the original's 5.8 so it reads as a real color rather than a washed off-white. Bright, warm, neither green nor pink. MEASURED: ink 16.79:1 on the page, 18.79:1 on a panel, body copy 13.81, small labels 9.72, weakest pair the accent on the alt band at 5.76:1 against a 4.5 requirement. Card against page 1.119:1, alt band 1.173:1. */ /* ==== 5.73 TEXT ON NAVY, 27 October 2026 ==== A census of every rendered text color found the secondary text on the navy bands split across two families: warm neutrals at hue 85-93, and cool blue-grays at hue 263-270 with chroma 5 to 10. The cool ones sit in the SAME hue as the navy behind them, so they read as more navy and recede, which is the flat look on exactly the bands that should carry the most presence. The warm ones separate from the ground and tie to the brass. Unified on the warm family: #E8DFCF secondary, #D4CBBC tertiary. Contrast rises on the weakest pair, #AEB9C7 at 7.88:1 becoming 9.75:1 on #0C2249, and every other pair holds above 9.3:1. The brass accents are left alone; they already measure chroma 31 to 41 and are the strongest color on the site. */ /* ==== 5.75 A GROUND, NOT A NEAR-WHITE, 27 October 2026 ==== SAMPLED FROM THE OWNER'S OWN IPHONE SCREENSHOT, which is the only ground truth that counts: page #FBF5E8 L* 96.7 chroma 7.0 the "white" card #FAF5E8 L* 96.6 chroma 6.9 The page and the panels were THE SAME COLOR, one value in 255 apart. There was no second plane anywhere on that screen, so nothing could read as polished: polish IS the contrast between a lit panel and a deeper ground, and there was no ground. WHY, AND IT WAS MY RAMP. --page ran L* 97 at the top of the DOCUMENT to L* 92.5 at the bottom, but the document is 25,700px tall. A phone screen is 844px, so a visitor only ever sees the first three percent of that gradient and every screen renders at the top stop, nearly white. The gradient was real, correct, and completely invisible. TONE ALONE CANNOT FIX IT. Measured: even dropping the page to L* 90 only reaches 1.29:1 against a white card, and going deeper starts to read as a paper bag while the ink falls. So the page becomes a DEFINITE cream and the panels earn the rest of their lift from the specular edge and the cast shadow, which is how gloss behaves in life. NOW: page L* 92.0 at chroma 15.2, more than double the 7.0 the phone was showing, and the ramp is compressed to L* 93.5 -> 90.3 so it can never wash out to white at the top of a long page. MEASURED: ink 15.34:1 on the page, body copy 12.62, labels 8.87, and the weakest pair anywhere is the accent on the alt band at 5.33:1 against a 4.5 requirement. Card against page rises from the 1.02 the phone was rendering to 1.225, and the sheen and lift below carry it the rest of the way. */ --paper:#F1E3C3; --paper-2:#E3D1AC; --card:#FFFFFF; /* ==== 5.63 WET INK, 27 October 2026 ==== OWNER: "the letters and the ink in the letters must also look fresh and not sun faded ... brand new and fresh and clean and easily to read". MEASURED, not assumed. An inventory of every rendered text node on a page returned three colors carrying almost all of it: #0B1118 on headings, which was already full strength, and then #27323F at 15px on 40 elements and #414D5C at 13px on 36. Those last two are the body copy and every small label on the site, and both are BLUE-GRAY. A reduced-density blue-gray is what the eye reads as faded ink, because it is what ink actually looks like once it has faded: it loses density and goes cold. Both are deepened and the blue cast pulled out, so the ramp now reads as one ink at three strengths rather than three grays. Measured on the page ground: body copy 11.59 -> 14.06:1, small labels 7.90 -> 10.31:1. Headings unchanged at 16.96:1, because they were never the problem. NOT DONE, DELIBERATELY: -webkit-font-smoothing stays at auto. Setting it to antialiased THINS strokes on macOS, which is the opposite of wet ink. It is the obvious-looking change here and it is the wrong one. */ --ink:#0B121C; --ink-2:#1C2531; --ink-3:#333E4B; /* 6.65 HAIRLINES, 29 October 2026. OWNER: "should we also make these hairlines a little darker or have them separate better?" He was right, and the numbers say why. Old --rule #D3CBB6 measured 1.62:1 on a white card and 1.51:1 on the cream paper. WCAG 1.4.11 asks 3:1 of any boundary that is what identifies a region. THE REASON IT QUALIFIES: the card fill is #FFFFFF on #FBF7EC paper, which is 1.07:1, so the fill separates NOTHING and the 1px border was doing the entire job at 1.5:1. That single fact is the root cause behind four separate owner complaints that sections bleed into the background. New values are the LIGHTEST on this same hue that clear 3:1 against BOTH grounds, found by walking lightness rather than by picking a color: --rule 3.26 on card / 3.05 on paper, --rule-2 4.54 / 4.24. --rule-2 had to move too: left alone it would have become WEAKER than --rule and inverted the hierarchy it exists to express. */ /* 6.65b A FIXED HAIRLINE COLOR CANNOT SERVE SIX GROUNDS. Found by auditing every rendered boundary on all 95 routes rather than by looking at a card. #948E80, chosen this morning against white and cream only, measured 3.26:1 on white but 2.17:1 on the brass band and 2.36:1 on the alternate band. The site has ELEVEN light grounds and the spread across them was 1.09. THE MECHANISM, not just the value: a translucent neutral scales WITH its ground, so one token holds a near-constant ratio everywhere. Black over a light ground multiplies toward black, which PRESERVES HUE, so the line is warm on the cream bands and cool on the blue ones without being told. Measured across all eleven grounds: min 3.03:1, spread 0.22, down from 1.09. THIS IS NOT THE SAME AS A TRANSLUCENT ACCENT OVER A DARK GROUND, which is always mud (see the picker). That fails because an accent HUE loses its chroma to the ground. A neutral has no chroma to lose, which is exactly why it is the one thing that may be used translucent. */ --rule:rgba(0,0,0,.44); --rule-2:rgba(0,0,0,.58); /* 6.65c THE LIMIT OF AN ADAPTIVE TOKEN, found by re-auditing after the swap. --rule adapts to the COLOR SCHEME, not to the ground it is actually drawn on. Two kinds of component break that assumption and both broke: a NAVY ISLAND inside light mode (.picker) took a black line and measured 1.19:1, and a PAPER ISLAND inside dark mode (.pg book previews) took a white line and measured 1.02:1. Each was invisible in exactly the mode the other one worked in. THESE TWO ARE MODE INDEPENDENT ON PURPOSE. They are the same value in both schemes, and an island redefines --rule to whichever one matches ITS OWN ground. Redefining the token inside the island, rather than restyling each child, means every descendant inherits the correct line for free. */ /* 6.73 THE ACCENT EDGE WAS INVISIBLE IN DARK MODE EVERYWHERE IT WAS USED. Five components mark themselves with border-top:3px solid var(--edge). --navy is #0C2249 and is NOT redefined for dark, where the card surface is #0E2244, so the accent that identifies a card measured 1.07:1 against the band behind it. The mark was doing nothing for every dark-mode reader. Same shape as the invisible button in 6.72: a value correct in one scheme, never checked in the other. */ --edge:var(--navy); --line-on-light:rgba(0,0,0,.44); --line-on-dark:rgba(255,255,255,.38); --rule2-on-light:rgba(0,0,0,.58); --rule2-on-dark:rgba(255,255,255,.55); --panel:rgba(90,70,32,.12); --brass-text:#7A5F34; --mark:#7A5F34; --label-text:#665427; --pill-n-text:#55471F; --good-text:#17543C; --warn-text:#8E400F; --teal-text:#2F6F6B; --chip:#F1E8D6; --md-u:#4A6DA3; --md-o:#14305C; --md-track:rgba(0,0,0,.075); --md-mark:#7A5F34; --bg:var(--paper); --surface:var(--card); --text:var(--ink); --muted:var(--ink-2); --faint:var(--ink-3); --accent:#6B4F2B; --accent-strong:#573F21; --line:var(--rule); --good:#2F6B4F; --warn:#7F560F; --bad:#8E2A2A; /* THE SURFACE. A flat fill is a color; a surface is a color that has been lit. --wash lights the page from above, --gloss lights each panel, --sheen is the specular top edge where the light catches, --lift is the four-layer cast that puts the panel above the page. Four layers rather than two because a single large blur reads as fog; near-contact, close, mid and ambient read as glass. */ /* --page is the DOCUMENT ramp: as tall as the page, so the light falls through the whole thing. 176deg rather than 180 because light that arrives perfectly square reads as a printed tint; a few degrees off vertical reads as a surface. Warm at the top, cooler and deeper at the foot. See 5.60. */ --paper-top:#F6E8CD; --page:linear-gradient(176deg,#F6E8CD 0%,#F3E5C8 34%,#F1E3C3 62%,#EDDDB9 100%); /* --wash is now the VIEWPORT layer only: the specular bloom where the light catches, and a vignette that pulls the eye to the middle of the screen. */ --wash:radial-gradient(135% 58% at 50% -12%,rgba(255,255,255,.62),rgba(255,255,255,0) 56%), radial-gradient(128% 104% at 50% 46%,rgba(255,255,255,0) 54%,rgba(104,88,56,.085) 100%); --gloss:linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.30) 38%,rgba(255,255,255,0) 62%,rgba(96,86,62,.022) 100%); --sheen:inset 0 1px 0 rgba(255,255,255,1),inset 0 0 0 1px rgba(255,255,255,.70); /* 5.75: with the page at L* 92 the panels finally have somewhere to cast, so the shadow is strengthened. It is doing more of the separating than tone is, by design. */ --lift:0 1px 1px rgba(46,38,20,.10),0 2px 6px rgba(46,38,20,.085), 0 10px 24px rgba(46,38,20,.105),0 30px 60px rgba(46,38,20,.13); --shadow:0 1px 2px rgba(14,26,43,.07),0 12px 34px rgba(14,26,43,.13); --serif:"Spectral",Georgia,"Times New Roman",serif; --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; --label:"Spectral",Georgia,"Times New Roman",serif; --maxw:1180px; } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ color-scheme:dark; --panel:rgba(255,255,255,.07); --brass-text:#E6CF9E; --mark:#E6CF9E; --label-text:#D9B36C; --pill-n-text:#E3CDA0; --good-text:#7FD6AC; --warn-text:#F0A868; --teal-text:#79C8C2; --chip:rgba(255,255,255,.07); --md-u:#5E80B8; --md-o:#AFC8EA; --md-track:rgba(255,255,255,.10); --md-mark:#C9A15E; --bg:#07142B; --surface:#0E2244; --text:#E9E4D8; --muted:#CFC8BD; --faint:#B1AAA0; --accent:#D9B36C; --accent-strong:#E8C98E; --rule:rgba(255,255,255,.38); --line:var(--rule); --paper-2:#11284D; --rule-2:rgba(255,255,255,.55); --edge:var(--brass); --good:#6FB08F; --warn:#D9A64E; --bad:#D98080; /* A boundary token has to flip with the theme. On the dark grounds --edge #6E7C8C reads 4.30 / 3.70 / 3.43, but the lighter dark bands the site also uses (#1A3768, #0E2244 tinted) pull it to 2.75. --edge-dark #93A3B3 reads 7.11 / 6.11 / 5.67 on the three dark grounds and 4.4 on the lighter bands. */ --edge:#93A3B3; --paper-top:#0E1F3E; --page:linear-gradient(176deg,#0E1F3E 0%,#0A1832 34%,#07142B 68%,#050F21 100%); --wash:radial-gradient(135% 58% at 50% -12%,rgba(96,138,208,.17),rgba(96,138,208,0) 56%), radial-gradient(128% 104% at 50% 46%,rgba(0,0,0,0) 54%,rgba(0,0,0,.26) 100%), radial-gradient(130% 72% at 50% -8%,rgba(96,138,208,.15),rgba(96,138,208,0) 60%), linear-gradient(180deg,#0A1B37 0%,#07142B 46%,#050F22 100%); --gloss:linear-gradient(180deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,0) 58%,rgba(0,0,0,.10) 100%); --sheen:inset 0 1px 0 rgba(255,255,255,.10); --lift:0 1px 2px rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.42),0 30px 60px rgba(0,0,0,.34); --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35); --fring-out:var(--brass-soft); --fring-in:0 0 0 2px var(--navy-deep); }} :root[data-theme="dark"]{ color-scheme:dark; --panel:rgba(255,255,255,.07); --brass-text:#E6CF9E; --mark:#E6CF9E; --label-text:#D9B36C; --pill-n-text:#E3CDA0; --good-text:#7FD6AC; --warn-text:#F0A868; --teal-text:#79C8C2; --chip:rgba(255,255,255,.07); --md-u:#5E80B8; --md-o:#AFC8EA; --md-track:rgba(255,255,255,.10); --md-mark:#C9A15E; --bg:#07142B; --surface:#0E2244; --text:#E9E4D8; --muted:#CFC8BD; --faint:#B1AAA0; --accent:#D9B36C; --accent-strong:#E8C98E; --rule:rgba(255,255,255,.38); --line:var(--rule); --paper-2:#11284D; --rule-2:rgba(255,255,255,.55); --edge:var(--brass); --good:#6FB08F; --warn:#D9A64E; --bad:#D98080; /* A boundary token has to flip with the theme. On the dark grounds --edge #6E7C8C reads 4.30 / 3.70 / 3.43, but the lighter dark bands the site also uses (#1A3768, #0E2244 tinted) pull it to 2.75. --edge-dark #93A3B3 reads 7.11 / 6.11 / 5.67 on the three dark grounds and 4.4 on the lighter bands. */ --edge:#93A3B3; --paper-top:#0E1F3E; --page:linear-gradient(176deg,#0E1F3E 0%,#0A1832 34%,#07142B 68%,#050F21 100%); --wash:radial-gradient(135% 58% at 50% -12%,rgba(96,138,208,.17),rgba(96,138,208,0) 56%), radial-gradient(128% 104% at 50% 46%,rgba(0,0,0,0) 54%,rgba(0,0,0,.26) 100%), radial-gradient(130% 72% at 50% -8%,rgba(96,138,208,.15),rgba(96,138,208,0) 60%), linear-gradient(180deg,#0A1B37 0%,#07142B 46%,#050F22 100%); --gloss:linear-gradient(180deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,0) 58%,rgba(0,0,0,.10) 100%); --sheen:inset 0 1px 0 rgba(255,255,255,.10); --lift:0 1px 2px rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.42),0 30px 60px rgba(0,0,0,.34); /* 6.02: --grain:.028 removed here, 28 October 2026. It was a LEFTOVER from when --grain was an opacity. --grain is now a url(), and body reads it as background-image:var(--grain),var(--page). A number there makes the whole background-image declaration invalid, so the browser drops it ENTIRELY -- grain and the page gradient together -- falling back to background-color var(--paper) #F1E3C3, which is never redefined for dark. The page would have gone cream in dark mode. It never fired only because no theme toggle ships, so :root[data-theme="dark"] is currently unreachable: dead code that becomes a live bug the day a toggle is added. The media-query twin did not have this line; the two dark blocks had drifted by exactly this one token. */ --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35); --fring-out:var(--brass-soft); --fring-in:0 0 0 2px var(--navy-deep); } *{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}} html{background:var(--bg)} /* ==== 5.57 INK DENSITY, 27 October 2026 ==== -webkit-font-smoothing:antialiased was deleted, not added. On macOS it replaces subpixel rendering with grayscale, which THINS every stroke on the site: it is the opposite of ink. The owner asked for color so polished a finger would come away marked, and the first thing standing in the way was a line asking the browser to make the type lighter. Removed, the same type renders with its full designed stem weight. text-rendering and optical sizing are added so the serif uses its own kerning pairs and its display optical size where the face has one. */ body{margin:0;color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;text-rendering:optimizeLegibility;font-optical-sizing:auto; /* ==== 5.60 THE LIGHT HAS TO FALL ACROSS THE DOCUMENT, 27 October 2026 ==== OWNER: "the ivory background looks dull and drab ... needs to be polished and appear wet to the touch". MEASURED CAUSE, and it is decisive. The page wash lived on a position:fixed pseudo-element, so it was anchored to the VIEWPORT, not to the document. A sample of the rendered ivory every 150px down a 5,140px page returned a total spread of 2.4 levels out of 255, under one percent, and the values repeated on a ~750px cycle, which is the viewport height. Every screenful was painted with the identical gradient, so no matter how far a visitor scrolled the light never moved. That is not a subtle gradient. It is a flat fill wearing a gradient's name, and flat is exactly what the owner kept reporting. FIX: the tonal gradient moves onto the body box itself, which is as tall as the document, so the light genuinely falls from the top of the page to the bottom and changes under the reader as they scroll. The stops also shift WARM to COOL, not merely light to dark, because real light on real paper changes hue as it falls and a pure value ramp still reads as printing, not as a lit surface. MEASURED AFTER: spread 36.9 of 255, fifteen times the old figure. HEADROOM CHECKED FIRST, not after: across all five stops the body ink never drops below 12.21:1 and the weakest pair on the page is the accent on the darkest stop at 5.03:1, against a 4.5 requirement. Nothing regressed. */ /* ==== 5.80 A RHYTHM FIX THAT WAS REVERTED, AND WHY, 27 October 2026 ==== A long-period undulation was added here to break up what a column sample said were 840px runs of unchanging tone, 24 percent of a page. THE MEASUREMENT WAS WRONG. It sampled ONE column down the page, and a single column passes through uniform areas even on a busy page: the stretch it flagged on the Commercial series page is in fact full of navy bands, buttons, the starter-kit block and the footer. There was no dead space to fix. The undulation was also measured as useless on its own terms: the worst per-screen tonal range went from 3.3 levels to 4.2, which nobody can see. Reverted rather than kept "in case", because an unjustified layer is one more thing for a future reader to reason about. THE LESSON, which is the point of recording this: a one-column probe cannot measure whether a PAGE is flat. Measuring the right quantity badly reads exactly like measuring the right quantity well. */ background-color:var(--paper); background-image:var(--grain),var(--page); background-repeat:repeat,no-repeat; background-size:180px 180px,100% 100%; background-attachment:scroll,scroll} /* THE PAGE AS A LIT SURFACE. Two fixed layers rather than background-attachment:fixed, which iOS Safari resolves against the whole document rather than the viewport and which janks badly on scroll on both iOS and Android. A fixed pseudo-element is correct on every device the owner named. z-index is negative so both layers sit under all content and neither can intercept a tap. */ /* The fixed layer keeps what SHOULD be viewport-anchored: a broad specular sweep and a soft vignette. A vignette is a property of the screen you are looking at, not of the document, so this one is correctly fixed. The tonal ramp is not, and that was the bug above. */ body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background-image:var(--wash)} /* 5.72b: body::after is deleted. It set opacity:var(--grain), but --grain resolves to a URL (above), so the declaration was invalid and the layer painted at FULL opacity. The body background already carries one grain layer, so the site was rendering grain twice, which is dull by construction. One grain layer, on the body background, is enough. */ @media print{body::before{display:none}} a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px} a:hover{color:var(--accent-strong)} :focus-visible:focus-visible{outline:2px solid var(--fring-out);outline-offset:2px;box-shadow:var(--fring-in);border-radius:2px} h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.15;margin:0;text-wrap:balance;letter-spacing:-.005em} p{margin:0} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:24px} @media (max-width:600px){.wrap{padding-inline:18px}} .eyebrow{font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.01em;text-transform:none;color:var(--accent)} .lede{font-size:19px;line-height:1.6;color:var(--muted);max-width:62ch} .mono{font-family:var(--mono)} .num{font-variant-numeric:tabular-nums} .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--sans);font-size:15px;font-weight:500;line-height:1.25;padding:13px 22px;border-radius:2px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background .2s,color .2s,border-color .2s;white-space:nowrap} .btn-primary{background:var(--navy);color:#F4F1EA;border-color:var(--navy)}/* 6.72 A NAVY BUTTON ON A NAVY GROUND, found 29 October 2026 by auditing fill separation rather than by looking. .eng-side is background:var(--navy) and .btn-primary is background:var(--navy), so the Exam Engine page carried a 1.00:1 call to action reading "Get the Part 107 Library, $179" that was invisible except for its text. WHY IT SURVIVED: dark mode repaints .btn-primary brass, so it looked correct to anyone testing in dark and was invisible to everyone else. A defect that is visible in only one color scheme is the kind a single-scheme check never finds, which is why the audit runs both. The instance was switched to btn-brass, matching every other on-navy CTA on the site. This rule is the guard: the button can no longer be told to be navy inside a navy container. */.eng-side .btn-primary,.band-navy .btn-primary,.ser-hero .band-navy .btn-primary{background:var(--brass);color:#0E1A2B;border-color:var(--brass)} .btn-primary:hover{background:var(--navy-3);color:#fff} .btn-brass{background:var(--brass);color:#0E1A2B;border-color:var(--brass)} .btn-brass:hover{background:#C4A169;color:#0E1A2B} .btn-ghost{background:transparent;color:var(--text);border-color:var(--rule-2)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent)} .btn-sm{padding:9px 14px;font-size:14px} .btn-block{width:100%} :root[data-theme="dark"] .btn-primary{background:var(--brass);color:#0E1A2B;border-color:var(--brass)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-primary{background:var(--brass);color:#0E1A2B;border-color:var(--brass)}} .rule{height:1px;background:var(--line);border:0;margin:0} /* ==== 5.73 THE SECOND INK RAMP, 27 October 2026 ==== The owner asked me to CONFIRM the polish reached all the ink, not just the ink I had been editing. A census of every rendered text color on all 84 routes found a whole ramp I had never touched: the text on the navy bands, which is a large share of the site. MEASURED: ELEVEN different blue-grays, every one at hue 257 to 263, chroma 4.8 to 11.7. Six were under chroma 9, which is the washed-out signature. Worse, the PRIMARY text on those same navy bands is #F4F1EA, a WARM cream at hue 93. So the bands carried a warm primary fighting a cold secondary, which is why they read hazy rather than crisp no matter how good the contrast was. NOW: one warm family at three strengths, hue 86 to 88, the same family as the ink on the cream pages. Eleven colors become three. Contrast RISES in ten of the eleven and is flat on the eleventh, so this is polish and legibility together, not a trade. The two tokens among them, dark-mode --muted and --faint, move onto the same ramp, so dark mode is unified with it rather than left behind. */ .utility{background:var(--navy);color:#CFC8BD;font-size:12.5px} .utility .wrap{display:flex;justify-content:space-between;gap:16px;padding-block:8px;flex-wrap:wrap} .utility b{color:var(--brass-soft);font-weight:500} /* The header sits at the very top of the document ramp, so it takes the ramp's TOP stop, not the flat --bg. Using --bg left a visible tonal seam across the full width of every page once the ramp went in (5.60). */ .site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--paper-top,var(--bg)) 93%,transparent);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)} .head-row{display:flex;align-items:center;gap:28px;height:74px} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)} .brand svg{width:38px;height:38px;flex:none} .brand .lockup{width:auto;height:42px;--lk-ink:var(--text);--lk-press:var(--accent)} .brand-head .lockup{height:46px;--lk-ink:url(#lkHead);--lk-press:var(--navy);--lk-g1:#D2AA62;--lk-g2:#9A7538;--lk-g3:#6B4E26} :root[data-theme="dark"] .brand-head .lockup{--lk-press:#E9E4D8;--lk-g1:#F0D9A8;--lk-g2:#E3C384;--lk-g3:#9A7743} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand-head .lockup{--lk-press:#E9E4D8;--lk-g1:#F0D9A8;--lk-g2:#E3C384;--lk-g3:#9A7743}} @media (max-width:600px){.brand-head .lockup{height:38px}} .site-foot .brand .lockup{height:46px;--lk-ink:#F4F1EA;--lk-press:#D6B67C} @media (max-width:600px){.brand .lockup{height:36px}} .only-dark{display:none} :root[data-theme="dark"] .only-dark{display:block}:root[data-theme="dark"] .only-light{display:none} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .only-dark{display:block}:root:not([data-theme="light"]) .only-light{display:none}} .logo-primary{width:min(300px,100%);height:auto;margin-inline:auto} .seal-sm{width:100%;height:auto;display:block;shape-rendering:geometricPrecision} .brand .wm{display:flex;flex-direction:column;line-height:1} .brand .wm b{font-family:var(--serif);font-weight:500;font-size:21px;letter-spacing:.14em} .brand .wm span{font-family:var(--label);font-weight:600;font-size:10.5px;letter-spacing:.01em;color:var(--accent);margin-top:5px} .nav{display:flex;gap:26px;margin-left:auto} .nav a{color:var(--muted);text-decoration:none;font-size:14.5px;padding-block:6px;border-bottom:1px solid transparent} /* 6.63b SCOPE, caught by looking at the open menu rather than by any measurement. The nowrap below was first written as ".nav a", which matches EVERY link inside the nav element, dropdown menu items included. It forced the menu descriptions onto one line and clipped them mid-word, and it would have done the same to the Study Guides and Schools & Military menus that were already shipping. The child combinator is the whole fix: only the bar's own items must not wrap. Sixth member of the selector-scope family recorded in 6.12b. */ .nav>a{white-space:nowrap} /* 6.63 The nav wrapped to two lines at every width from 981 to 1151px, which includes iPad landscape at 1024. Cause: nav items are flex children with the default flex-shrink:1, so when the bar ran out of room they compressed and the labels broke across lines instead of the bar admitting it did not fit. MEASURED: brand 197.1 + nav 733.1 + actions 92 = 1022.2px, plus 48px of row padding, needs about 1126px of viewport. The hamburger took over at 980px, so a 171px band showed a desktop bar that could not hold one line. FIX IS BOTH HALVES: items no longer shrink or wrap, AND the breakpoint moved to the width where they genuinely fit. Either alone is wrong. nowrap on its own would overflow the bar; moving the breakpoint alone leaves the squeeze. */ .nav>*{flex:0 0 auto} .nav a:hover,.nav a.on{color:var(--text);border-bottom-color:var(--brass)} .head-actions{display:flex;gap:8px;align-items:center} .icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:2px;cursor:pointer} .icon-btn:hover{border-color:var(--accent)} .icon-btn svg{width:19px;height:19px} .badge{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--brass);color:#0E1A2B;font:600 11px/20px var(--sans);text-align:center} .menu-btn{display:none} @media (max-width:1151px){.nav{display:none}.menu-btn{display:inline-flex}.head-actions{margin-left:auto}} /* ==== 5.74 THE iPHONE MENU FREEZE, 27 October 2026 ==== OWNER: "when I click on the menu on the website when I'm on the iPhone everything freezes up, it's been doing that for several days." REPRODUCED AND MEASURED on an iPhone 13 viewport (390 x 664 with browser chrome): the open menu renders 1,199px tall, overflowing the screen by 643px, with overflow-y:visible and max-height:none, so it cannot be scrolled. The nav lives inside .site-head, which is position:sticky, so opening it made the sticky header 1,274px tall. A sticky element taller than the viewport pins a full screen of menu in place: the page still scrolls behind it, but nothing the visitor can see ever moves. It is not a hang. It is a wall. This is a nineteen-link menu plus two section labels; it was always going to exceed a phone screen, and nothing bounded it. FIX: bound the panel to the space below the header row and let it scroll. - 100dvh, not 100vh, because iOS Safari's vh excludes the collapsing toolbar and would leave the last link under it. vh is kept first as the fallback for engines without dvh. - overscroll-behavior:contain stops the scroll chaining to the page behind, which is the other half of the stuck feeling on iOS. - -webkit-overflow-scrolling:touch for momentum on older iOS. THE OFFSET IS 112, NOT 74. The first attempt subtracted the 74px header row and still overflowed by 34px, because a utility bar sits ABOVE that row and the panel actually begins at y=108 when the page is at the top. 112 clears it with four pixels to spare. When the page is scrolled the utility bar has gone and the header pins at 0, so the panel is merely a little shorter than it could be, which costs nothing. VERIFIED at 390, 414 and 768, menu open, at the top of the page AND scrolled: the panel ends inside the viewport and scrolls to its last link. */ .mobile-nav{border-top:1px solid var(--line);background:var(--bg); max-height:calc(100vh - 112px); max-height:calc(100dvh - 112px); overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} .mobile-nav a{display:block;padding:14px 24px;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none;font-family:var(--serif);font-size:19px} main{min-height:60vh} .section{padding-block:88px} .section-tight{padding-block:56px} @media (max-width:700px){.section{padding-block:60px}} .sec-head{display:grid;gap:14px;margin-bottom:44px;max-width:760px} .sec-head h2{font-size:clamp(30px,4vw,44px)} .sec-head.center{margin-inline:auto;text-align:center;justify-items:center;max-width:820px} .sec-head.center .lede{margin-inline:auto;max-width:70ch;text-wrap:balance} /* CENTERED HEADS. The cap was 820px with a 62ch lede, so any lede past roughly 190 characters wrapped to four lines. Centered prose is comfortable for one to three lines; past that each line starts at a different x and the eye has to hunt for the beginning of the next one. Widened, and balanced so the line lengths are even rather than ragged, which is most of the visual complaint. */ .sec-head.center{max-width:940px} .sec-head.center h1,.sec-head.center h2{text-wrap:balance} .band-navy{background:var(--navy);color:#E9E4D8;--mark:var(--brass)} .band-navy .lede,.band-navy p{color:#CFC8BD} .band-navy .eyebrow{color:var(--brass)} .band-alt{background:var(--paper-2)} .hero{background:var(--navy);color:#EDE8DC;position:relative;overflow:hidden} .hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center;padding-block:84px 96px;position:relative;z-index:1} .hero h1{font-size:clamp(40px,5.6vw,68px);font-weight:400;line-height:1.04;color:#F4F1EA} .hero h1 em{font-style:italic;color:var(--brass-soft);font-weight:300} .hero .lede{color:#CFC8BD;margin-top:22px} .hero .eyebrow{color:var(--brass)} .hero-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px} .hero-ctas .btn{padding-inline:18px} .hero .btn-ghost{color:#EDE8DC;border-color:#3A4D65} .hero .btn-ghost:hover{border-color:var(--brass);color:var(--brass-soft)} .hero-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:44px;padding-top:26px;border-top:1px solid #2A4774} .hero-facts div,.hero-facts a{display:grid;gap:2px}.hero-facts a.hf-go{text-decoration:none;color:inherit;border-bottom:1px solid transparent;transition:border-color .15s}.hero-facts a.hf-go:hover b,.hero-facts a.hf-go:focus-visible b{color:var(--brass)}.hero-facts a.hf-go:hover{border-bottom-color:var(--brass)} .hero-facts b{font-family:var(--serif);font-weight:400;font-size:30px;color:#F4F1EA} .hero-facts span{font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:.008em;text-transform:none;color:#A9B6C6} .hero-dial{position:absolute;right:-180px;top:50%;width:760px;height:760px;transform:translateY(-50%);opacity:1;pointer-events:none}@media (min-width:901px) and (max-width:1279px){.hero-dial{right:-340px;width:620px;height:620px}}@media (max-width:900px){.hero-dial{right:-330px;width:560px;height:560px;opacity:.25}}@media (max-width:560px){.hero-dial{right:-290px;top:76%;width:430px;height:430px;opacity:.42}} .hero-books{position:relative;height:440px} .hero-books .cover{position:absolute;box-shadow:0 30px 60px rgba(0,0,0,.45),0 4px 10px rgba(0,0,0,.3)} .hero-books .c1{width:250px;left:18%;top:10px;z-index:3;transform:rotate(-2deg)} /* Hero entrance. Transform-only (via the separate translate property, so the fan rotation on .c1-.c3 survives), full opacity throughout, no rotation, all travel inside the viewport, largest cover first at 0ms. Rationale: - W3C Paint Timing requires used opacity "greater than zero" to be paintable, and web.dev LCP excludes "Elements with an opacity of 0". Animating opacity on or above the LCP candidate would delay LCP; a transform does not, because "changes to an element's size or position don't generate new LCP candidates". - Travel stays on-screen: web.dev warns "images that are initially rendered off-screen and then transition on-screen may not be reported". - Durations/easing/stagger from IBM Carbon (entrance easing, 240-400ms, "total time still within 500 ms") and Material (medium2/3 300-350ms). Total here: 140ms stagger + 330ms = 470ms. - Gated on prefers-reduced-motion: no-preference, so reduced-motion users get no offset and no animation at all. Apple names "spinning or scaling" as triggers, so neither is used. */ @keyframes coverRise{from{translate:0 30px;rotate:-2.5deg}to{translate:0 0;rotate:0deg}} @media (prefers-reduced-motion:no-preference){ /* Measured: the LCP element on this page is the H1 at ~404ms, NOT a cover, because the covers render as inline vector rather than . A delay on the covers therefore costs nothing in LCP, which is what lets the entrance start once the hero is actually on screen instead of finishing during load. translate and rotate are separate properties so the fan rotation in transform survives; both are compositor-only. */ .hero-books .cover{animation:coverRise 420ms cubic-bezier(0,0,.38,.9) both} .hero-books .c1{animation-delay:380ms} .hero-books .c2{animation-delay:470ms} .hero-books .c3{animation-delay:560ms} } .hero-books .c2{width:205px;left:56%;top:70px;z-index:2;transform:rotate(4deg)} .hero-books .c3{width:180px;left:0;top:170px;z-index:1;transform:rotate(-8deg)} @media (max-width:900px){.hero .wrap{grid-template-columns:minmax(0,1fr);padding-block:56px 64px}.hero-books{height:360px;max-width:460px;width:100%;margin-inline:auto}.hero-books .c1{width:200px}.hero-books .c2{width:165px}.hero-books .c3{width:145px}} .cover{--cacc:#C9A15E;--csoft:#D9C49E;aspect-ratio:8.5/11;min-height:0;max-width:100%;position:relative;overflow:hidden;color:#F4F1EA;display:flex;flex-direction:column;padding:9% 9% 7%;container-type:inline-size;border-radius:1px 3px 3px 1px} .cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4.5%;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.06) 60%,rgba(0,0,0,.08))} .cover.v1{background:linear-gradient(168deg,#436EB7 0%,#406CB5 55%,#3D69B1 100%);--cacc:#B8CAFE;--csoft:#F1F4FF} .cover.v2{background:linear-gradient(168deg,#3E4F88 0%,#3C4D86 55%,#394A82 100%);--cacc:#9AA1CE;--csoft:#C2C5E3} .cover.v3{background:linear-gradient(168deg,#31325C 0%,#2F315A 55%,#2C2E57 100%);--cacc:#817FA0;--csoft:#A09EB7} .cover.set{background:linear-gradient(168deg,#1F1934 0%,#1D1832 55%,#1A152F 100%);--cacc:#6E687F;--csoft:#888495} .cover .ck{font-family:var(--label);font-weight:600;font-size:4.43cqw;letter-spacing:.01em;color:var(--csoft);text-transform:none} .cover .cm{width:30%;margin:14% 0 10%;--mark-c:var(--csoft)} /* SERIES CODE PLATE. This is what tells a visitor which course a cover belongs to. WHAT STOOD HERE BEFORE, AND WHY IT IS GONE. Eight stroke-only per-series marks shipped on 25 October 2026 as a second coding dimension, because a CIELAB sweep had found 23 covers using three hue families for eight series and brass collapsing into red under simulated deuteranopia, and hue alone cannot carry eight categories. The marks were then WITHDRAWN AT THE OWNER'S DIRECTION as template-grade, and the eight sm-* symbols, the SERIESMARK map and the --cmark ink token went with them. DO NOT REINSTATE THEM. A scheduled run republished them after the rejection and the work had to be merged back out, so a future reader who finds the color evidence persuasive is reading a question that was already settled by the owner on taste, not by measurement. The plate carries the real code from the FAA Airman Knowledge Testing Matrix, which is why the seven titles that prepare for no single knowledge test, the supplements, the checkride and oral guides and the complete maintenance set, carry no plate at all. PLACEMENT, measured and still true. Every cz-* element is absolutely positioned, so an element in normal flow pushes nothing and lands under the title. Occupancy as a percentage of the cover: kicker 6.4 to 8.5, title block 17 to 45.7, lockup 74.4 to 79.9, volume 86.2 to 87.9, leaving a clear band from 45.7 to 74.4. The plate starts at 50.5 and ends between 60.8 and 70.7, the spread being whether the caption wraps. ONE case is already tight: on the home page at a 360px viewport the Remote Pilot volume one title reaches 49.1 while the plate box starts at 48.6, a 1.1px overlap of boxes that padding and descender space keep out of the ink. There is no vertical room left here. MEASURED STATE, 25 October 2026. Worst rendered pixel inside each text box, at device scale 3, over all 16 plate classes, with the checker validated first on white against black, a color against itself and #767676 on white: the CODE clears WCAG 2.2 SC 1.4.3's 4.5:1 on 4 of 16 covers. Worst 2.92 on Private Pilot volume one. the CAPTION now matches it, 4 of 16 and worst 2.99, after opacity .88 was removed from the rule below. That dimming had put 5 covers under even 3:1 while the caption was already the least legible text on the site, and the size and letterspacing difference carries the hierarchy without it. Cream cannot reach 4.5:1 over the brass and navy grounds at any size, the same wall the cover title hit, so whether miniature cover artwork is display text or a picture under 1.4.3's exemption is the owner's question and not a code fix. TWO SIZE FACTS, BOTH OPEN, measured over 92 routes at five widths: the caption is 7px on EVERY cover. clamp's 1.6cqw reaches 7px only at a 438px cover and the widest this site renders is 394px, so the floor is always the active term and the caption never scales with the cover. Its x-height is 4.00px, which is 0.100 degrees at 24 inches and 96 dpi, against the 0.2 degree consensus critical print size of Legge and Bigelow 2011, Journal of Vision 11(5):8. It also wraps to two lines on every cover at or below 170px. the code's cap height runs 0.100 to 0.375 degrees and clears 0.2 only on covers 200px and wider, which is 2 of the 9 surfaces that render a cover. Smallest is 5.75px of type on a 103px chooser tile. DO NOT SHRINK ANY COVER SURFACE without re-measuring the plate on it. */ .cover .cz-code{position:absolute;left:7.1%;top:50.5%;display:block;width:max-content;max-width:86%;color:var(--lk-ink,#FFFDF7);font-family:var(--serif);line-height:1;padding:1.1cqw 0 .9cqw}.cover .cz-code b{display:block;font-weight:400;font-size:5.6cqw;letter-spacing:.34em;text-indent:.34em}.cover .cz-code em{display:block;font-style:normal;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:clamp(7px,1.6cqw,12px);letter-spacing:.18em;text-indent:.18em;text-transform:uppercase;margin-top:.9cqw}.cover .cz-code:before,.cover .cz-code:after{content:"";display:block;width:100%;height:1px;background:currentColor;opacity:.55}.cover .cz-code:before{margin-bottom:1.1cqw}.cover .cz-code:after{margin-top:1.0cqw} .cover .cm svg{width:100%;height:auto;display:block} .cover .ct{font-family:var(--serif);font-weight:400;font-size:10.4cqw;line-height:1.02;color:#F4F1EA} .cover .cs{font-family:var(--sans);font-weight:300;font-size:4.6cqw;line-height:1.35;color:var(--csoft,#C9D1D9);margin-top:6%} .cover .cr{height:1px;background:var(--cacc);width:34%;margin-top:9%} .cover .cf{margin-top:auto;display:flex;justify-content:space-between;font-family:var(--label);font-weight:600;font-size:3.89cqw;letter-spacing:.01em;color:var(--csoft);text-transform:none} a:has(>.cover),.shelf a,.series>a{text-decoration:none} .cover .ct.long{font-size:8.6cqw} .cover.pp{background:linear-gradient(168deg,#886427 0%,#866225 55%,#825E22 100%);--cacc:#E2C092;--csoft:#FFEAD1} .cover.pp2{background:linear-gradient(168deg,#63451D 0%,#61431B 55%,#5E4019 100%);--cacc:#B29577;--csoft:#CFB9A2}.cover.pp3{background:linear-gradient(168deg,#3F2913 0%,#3D2711 55%,#3A250E 100%);--cacc:#8A7563;--csoft:#A39386} /* ==== 5.90 VOLUME COVERS FOR THE FOUR SERIES THAT HAD NONE, 27 October 2026 ==== OWNER: "all the 8 courses with landing pages are not showing our product ... all i see on these landing pages are just some words and nothing getting my attention - with no visuals of products." MEASURED, and he is right: product visuals per course page were Part 107 5, Private Pilot 3, A&P 16, and Instrument, Commercial, Flight Instructor, ATP and Helicopter ZERO. Five of eight course pages carried no product image at all. My own audit earlier today reported "hasVolumes: true" for every one of them, because it tested for a volume LIST and they all have one. It asked the wrong question, which is the same failure recorded at 5.89. Part of the cause was that the volume ladders did not exist. Private Pilot, Helicopter and A&P have per-volume steps; these four had only a base class, so all three volumes would have rendered the same color. Built to the rule already set in the cover-hue note: ONE hue per course, volumes step in LIGHTNESS ONLY, 6.2 L* per step, hue and chroma held constant. --csoft is solved per cover as the lightest tint of that hue reaching 4.6:1 on its own top stop; worst of the twelve is 6.51:1. White title on cover: worst of the twelve is 6.01:1. */ .cover.ir{background:linear-gradient(168deg,#8D2C38 0%,#892835 55%,#842431 100%);--cacc:#D19193;--csoft:#E1AFB0} .cover.ir2{background:linear-gradient(168deg,#7F5000 0%,#7C4D00 55%,#774900 100%);--cacc:#BE9F71;--csoft:#D1BA97} .cover.ir3{background:linear-gradient(168deg,#732D6F 0%,#6F2A6B 55%,#6B2567 100%);--cacc:#C193BC;--csoft:#D4B1D0} .cover.cfi{background:linear-gradient(168deg,#005A5D 0%,#00575A 55%,#005356 100%);--cacc:#77B1B1;--csoft:#9DC7C8} .cover.cfi2{background:linear-gradient(168deg,#36548D 0%,#335189 55%,#2F4D85 100%);--cacc:#90A5CB;--csoft:#AEBEDC} .cover.cfi3{background:linear-gradient(168deg,#155114 0%,#104D10 55%,#0A490B 100%);--cacc:#8DB08A;--csoft:#ACC6AA} .cover.com{background:linear-gradient(168deg,#256F3B 0%,#206B38 55%,#1B6734 100%);--cacc:#87B18F;--csoft:#A8C7AD} .cover.com2{background:linear-gradient(168deg,#00657C 0%,#006279 55%,#005D74 100%);--cacc:#6DB1BF;--csoft:#96C8D2} .cover.com3{background:linear-gradient(168deg,#726000 0%,#6E5D00 55%,#6A5900 100%);--cacc:#AFA575;--csoft:#C6BF9A} .cover.atp{background:linear-gradient(168deg,#84477D 0%,#80447A 55%,#7B4075 100%);--cacc:#BD96B8;--csoft:#D1B3CD} .cover.atp2{background:linear-gradient(168deg,#903930 0%,#8C352D 55%,#873129 100%);--cacc:#CE948C;--csoft:#DFB1AB} .cover.atp3{background:linear-gradient(168deg,#3E4D8F 0%,#3B498B 55%,#384587 100%);--cacc:#96A3CF;--csoft:#B2BCDE} .cover.amt{background:linear-gradient(168deg,#776A66 0%,#756864 55%,#726561 100%);--cacc:#D6C5C0;--csoft:#F8F0EE} .cover.amt2{background:linear-gradient(168deg,#625A57 0%,#605855 55%,#5D5552 100%);--cacc:#BEADA8;--csoft:#DAD5D3} .cover.amt3{background:linear-gradient(168deg,#504948 0%,#4E4846 55%,#4B4543 100%);--cacc:#A89793;--csoft:#BEBBBA} .cover.amt4{background:linear-gradient(168deg,#403A38 0%,#3E3836 55%,#3B3534 100%);--cacc:#948480;--csoft:#AAA6A5} .cover.amt5{background:linear-gradient(168deg,#302A29 0%,#2E2927 55%,#2C2625 100%);--cacc:#847470;--csoft:#969392} .cover.amtall{background:linear-gradient(168deg,#211C1B 0%,#201A19 55%,#1D1817 100%);--cacc:#776865;--csoft:#888584} /* FIGURE AND GROUND. Blue books on a navy ground: measured across 38 cover edges on 3 routes at 3 widths, 30 of 38 edges sat under 3:1 and the median boundary was 2.62:1. TWO EDGES WERE TRUE ISOLUMINANT: the Part 107 Complete Set on the hero lacquer measured a contrast ratio of 1.004:1, so every lightness-based checker calls them identical and only hue carries the edge at all. The hero's own radial glow was self-defeating, lifting the ground behind Volume One to L* 42.4 against that cover's L* 47.1, so it is deleted above. Lightening the ground and strengthening the cast shadow were both MEASURED and both made it worse; a black shadow on a dark ground already hurts 33 of 102 edges. A 2px cream rim is the treatment that works: 2px rather than 1px because the hero covers sit at fractional coordinates and a 1px ring antialiases across two rows at half strength. Declared after the page-block steps so they overpaint it on the right and bottom and it fills in at the top and left. Measured after: 2 of 38 edges under 3:1, median boundary 5.60:1. This is merchandising, not compliance. WCAG 2.2 SC 1.4.11's Understanding document says verbatim that it "does not require that controls have a visual boundary indicating the hit area". */ .cover.amtall::before{background:linear-gradient(180deg,#0F4C5C 0 20%,#1F4FA3 20% 40%,#9A3E12 40% 60%,#4B2A5C 60% 80%,#6E5412 80% 100%);width:6%} /* ONE HUE PER COURSE, 2026-10-25, at the owner's direction: "a customer clicks on brown expecting one study course and finds same color assigned to another study course". MEASURED CAUSE: hue was assigned by VOLUME POSITION, not by course, so Volume 1 was blue, Volume 2 gold and Volume 3 red in every series. 23 covers carried eight courses on three hue families plus one neutral; the worst cross-course pair sat at CIELAB dE 5.0 (atp vs heli6) and 16 pairs were under dE 12 out of 214. NOW: each course owns one hue and its volumes step in LIGHTNESS ONLY. Remote Pilot blue H281 Private Pilot gold H78 Instrument oxblood H21 Commercial green H148 Flight Instr teal H198 ATP plum H330 Helicopter steel H254 A&P graphite, near-neutral Remote Pilot is PINNED to hue 281 because Part 107 Volume 1 is shipped with printed covers; the optimizer wanted 292 and was overruled. MEASURED AFTER, all 214 cross-course pairs: min full dE 20.4, min hue-only dE 18.1 (L* excluded, because contrast ratio measures lightness only and cannot see two covers of the same hue), min dE 9.3 under simulated deuteranopia and 8.6 under protanopia, 0 pairs under dE 12, 0 under dE 20. A LADDER MUST STEP IN LIGHTNESS ONLY. Letting chroma decay down a ladder walks the deepest volumes into the neutral axis, where every course collides: that draft measured dE 14.0 against 20.4 for the lightness-only one. TEXT: --csoft is solved per cover as the lightest in-gamut tint of that course's hue reaching 4.6:1 on its own top gradient stop, and .cs now uses it. The old fixed #C9D1D9 subtitle failed 4.5:1 on 7 of 13 covers sampled, worst 2.29:1, a defect that predates this change. 20 hand-picked per-cover .cs colors and 5 layers of ::after spine and sheen patching were removed with it; every cover now gets the one shared .cover::after sheen instead of three different treatments. DO NOT reassign a course's hue without re-running the cross-course measurement over all 23 covers, not just the 8 on the home shelf. */ .cover.heli{background:linear-gradient(168deg,#397899 0%,#367697 55%,#337394 100%);--cacc:#ADD4EE;--csoft:#F3FAFF} .cover.heli2{background:linear-gradient(168deg,#306685 0%,#2D6483 55%,#2A617F 100%);--cacc:#9BBBD3;--csoft:#CAE1F3} .cover.heli3{background:linear-gradient(168deg,#265470 0%,#23526F 55%,#204F6B 100%);--cacc:#88A4BA;--csoft:#B2C6D6} .cover.heli4{background:linear-gradient(168deg,#1C435D 0%,#19415B 55%,#163E57 100%);--cacc:#788FA3;--csoft:#9EAEBE} .cover.heli5{background:linear-gradient(168deg,#123249 0%,#0F3148 55%,#0C2E44 100%);--cacc:#6B7E90;--csoft:#8D9AA8} .cover.heli6{background:linear-gradient(168deg,#082337 0%,#062135 55%,#031F32 100%);--cacc:#616F80;--csoft:#808B97} .series{display:grid;grid-template-columns:200px 1fr;gap:40px;padding-block:40px;border-top:1px solid var(--line);align-items:start} .series:first-of-type{border-top:0} @media (max-width:700px){.series{grid-template-columns:minmax(0,1fr);gap:22px}.series>.cover{width:160px}} .series h3{font-size:30px} .series .codes{font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.01em;color:var(--faint);text-transform:none} :is(.series,#seriesBody) .vols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:6px} @media (max-width:700px){:is(.series,#seriesBody) .vols{grid-template-columns:minmax(0,1fr)}} /* 5.90: a volume card is now a cover above its title, so the product is the first thing in the card rather than a line of text. The inner .volc-t keeps the old type treatment; the outer rule below is scoped with :not(.volc) so the generic .vols div styling does not also paint the cover wrapper. */ :is(.series,#seriesBody) .vols div:not(.volc):not(.volc-t):not(.cover){border:1px solid var(--line);background:var(--surface);padding:14px 16px;display:grid;gap:4px;font-size:14.5px} :is(.series,#seriesBody) .vols .volc{border:1px solid var(--line);background:var(--surface); padding:16px 16px 15px;display:grid;gap:13px;font-size:14.5px;align-content:start; background-image:var(--gloss);box-shadow:var(--sheen),var(--lift);border-radius:2px} :is(.series,#seriesBody) .vols .volc>.cover{width:100%;max-width:132px; box-shadow:0 10px 22px rgba(20,16,8,.26);border-radius:1px 3px 3px 1px} :is(.series,#seriesBody) .vols .volc-t{display:grid;gap:4px} /* 6.03b: :not(.cover *) on both. Verified from the browser's matched-rule list, not from reading CSS: .vols .cover span computed rgb(28,37,49) because ":is(.series,#seriesBody) .vols span" (0,2,1) beat ".cover .cz-code" (0,2,0) by a single element selector, flipping every cover's text from cream (#FFFDF7) to near-black on its own dark spine. The identical element in .ser-fan, which this rule does not reach, computed rgb(255,253,247) -- that difference is what proved it. Same shape as the --glaze bug directly above: a generic descendant rule reaching into a component. */ :is(.series,#seriesBody) .vols b:not(.cover *){font-weight:500} :is(.series,#seriesBody) .vols span:not(.cover *){font-size:13px;color:var(--muted)} /* ==== 5.79 THE ONE OFF-PALETTE CHIP, 27 October 2026 ==== "In preparation" was mixed from --slate #6E7C8C, a COOL blue-gray, and set on a warm cream page. It is the only element on these pages whose hue sits on the opposite side of neutral from everything around it, which is why it reads as a gray smudge while the rest of the page reads as warm. Rebuilt from the paper family so it belongs to the page: a deeper tint of the ground with a warm rim, which also gives it an edge it never had. Measured 8.9:1 on the chip. */ .pill.n{background:color-mix(in srgb,#8A7647 16%,transparent); color:var(--pill-n-text);box-shadow:inset 0 0 0 1px rgba(138,118,71,.30)} .pill.b{background:color-mix(in srgb,var(--brass) 22%,transparent);color:var(--accent-strong)} .grid-amt{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px} .grid-amt>*{grid-column:span 2}.grid-amt>*:nth-child(n+4){grid-column:span 3} .grid-amt>*:nth-child(n+4) .cover{width:44%} @media (max-width:900px){.grid-amt{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.grid-amt>*,.grid-amt>*:nth-child(n+4){grid-column:auto}.grid-amt>*:nth-child(n+4) .cover{width:62%}} @media (max-width:600px){.grid-amt{grid-template-columns:minmax(0,1fr)}} .amt-path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);background:var(--surface);counter-reset:s} .amt-path li{padding:22px 22px 22px 60px;border-right:1px solid var(--line);position:relative;display:grid;gap:4px;counter-increment:s} .amt-path li:last-child{border-right:0} .amt-path li::before{content:counter(s);position:absolute;left:20px;top:20px;width:28px;height:28px;border:1px solid var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font:500 12px var(--mono);color:var(--accent)} .amt-path b{font-family:var(--serif);font-size:20px;font-weight:500} .amt-path span{font-size:13.5px;color:var(--muted)} @media (max-width:900px){.amt-path{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.amt-path li:nth-child(2){border-right:0}.amt-path li:nth-child(-n+2){border-bottom:1px solid var(--line)}} @media (max-width:520px){.amt-path{grid-template-columns:minmax(0,1fr)}.amt-path li{border-right:0;border-bottom:1px solid var(--line)}.amt-path li:last-child{border-bottom:0}} .amt-set{display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;align-items:center} @media (max-width:700px){.amt-set{grid-template-columns:minmax(0,1fr)}.amt-set>.cover{width:200px}} .setlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 24px;color:#CFC8BD;font-size:15px} @media (max-width:560px){.setlist{grid-template-columns:minmax(0,1fr)}} .setlist li{display:flex;gap:10px}.setlist li::before{content:"";width:10px;height:1px;background:#93A3B3;margin-top:13px;flex:none} /* .lrt, not .pick: a .pick{display:grid} rule already exists for the three-questions picker and, being later in the file, silently won. Seventh time this file has produced that defect. */ .lrt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}.lrt{display:flex;gap:13px;align-items:flex-start;padding:14px;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--edge);border-radius:2px}.lrt:hover{border-top-color:var(--brass);box-shadow:0 6px 18px rgba(16,12,6,.14)}.lrt:has(.pt:only-child) .pt{padding-left:2px}.lrt .pc{flex:0 0 54px;width:54px;border-radius:1px 2px 2px 1px;overflow:hidden;box-shadow:0 4px 10px rgba(16,12,6,.26)}.lrt .pt{flex:1 1 auto;min-width:0}.lrt b{display:block;font-size:15px;font-weight:600;line-height:1.3;margin-bottom:3px}.lrt em{display:block;font-style:normal;font:600 11.5px/1.45 var(--label);letter-spacing:.045em;text-transform:uppercase;color:var(--label-text);margin-bottom:6px}@media (max-width:980px){.lrt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:560px){.lrt-grid{grid-template-columns:minmax(0,1fr)}}.car-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}.car-box{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--edge);border-radius:2px;padding:22px 24px}.car-box h3{margin:0 0 10px;font-size:19px;font-weight:600}.car-box p{margin:0 0 11px;font-size:15.5px;line-height:1.65}.car-box p:last-child{margin-bottom:0}.car-t{width:100%;border-collapse:collapse;margin:4px 0 12px;font-size:14.5px}.car-t td{padding:8px 10px 8px 0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}.car-t td:first-child{white-space:nowrap;padding-right:16px} /* 6.92 A NOWRAP CELL SETS A FLOOR THE GRID CANNOT SHRINK PAST, which is how .car-w pushed its track to 313px inside a 292px column at 320px. Same defect as the medical duration table. Below 480px the cell wraps. */ @media (max-width:480px){.car-t td:first-child{white-space:normal}.car-t,.car-t tbody,.car-t tr,.car-t td{display:block;width:auto}.car-t td{padding:2px 0}}.car-warn{background:rgba(168,78,23,.08);border-left:4px solid #A84E17;border-radius:3px;padding:12px 14px;font-size:14.5px!important}.car-wage{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}.car-w{background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:20px 22px}.car-wh{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}.car-wh h3{margin:0;font-size:18px;font-weight:600}.car-soc{font:600 12px var(--mono,ui-monospace,Menlo,monospace);color:var(--faint)}.car-bar{height:8px;border-radius:4px;margin:14px 0 8px;background:linear-gradient(90deg,#CFE0EB 0%,#3F80AC 50%,#0C4A6E 100%);position:relative}.car-nums{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);text-align:center;line-height:1.45}.car-nums span:first-child{text-align:left}.car-nums span:last-child{text-align:right}.car-nums b{font-size:17px;color:var(--text);font-weight:600}.car-nums .mid b{font-size:21px}.car-out{margin:14px 0 4px;font:600 13.5px var(--label);letter-spacing:.02em;color:var(--accent-strong)}.car-note{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}.car-disc{background:#FFFDF7;border:1px solid var(--rule-2);border-left:5px solid #14305C;border-radius:3px;padding:24px 26px;max-width:92ch;color:var(--ink)}.car-disc h3{margin:0 0 10px;font-size:19px;font-weight:600}.car-disc p{margin:0 0 11px;font-size:15px;line-height:1.65}.car-src{font-size:13px!important;color:var(--muted);padding-top:12px;border-top:1px solid var(--line);margin-bottom:0!important}@media (max-width:900px){.car-cols{grid-template-columns:minmax(0,1fr)}}.rs-lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,3vw,46px);align-items:center;background:#E3CE9C;border-left:6px solid #14305C;border-radius:2px;padding:clamp(26px,3.2vw,40px);margin:0 0 26px;color:var(--ink)}.rs-lead-k{font:600 12px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;color:#6B4F2B;margin:0 0 14px}.rs-lead-t{font-family:var(--serif);font-size:clamp(25px,2.9vw,36px);line-height:1.17;margin:0;color:#0C2249}/* 6.79f CONTENT WITHOUT CAPITALS NEEDS A SHORTER BAND. "next rung" is all lowercase with one descender, so a band sized for the font carried a whole cap height of dead space above the x-height while the g almost touched the bottom edge. Measured 29px above the ink against 7px below. Sized and positioned to this clause. Any future highlight that is all lowercase needs the same treatment, and the pixel check in hlpx.js is what catches it. */.rs-lead-t b{font-weight:400;color:#F4F1EA;--hl:#14305C}.rs-lead-p{margin:0 0 12px;font-size:16.5px;line-height:1.66;color:#2A2015}.rs-lead-p:last-child{margin-bottom:0}.rs-lead-tight{margin:26px 0 0}.rs-four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}.rs-f{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--edge);border-radius:2px;padding:20px 20px 22px}.rs-f-n{display:block;font:600 12px/1 var(--label);letter-spacing:.12em;color:#8A7A52;margin-bottom:10px}.rs-f h3{margin:0 0 8px;font-size:17px;font-weight:600;line-height:1.28}.rs-f p{margin:0;font-size:14.5px;line-height:1.58;color:var(--muted)}@media (max-width:1050px){.rs-four{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:620px){.rs-four{grid-template-columns:minmax(0,1fr)}}@media (max-width:820px){.rs-lead{grid-template-columns:minmax(0,1fr)}}.rs-why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}.rs-w{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brass);border-radius:2px;padding:22px 24px}.rs-w h3{margin:0 0 10px;font-size:19px;font-weight:600}.rs-w p{margin:0 0 11px;font-size:15.5px;line-height:1.68}.rs-w p:last-child{margin-bottom:0}@media (max-width:1050px){.rs-why{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:760px){.rs-why{grid-template-columns:minmax(0,1fr)}}.rs-mark{display:flex;align-items:center;justify-content:center;min-width:0}.rs-mark svg{width:100%;max-width:505px;height:auto;filter:drop-shadow(0 30px 54px rgba(16,12,6,.26))}@media (max-width:900px){.rs-mark{order:-1}.rs-mark svg{max-width:340px}}/* 6.68b Hero scoped to the resume view. .ser-hero is shared with four product pages and must not move. The image column gets real width HERE because the image is now carrying an argument rather than decorating a margin. */.rs-hero{grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);align-items:center;margin-bottom:8px}.rs-h1{font-size:clamp(34px,4.4vw,52px);font-weight:400;line-height:1.08;margin:0 0 14px}.rs-lede{max-width:48ch}.rs-cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 0}.rs-trust{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin:20px 0 0;font-size:14px;line-height:1.5;color:var(--muted);max-width:58ch}.rs-trust span:last-child{flex:1 1 280px;min-width:0}@media (max-width:900px){.rs-hero{grid-template-columns:minmax(0,1fr)}}.rs-pk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}.rs-card{position:relative;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--edge);border-radius:2px;padding:24px 22px;display:flex;flex-direction:column}.rs-card.best{border-top-color:var(--brass);box-shadow:0 10px 26px rgba(16,12,6,.13)}.rs-tag{position:absolute;top:-11px;left:22px;background:var(--brass);color:#1C2531;font:600 11px/1 var(--label);letter-spacing:.07em;text-transform:uppercase;padding:5px 9px;border-radius:2px}.rs-card h3{font-size:20px;margin:0 0 6px;font-weight:600}.rs-price{font-family:var(--serif);font-size:38px;margin:0;line-height:1.1}.rs-turn{margin:4px 0 14px;font-size:13.5px;color:var(--muted)}.rs-card ul{margin:0;padding-left:18px;display:grid;gap:7px;font-size:15px;line-height:1.5}.rs-note{margin:18px 0 0;font-size:14px;color:var(--muted);max-width:76ch}.rs-card ul{margin:0}.rs-fit{margin:0 0 14px;font-size:14.5px;line-height:1.55;color:var(--muted)}.rs-pick{margin-top:auto;width:100%;justify-content:center;text-align:center;padding-top:12px;padding-bottom:12px}.rs-card ul{margin-bottom:20px}/* 6.71b The recommended package is INVERTED, not merely outlined. Three cards of equal weight gave the eye no default, which is what the owner meant by nothing stepping out front. Every value below was measured against #0C2249, not chosen by eye. */.rs-card.best{background:#0C2249;border-color:#0C2249;border-top-color:var(--brass);color:#E6E1D5;transform:translateY(-12px);box-shadow:0 20px 44px rgba(12,34,73,.30)}.rs-card.best h3,.rs-card.best .rs-price{color:#F4F1EA}.rs-card.best .rs-turn,.rs-card.best .rs-fit{color:#CFC8BD}.rs-card.best ul{color:#E6E1D5}.rs-card.picked{outline:3px solid var(--brass);outline-offset:3px}.rs-picked-note{margin:16px 0 0;font-size:15px;font-weight:600;color:var(--accent-strong)}@media (max-width:900px){.rs-card.best{transform:none}}.rs-steps{display:grid;gap:16px}.rs-step{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:18px 20px}.rs-step>b{flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:#14305C;color:#fff;display:flex;align-items:center;justify-content:center;font:600 16px/1 var(--label)}.rs-step h3{margin:0 0 5px;font-size:17px;font-weight:600}.rs-step p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}.rs-policy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.rs-pol{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brass);border-radius:2px;padding:18px 20px}.rs-pol h3{margin:0 0 6px;font-size:17px;font-weight:600}.rs-pol p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}.rs-who{display:flex;gap:9px;margin:0 0 22px;flex-wrap:wrap}.rs-who button{padding:10px 18px;min-height:44px;border:1px solid var(--rule-2);background:var(--surface);color:var(--text);border-radius:3px;font-size:15px;cursor:pointer}.rs-who button[aria-pressed="true"]{background:#14305C;color:#fff;border-color:#14305C}.rs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}.rs-grid .field textarea{padding:11px 12px;font:inherit;border:1px solid var(--rule-2);border-radius:3px;background:var(--surface);color:var(--text);resize:vertical}.rs-grid .field select{padding:11px 12px;font:inherit;border:1px solid var(--rule-2);border-radius:3px;background:var(--surface);color:var(--text);width:100%;min-height:46px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%236B5A33' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px;padding-right:36px}.rs-grid .field select:focus{outline:2px solid var(--fring-out);outline-offset:2px;border-color:var(--accent)}.rs-grid .field optgroup{font-weight:600;color:var(--text)}.rs-grid .field option{font-weight:400}.rs-have{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(20px,2.6vw,36px);align-items:start;background:#E3CE9C;border-left:6px solid #14305C;border-radius:2px;padding:clamp(22px,2.6vw,30px);margin:0 0 26px;color:var(--ink)}.rs-have-h{font-family:var(--serif);font-size:clamp(21px,2.1vw,27px);line-height:1.2;margin:0 0 12px;color:#0C2249}.rs-have-p{margin:0 0 12px;font-size:16px;line-height:1.62;color:#2A2015}.rs-have-n{margin:0;font-size:15px;line-height:1.6;color:#4A3A22}.rs-have-col{display:grid;gap:16px;align-content:start}.rs-have-r{margin:0;font-size:14.5px;line-height:1.6;color:#2A2015;background:#FFFDF7;border-left:4px solid #7A1522;border-radius:2px;padding:13px 15px}.rs-have-f label{color:#3A2E18;font-weight:600}.rs-have-f select{padding:11px 12px;font:inherit;border:1px solid #8D7950;border-radius:3px;background:#FFFDF7;color:var(--ink);width:100%;min-height:46px}.rs-have-f .rs-hint{color:#5B4A2C}@media (max-width:820px){.rs-have{grid-template-columns:minmax(0,1fr)}}.rs-hint{font-size:12.5px;color:var(--faint);line-height:1.45}.home-arms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}/* 6.88b SUBGRID, BECAUSE A RESERVED HEIGHT IS A GUESS AND THE LINE COUNT MOVES. min-height reserves worked at the widths I sampled and failed at 19 of 78 when swept properly, in four bands including 1016-1160px. The card shares its row tracks with its neighbours instead, so eyebrow, headline, body, figures and action line up at EVERY width with no magic numbers to go stale. Items in a different visual row share nothing and need to share nothing. */ .home-arm{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:10px;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--edge);border-radius:2px;padding:24px 24px 26px;transition:box-shadow .15s,border-color .15s}.home-arm:hover{border-top-color:var(--brass);box-shadow:0 10px 26px rgba(16,12,6,.13)}.ha-k{margin:0;font:600 12px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--label-text)}.home-arm h3{margin:0;font-size:20px;font-weight:600;line-height:1.26}.home-arm p:not(.ha-k){margin:0;font-size:15px;line-height:1.62;color:var(--muted)}@supports not (grid-template-rows:subgrid){.home-arm{display:flex;flex-direction:column}.ha-go{margin-top:auto}} .ha-go{align-self:end;padding-top:14px;font-size:14.5px;font-weight:600;color:var(--accent-strong)}.home-arm:hover .ha-go{text-decoration:underline;text-underline-offset:3px}@media (max-width:1200px){.home-arms{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:660px){.home-arms{grid-template-columns:minmax(0,1fr)}}/* ==== 6.87 A TABLE OF NUMBERS THAT ARE MAGNITUDES SHOULD SHOW THE MAGNITUDE ==== 29 October 2026. Owner: "it brings a blur to the eye and the visitor skips over it without reading." DIAGNOSED BEFORE REDRAWING. The 61.23 duration table put four columns of identical typographic weight on bare paper: no fill, no boundary, a muted letterspaced caps header that reads as decoration rather than as labels, and the payload (6, 12, 12, 12, 24, 60 months) set in the same size and weight as the row labels. The data spans 10x and the table rendered that spread invisible. Two facts a reader cannot currently see at all: a third class certificate lasts five times a first class one at the same age, and second class is the only class where turning 40 changes nothing. FORM: magnitude plus identity, so bars against one shared axis, 0 to 60 months. The exact regulatory figure stays beside every bar and is never replaced by the bar, because this is reference content people check. COLOR: the two age bands are ORDINAL, not categorical, so one hue in two steps, never two hues. Direction is held constant across themes: "40 and over" is the more constrained band and carries the stronger step against its own ground, which is darker on paper and lighter on navy. Dark mode is selected from the ramp, not flipped. */ .md-dur{border:1px solid var(--rule);border-left:4px solid var(--brass);border-radius:3px;background:var(--surface);padding:22px 24px;margin:22px 0 14px;max-width:90ch} .md-key{margin:0 0 18px;font-size:13.5px;line-height:1.5;color:var(--muted)} .md-row{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:10px 30px;align-items:start;padding:0 0 20px;margin-bottom:20px;border-bottom:1px solid var(--line)} .md-row:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0} /* 6.87e THE ROW IDENTITY HAS TO LEAD. The class name sat at 23px regular in the same ink as the line beneath it, so the thing a reader scans for carried no more weight than its own caption. It leads now by size, by a brass marker that ties it to the house colour, and by pushing the qualifier into brass so the heading reads as two parts. It must not out-shout the bars, which carry the magnitude, so the lift is in size and position, never in a fill. */ .md-id h3{position:relative;margin:0 0 7px;padding-left:16px;font-family:var(--serif);font-size:27px;font-weight:400;line-height:1.12} .md-id h3::before{content:"";position:absolute;left:0;top:.17em;bottom:.19em;width:4px;border-radius:2px;background:var(--md-mark)} .md-id h3 span{display:inline;font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-strong);margin-left:9px;vertical-align:.18em} .md-id p{margin:0;padding-left:16px;font-size:14.5px;line-height:1.55;color:var(--muted)} /* 6.87b The note is a conclusion about the WHOLE row, so it spans both columns. Inside .md-id it ran the left column 64px past the right on two of three rows, which is the raggedness the owner keeps catching. */ .md-note{grid-column:1/-1;margin:2px 0 0!important;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px!important;line-height:1.5;color:var(--accent-strong)!important;font-weight:600} .md-bars{display:grid;gap:12px;padding-top:4px} .md-b{display:grid;grid-template-columns:86px minmax(0,1fr) 84px;gap:12px;align-items:center} .md-lab{font:600 11.5px/1.3 var(--label);letter-spacing:.055em;text-transform:uppercase;color:var(--muted)} .md-track{display:block;height:13px;border-radius:2px;background:var(--md-track);overflow:hidden} .md-fill{display:block;height:100%;border-radius:2px} .md-u{background:var(--md-u)} .md-o{background:var(--md-o)} .md-b b{font-size:15px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums} @media (max-width:820px){.md-row{grid-template-columns:minmax(0,1fr);gap:14px}} @media (max-width:460px){.md-dur{padding:18px 16px}.md-b{grid-template-columns:minmax(0,1fr) 78px;gap:6px 10px}.md-lab{grid-column:1}.md-track{grid-column:1}.md-b b{grid-column:2;grid-row:1/span 2;align-self:center}} /* ==== 6.87c THE SAME DEFECT, FOUR MORE TIMES ==== Share-of-test tables. The article's own prose says Regulations carries "about twenty-four times the weight" of Loading and Performance, and the table set both in the same size and weight, so the sentence had to do the work the figures should have done. One series here, not two, so one hue in one step. Bars scale to the largest row rather than to 100 percent: a 2 percent bar on a 0-100 axis is a hairline nobody can compare, and the key line states the scale so the reader is never guessing what full width means. */ .mag{border:1px solid var(--rule);border-left:4px solid var(--brass);border-radius:3px;background:var(--panel);padding:20px 22px;margin:22px 0;max-width:82ch;container-type:inline-size} .mag-key{margin:0 0 16px!important;font-size:13.5px!important;line-height:1.5;color:var(--muted)} /* 6.87d BARS MUST SHARE ONE AXIS. Each .mag-r is an independent grid, so an auto-sized value column made the track 3.6% wider on the rows whose figures were shorter. Every bar was being scaled against a different axis, which is a chart that lies. The value column is now fixed, so the track is identical in every row. Caught by comparing rendered widths against the ratios they were supposed to encode, not by looking at it. */ .mag-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr) 152px;gap:4px 18px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)} .mag-r:last-child{border-bottom:0;padding-bottom:0} .mag-n{font-size:15.5px;font-weight:600;min-width:0;line-height:1.35} .mag-t{display:block;height:13px;border-radius:2px;background:var(--md-track);overflow:hidden} .mag-f{display:block;height:100%;border-radius:2px;background:var(--md-o)} .mag-v{display:flex;gap:9px;align-items:baseline;justify-content:flex-end;white-space:nowrap} .mag-v b{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums} .mag-v em{font-style:normal;font-size:13px;color:var(--muted)} /* 6.87e A VIEWPORT QUERY CANNOT SEE A NARROW COMPONENT IN A WIDE WINDOW. This same component sits inside .car-box, a half-width column, where at 1360px the value column overflowed left and the bars ran underneath the figures. The component now responds to ITS OWN width. The value column stays a FIXED width in both modes, because each .mag-r is its own grid and a content-sized column would give every row a different axis. */ @container (max-width:560px){.mag-r{grid-template-columns:minmax(0,1fr) 140px;gap:7px 12px}.mag-n{grid-column:1}.mag-v{grid-column:2;grid-row:1}.mag-t{grid-column:1/-1}} @media (max-width:620px){.mag{padding:16px 16px}} /* ==== 6.88 FOUR TEXT ELEMENTS OF EQUAL WEIGHT IS NOT A HIERARCHY ==== 29 October 2026. Owner: "none of these boxes or the content in them is sticking out ... it is a blur and not getting the reader's attention." MEASURED FIRST, and the obvious suspect was innocent. The dead band under the copy was 35px at most, 11% of the card, stable from 1280 to 1920. Whitespace was not the defect. The defect was that eyebrow, headline, body and action all sat within a few points of each other in size and weight, so nothing led and the eye had no entry point, on a card whose whole job is routing. Five to six lines of 15px muted prose made it worse: that is reading density in a scanning context. The anchor is a pair of hard figures per card, which earns its place twice. It is the strongest typographic contrast available without shouting, and numbers are the most persuasive content we have. Every figure is counted from the site's own data, not recalled: 36 roles and 6 families are read off RSROLES, the glossary count stays live through data-gl-count. */ .ha-d{margin:0!important;font-size:15px;line-height:1.6;color:var(--muted)} .ha-stat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--rule)} .ha-stat>div{min-width:0} .ha-stat dt{font-family:var(--serif);font-size:31px;line-height:1;font-weight:400;color:var(--brass-text);font-variant-numeric:tabular-nums} .ha-stat dd{margin:7px 0 0;font-size:12.5px;line-height:1.35;color:var(--muted)} .home-arm .ha-go::after{content:" \2192";font-weight:600} .lineup-more{margin:22px auto 0;text-align:center;font-size:15.5px;color:var(--muted)} .lineup-more a{font-weight:600} /* 6.88d THREE CARDS THAT MEASURED 87 PERCENT IDENTICAL. Owner: "do they still look too much alike". Measured rather than judged: only 12-14% of pixels differed between any two cards, and the ink profile band by band was almost superimposable (6.7/6.8/6.8 at the top, 9.1/9.2/8.8 at the headline). I caused half of it. 6.88b put the cards on shared subgrid rows to fix a real misalignment, and shared rows force the ink into identical bands. Alignment and distinctiveness pull against each other and I had served only one. What separates them now is INFORMATION, not decoration: a mark the eye can catch before it reads, and the thing a visitor most wants to know, which is what it costs. The free card carries the loudest treatment on the page, which is not a trick: this section's whole argument is that most of what we publish is free and sells nothing, so the free one SHOULD be the one that shouts. */ .ha-k{display:flex;align-items:center;gap:9px} .ha-i{width:19px;height:19px;flex:0 0 19px;color:var(--brass-text)} /* 6.88f THE PRICE IS THE THING A VISITOR WANTS AND IT WAS A 11px OUTLINE. Owner: "we need show price and emphasize middle is free ... these are not standing out". A thin outlined chip is a label. A filled tag is a price. Every card now states its commercial state in a filled tag the eye reaches before the headline, and the free one carries the brass, because the whole argument of this section is that the free work is what earns the trust. */ .ha-p{margin-left:auto;font-style:normal;font-size:12.5px;font-weight:700;letter-spacing:.03em;padding:6px 11px;border-radius:3px;border:1px solid var(--navy);background:var(--navy);color:#F4F1EA;white-space:nowrap;text-transform:none} .ha-free .ha-p{background:var(--brass);border-color:var(--brass-deep);color:#14213D;letter-spacing:.05em;text-transform:uppercase;font-size:11.5px} /* the free card is the one the section argues for, so it keeps the brass edge */ .home-arm.ha-free{border-top-color:var(--brass);border-top-width:4px} .home-arm{box-shadow:0 2px 10px rgba(16,12,6,.05)} .home-arm:hover{box-shadow:0 12px 30px rgba(16,12,6,.16)} /* brass marks the lead card alone; cards 02 and 03 are the matched pair of supports and keep the house navy. The free state is carried by its pill. */ .home-arm.ha-lead .ha-p{background:var(--brass);border-color:var(--brass);color:#14213D;font-weight:700} .ha-free .ha-i{color:var(--brass)} @media (max-width:420px){.ha-k{flex-wrap:wrap}.ha-p{margin-left:0}} /* 6.88e THE HEADLINE ALREADY STATED THE HIERARCHY AND THE LAYOUT IGNORED IT. "Three things, and the other two are why anyone trusts the first." That is a subject and two supports, and it was drawn as three equals. Adding a mark and a price badge moved measured distinctness from 13.2% to 14.7%, which is nothing, because badges do not change block geometry. Inverting the subject does. The pattern is already proven on this site: the recommended resume package is an inverted navy card for the same reason. */ .home-arm.ha-lead{background:#0C2249;border-color:#0C2249;border-top-color:var(--brass);color:#E6E1D5;box-shadow:0 14px 34px rgba(12,34,73,.22)} .home-arm.ha-lead .ha-k{color:var(--brass)} .home-arm.ha-lead .ha-i{color:var(--brass)} .home-arm.ha-lead h3{color:#F8F5ED} .home-arm.ha-lead .ha-d{color:#CFC8BD} .home-arm.ha-lead .ha-stat{border-top-color:rgba(255,255,255,.24)} .home-arm.ha-lead .ha-stat dt{color:#EBD4A2} .home-arm.ha-lead .ha-stat dd{color:#C3BCB0} .home-arm.ha-lead .ha-go{color:#F0D496} .home-arm.ha-lead:hover{border-top-color:#F2D38E;box-shadow:0 18px 40px rgba(12,34,73,.30)} /* 6.91 THE HEADER OVERFLOWED BY 22px AT 320px ON ALL 133 ROUTES, and had done for as long as the header has existed. It was never caught because the old regression suite tested 390/430/768/1024 and 320 was not on the list. The publish gate tests 320 now, which is how this surfaced. Measured at 320: brand 154px + actions 142px against 284px of usable width. The three action buttons stay (search, cart and menu are all reachable), so the room comes from the gutter, the wordmark cap and the button size. */ @media (max-width:360px){ .wrap{padding-inline:14px} .brand-head{max-width:118px} .head-actions{gap:6px} .icon-btn{width:40px;height:40px} } /* 6.95 A QUARTER OF TWO OF THESE CARDS WAS EMPTY. Measured: cards 1 and 4 carried 46px of dead space against 23px in cards 2 and 3, because their copy runs one line shorter inside a stretched row. Owner: "too much white". The fill is the thing the card is actually about and the reader most wants to know: which file they receive. It is information, it pins to the bottom so all four align whatever the copy length does, and it gives the eye a second anchor besides the number. */ .rs-f{display:flex;flex-direction:column} .rs-f p{flex:0 0 auto} .rs-f-t{margin-top:auto;padding-top:14px;border-top:1px solid var(--line); font:600 11.5px/1.3 var(--label);letter-spacing:.07em;text-transform:uppercase;color:var(--accent-strong)} /* 6.95b The three cards above sized to content with align-items:start, so the shortest sat 22px high of its neighbours and the row bottoms stepped. */ /* 6.95d Subgrid, not stretch. Stretch equalised the outer heights but left the headings at different depths, so the body text started on three different lines. Shared row tracks align mark, heading and both paragraphs at every width, with no reserved height to go stale. */ .rs-why{align-items:stretch;grid-template-rows:auto auto auto 1fr} .rs-w{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0} @supports not (grid-template-rows:subgrid){.rs-w{display:block}} /* 6.95c Three text-only boxes gave the eye nothing to land on before reading. A mark is the cheapest non-text anchor and costs no vertical space worth counting. Shape carries the difference, never colour: these are peers. */ .rs-w-i{margin:0 0 12px} .rs-w-i svg{width:26px;height:26px;color:var(--brass-text);display:block} /* 6.97 FOUR TEXT-ONLY CARDS WITH AN EMPTY COVER SLOT read as sparse and alike: the owner flagged this same grid three times. The slot exists because these cards normally carry a book cover. Where there is no book, a mark fills it and gives the eye a non-text anchor. Shape carries the difference, not colour. */ .lrt-ico{flex:0 0 44px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--panel);border-radius:2px;color:var(--brass-text)} .lrt-ico svg{width:23px;height:23px} /* 6.97b The status pill floated at the end of a text stack, so a one-line subtitle put card 1's pill a line above its neighbours. The text column is now full height with the pill pinned to the bottom, so all four sit on one line whatever the copy does. */ .lrt{align-items:stretch} .lrt .pt{display:flex;flex-direction:column} .lrt .pt .pill{margin-top:auto;align-self:flex-start} /* 6.98 A PANEL THAT FIXES ITS BACKGROUND MUST FIX ITS TEXT. 6.65d said this about RULES on a fixed-light island; it is equally true of TEXT and nobody had applied it there. These panels hardcode a light background, so in dark mode they kept the light background and inherited the LIGHT text: .car-disc measured 1.25:1, light on light, completely unreadable. 50 text elements across the site were in this state and every one of them was dark mode only, which is why a light-mode review never saw any of it. --ink is declared once in :root and never redefined, so it is dark in both schemes and is the correct token for a permanently light surface. */ /* ==== 6.99 TWO CLASSES OF DARK-MODE ILLEGIBILITY, 29 October 2026 ==== Owner, on a screenshot of the readiness section: "human eye cannot read one word". He was in dark mode. A sweep of every text node against its composited background found 19 distinct failures, ALL of them dark mode only, which is why months of light-mode review never saw any of them. CLASS A - a panel that hardcodes a LIGHT background, whose CHILDREN use the scheme tokens. In dark mode the panel stayed light and --muted/--text went light with the scheme: #CFC8BD on #FFFDF7, measured 1.63:1. Setting color on the panel was not enough, because each child sets its own. The panel must REDEFINE the tokens for everything inside it, exactly as .pg already redefines --rule for a fixed-light island. CLASS B - the reverse. A card that correctly follows the scheme and goes dark, carrying text hardcoded to a dark hex: #6B5A33 on #0E2244, 2.36:1, 36 times. Those hexes become tokens that have a dark-mode step. */ .car-disc,.wxl,.rs-have,.rs-lead,.close-books,.med-prep-warn,.rdyb-p,.rdyb-rule, /* .rdy-tbl rows are NOT fixed-light: a dark-mode override makes their fill a translucent tint over the dark card, so their text must follow the scheme. */ .rdyb-warn,.pg .box,.cl-chart,.rr-window,.fv.fv-text .fv-body{ --text:var(--ink); --muted:var(--ink-2); --faint:var(--ink-3); --accent:#6B4F2B; --accent-strong:#573F21; --mark:#7A5F34; --rule:var(--line-on-light); --line:var(--rule); --rule-2:var(--rule2-on-light); color:var(--ink)} /* 7.04 THE LADDER HAS TO SHOW ITS OWN ARITHMETIC. The incentive to take the first application is that every later one is 99, but a reader will not do the multiplication in their head. The totals are computed from the live prices in RSPK, so they cannot drift out of step with the cards above them. No comparison to anyone else's price, because that would be a claim needing a source on the page. */ /* 7.07 A BLOCK NARROWER THAN THE GRID ABOVE IT READS AS LOPSIDED. The cards span the full wrap; the ladder was capped at 88ch, which at 1709px left it 843px against the cards 1132px and ran a ragged right edge down the whole section. The prose inside keeps its own measure instead. */ /* 7.19 THE TAILORING RULE IS NOT OURS TO ARGUE, SO WE STOPPED ARGUING IT. A search for peer-reviewed evidence on resume tailoring returned nothing but vendor blogs quoting sourceless percentages, which the standing rule discards. What exists instead is better: a federal agency printing our rule as its own DON'T. The panel paints a dark ground, so it redefines its subtree tokens. */ .rs-fed{margin:30px 0 0;background:var(--navy);background-image:var(--lacquer); color:#F2EEE4;border-left:4px solid var(--brass);border-radius:4px;padding:26px 30px; --text:#F2EEE4;--muted:#CFC8BD;--faint:#AEBDCE;--mark:var(--brass); --accent:var(--brass-soft);--accent-strong:var(--brass-soft); --line:var(--line-on-dark);--rule:var(--line-on-dark)} .rs-fed-k{font:600 12.5px var(--label);letter-spacing:.09em;text-transform:uppercase; color:var(--brass);margin:0 0 10px} .rs-fed h3{margin:0 0 12px;font-family:var(--serif);font-weight:400; font-size:clamp(21px,2.2vw,27px);line-height:1.22;color:#FFFFFF} .rs-fed p{margin:0 0 14px;color:#D8D3C7;font-size:16px;line-height:1.62} .rs-fed-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(22px,3vw,40px);align-items:start;margin-top:16px} .rs-fed-l{list-style:none;margin:0;padding:0;display:grid;gap:12px} .rs-fed-l li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:start; padding:13px 16px;border-radius:3px;background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14)} .fl-k{font:700 11.5px var(--label);letter-spacing:.08em;text-transform:uppercase; color:#9FE3C0;padding-top:3px} .fl-k.fl-no{color:#F2A98C} .fl-t{font-family:var(--serif);font-size:18.5px;line-height:1.35;color:#FFFFFF} .rs-fed-s{margin:0 0 12px!important;font-size:14.5px!important;line-height:1.62;color:#C9C3B6!important} .rs-fed-s:last-child{margin-bottom:0!important} .rs-fed-note{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16)} .rs-fed a{color:#F0D496;text-decoration:underline;text-underline-offset:3px} @media (max-width:900px){.rs-fed-g{grid-template-columns:minmax(0,1fr);gap:20px}} @media (max-width:560px){.rs-fed{padding:22px 20px} .rs-fed-l li{grid-template-columns:minmax(0,1fr);gap:4px}.fl-k{padding-top:0}} .rs-ladder{margin:26px 0 0;background:var(--panel);border:1px solid var(--rule);border-left:4px solid var(--brass);border-radius:3px;padding:22px 24px} #rsCapNote{max-width:none} .rs-ladder h3{margin:0 0 10px;font-size:19px;font-weight:600} .rs-ladder p{margin:0 0 16px;font-size:15.5px;line-height:1.66;color:var(--muted);max-width:74ch} .rl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 14px} .rl-r{display:grid;gap:3px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:2px} .rl-n{font:600 11.5px/1 var(--label);letter-spacing:.07em;text-transform:uppercase;color:var(--label-text)} .rl-n::after{content:" postings"} .rl-r:first-child .rl-n::after{content:" posting"} .rl-t{font-family:var(--serif);font-size:27px;line-height:1.1;color:var(--brass-text);font-variant-numeric:tabular-nums} .rl-e{font-size:13px;color:var(--muted)} .rl-foot{margin:0!important;font-size:14px!important} @media (max-width:820px){.rl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:420px){.rl-grid{grid-template-columns:minmax(0,1fr)}} /* 7.06 THE LONGEST PAGE ON THE SITE HAD NO VISUAL BREAK AND NO CLOSE. Measured: #resume ran 8,600px with 0% of its height carried by a dark or image band, and it ended on a policy section with nothing to click. 51 of 133 routes had no band at all; this is the worst of them by length and the one that sells a service. The close does two jobs: it punctuates the scroll and it restates the page's own argument at the moment of decision. */ .endband-g{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:clamp(26px,4vw,56px);align-items:start} .endband h2{font-size:clamp(26px,3.2vw,38px);font-weight:400;line-height:1.14;margin:10px 0 14px;color:#F6F2E8} .endband .lede{max-width:52ch} .endband-l{list-style:none;margin:0;padding:0;display:grid;gap:14px;align-content:start} .endband-l li{font-size:15px;line-height:1.6;color:#CFC8BD;padding-left:16px;border-left:3px solid var(--brass)} .endband-l b{color:#F4F1EA} @media (max-width:900px){.endband-g{grid-template-columns:minmax(0,1fr)}} .endband-l a{color:#F0D496;text-decoration:underline;text-underline-offset:3px} .endband .lede{max-width:58ch} .med-prep-warn{background:#FFFDF7;border-left:5px solid #7A1522;border-radius:3px;padding:16px 18px;margin:20px 0 26px;font-size:15.5px;line-height:1.62;max-width:88ch;color:var(--ink)}.mp-lead{margin:0 0 16px;color:var(--muted);max-width:76ch}.mp-18{display:grid;gap:0;border:1px solid var(--line);border-radius:2px;margin-bottom:10px}.mp-row{display:grid;grid-template-columns:52px minmax(0,1fr) 128px minmax(0,1fr);gap:10px 14px;align-items:start;padding:12px 14px;border-bottom:1px solid var(--line)}.mp-row:last-child{border-bottom:0}.mp-row:nth-child(odd){background:var(--surface)}.mp-k{font:600 13px var(--label);letter-spacing:.04em;color:#6B5A33;padding-top:3px}.mp-t{font-size:15px;line-height:1.5}.mp-note{display:block;margin-top:6px;font-size:13.5px;line-height:1.55;color:var(--muted)}.mp-a{display:flex;gap:14px;align-items:center;padding-top:2px}.mp-a label{display:inline-flex;gap:6px;align-items:center;font-size:14.5px;cursor:pointer;min-height:32px}.mp-x textarea{width:100%;font:inherit;font-size:14px;padding:7px 9px;border:1px solid var(--rule-2);border-radius:3px;background:var(--surface);color:var(--text);resize:vertical}@media (max-width:900px){.mp-row{grid-template-columns:52px minmax(0,1fr)}.mp-a{grid-column:2}.mp-x{grid-column:2}}@media print{.site-head,.foot,.pol-toc-d,.rs-actions,.mp-x textarea{display:none}.mp-row{break-inside:avoid}}.t-wrap{position:relative;max-width:100%}.t-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}.t-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.t-fade{position:absolute;top:0;right:0;bottom:0;width:34px;pointer-events:none;opacity:0;transition:opacity .15s;background:linear-gradient(to left,rgba(16,12,6,.30),transparent)}.t-wrap.has-more .t-fade{opacity:1}.t-hint{margin:8px 0 18px;font-size:13px;color:var(--muted);font-style:italic}@media (min-width:860px){.t-hint{display:none}}.rs-sub{font-family:var(--serif);font-weight:400;font-size:22px;margin:30px 0 14px}.rs-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.rs-out{margin-top:20px;background:var(--surface);border:1px solid var(--rule-2);border-left:4px solid #14305C;border-radius:3px;padding:18px 20px;font-size:13.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word;max-height:460px;overflow:auto}@media (max-width:900px){.rs-pk{grid-template-columns:minmax(0,1fr)}.rs-policy{grid-template-columns:minmax(0,1fr)}.rs-grid{grid-template-columns:minmax(0,1fr)}}.amt-fan{position:relative;height:380px} .amt-fan .cover{position:absolute;width:170px;box-shadow:0 26px 46px rgba(16,12,6,.34),0 4px 10px rgba(16,12,6,.22);border-radius:1px 3px 3px 1px} @media (max-width:900px){.amt-fan{height:300px;max-width:440px;width:100%;margin-inline:auto}.amt-fan .cover{width:130px}} .shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:start} @media (max-width:980px){.shelf{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:560px){.shelf{grid-template-columns:repeat(2,minmax(0,1fr))}} .shelf a{display:grid;gap:10px;text-decoration:none;color:var(--text);font-size:13px} .shelf a .cover{box-shadow:0 14px 28px rgba(0,0,0,.4);transition:transform .25s} .shelf a:hover .cover{transform:translateY(-4px)} .shelf small{font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.01em;text-transform:none;color:var(--faint)} .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px} /* shopDigital holds two cards, not three: a 3-track grid left an empty column. */ #shopDigital{grid-template-columns:repeat(2,minmax(0,1fr))} @media (max-width:900px){.grid-3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} /* #shopDigital is an ID, so it outranked .grid-3's narrow-width rules and stayed a two-track grid all the way down to 360px. Measured there: each card 148px wide, its cover 65.7px, and the series mark 11.8px. The marks were only ever validated for discriminability down to 24px. Re-measured this session at device scale 1 over all 28 cross-series pairs, against a control of the same mark displaced one device pixel: 48px worst pair 0.182 IoU against a 0.540 control, 24px 0.242 against 0.348, 22px 0.264 against 0.311, 16px 0.371 against 0.321 and 12px 0.556 against 0.260. At 16px and below the worst pair overlaps MORE than a one-pixel misregistration of a single mark, so the floor sits between 16 and 22px and 11.8px is well under it. Collapsing the grid is the fix: measured after, the mark goes to 31.5px, and two cards abreast at 360px was poor layout on its own account. */ @media (max-width:600px){.grid-3{grid-template-columns:minmax(0,1fr)}#shopDigital{grid-template-columns:minmax(0,1fr)}} .pcard{display:flex;flex-direction:column;gap:18px;background:var(--surface);border:1px solid var(--line);padding:26px;box-shadow:var(--shadow);transition:border-color .2s,transform .2s,box-shadow .2s} .pcard:hover{border-color:var(--rule-2);transform:translateY(-3px);box-shadow:0 2px 4px rgba(14,26,43,.08),0 18px 44px rgba(14,26,43,.18)} .pcard .cover{width:62%;margin-inline:auto;box-shadow:0 14px 30px rgba(14,26,43,.22)} .pcard .vol{font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:.01em;color:var(--accent);text-transform:none} .pcard h3{font-size:24px} .pcard p{color:var(--muted);font-size:15px} .pcard .meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--label);font-weight:600;font-size:12.5px;color:var(--faint);letter-spacing:.01em} .pcard .meta .mg{display:flex;flex-wrap:wrap;gap:6px 14px} .pcard .meta .mg-faa{color:var(--accent)} .pcard .meta .mg-faa>span{position:relative;padding-left:11px} .pcard .meta .mg-faa>span::before{content:"";position:absolute;left:0;top:.45em; width:5px;height:5px;border-radius:50%;background:var(--brass)} .pcard .meta .mg-avl{flex-basis:100%;margin-top:8px;padding-top:8px; border-top:1px solid var(--rule);color:var(--faint)} .pcard .foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid var(--line)} .price{font-family:var(--serif);font-size:26px;font-weight:500} .pcard .price{color:var(--accent)} .price small{font-family:var(--sans);font-size:12px;color:var(--faint);font-weight:400;margin-left:4px} .pcard .links{display:flex;gap:14px;font-size:14px;align-items:center;flex-wrap:wrap} .bundles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(11,auto);gap:0;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)} .bundle{display:grid;grid-row:span 11;grid-template-rows:subgrid;row-gap:0;border-right:1px solid var(--line);position:relative} .bundle:nth-child(4n){border-right:0} .bundle>*{padding-left:23px;padding-right:23px;margin:0} .bundle.feature{background:var(--navy);color:#E9E4D8} .bundle .eyebrow{padding-top:30px} .bundle.feature .eyebrow{color:var(--brass-soft)} /* ==== 5.99 PRICE AND PRODUCT NAME, 28 October 2026 ==== OWNER ASKED, and asked for research rather than an opinion: "should we make the price number larger and the name of the particular product, so products and prices stand out more?" THE EVIDENCE SAYS YES TO ONE HALF AND NO TO THE OTHER. PRIMARY SOURCE, read rather than summarized: Coulter & Coulter, "Size Does Matter: The Effects of Magnitude Representation Congruency on Price Perceptions and Purchase Likelihood", Journal of Consumer Psychology 2005. Quoted finding: "presenting the lower sale prices in relatively small font resulted in more favorable value assessments." The mechanism they propose is that numerals are encoded nonconsciously as magnitudes on a mental number line, so a physically LARGER price primes a LARGER magnitude and reads as more expensive. It held at low and high involvement, with one item and with several, and with a verbal size cue as well as a font size. STATED LIMITS, recorded honestly: university students, fictitious brands, and the experiments are about a sale price shown against a regular price, which is not quite our case. So this is evidence to weigh, not a law. MEASURED BEFORE: price 32px against a 24px product name, and 40px on the featured column. The price was already a third larger than the name, which is the arrangement the paper argues inflates perceived cost. DECISION: the NAME goes up, because making the thing being bought easier to scan has no magnitude-priming cost. The PRICE comes down to sit level with it, not below it, so nothing is hidden and the reader still finds it at once. Name and price now read as a pair rather than as a price with a label. */ .bundle h3{font-size:28px;font-weight:400;line-height:1.16;padding-top:6px;letter-spacing:-.004em} .bundle.feature h3{color:#F4F1EA} .bundle .dsc{font-size:13.5px;line-height:1.45;color:var(--faint);padding-top:7px} .bundle.feature .dsc{color:#B9C6D6} .bundle .pr{padding-top:17px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .bundle .pr .price{font-family:var(--serif);font-size:28px;font-weight:500;line-height:1;color:var(--accent)} .bundle.feature .pr .price{color:#F0D496;font-size:33px} .bundle .pr .from{font-size:13px;color:var(--faint)} .bundle.feature .pr .from{color:#CFC8BD} .bundle .ar{padding-top:8px;font-size:12.5px;line-height:1.5;min-height:2.9em} .bundle .ar span{display:block;color:var(--faint)} .bundle.feature .ar span{color:#CFC8BD} .bundle.feature .ar .sv{color:var(--brass-soft);font-weight:600} .bundle .inc-h{font:600 12.5px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding-top:19px;padding-bottom:9px;border-bottom:1px solid var(--line)} .bundle.feature .inc-h{color:#B1AAA0;border-bottom-color:#22406B} .bundle .r{display:grid;grid-template-columns:23px 1fr;column-gap:11px;align-items:start;padding-top:11px;padding-bottom:11px;border-bottom:1px solid rgba(211,203,182,.55);font-size:13.8px;line-height:1.38} .bundle.feature .r{border-bottom-color:rgba(34,64,107,.8)} .bundle.feature .r.yes i{background:var(--brass);color:#0C2249;border-color:var(--brass-soft)} .bundle.feature .r.no i{color:#B1AAA0;border-color:#4A6080} .bundle.feature .r.add i{background:var(--brass-soft);color:#0C2249;border-color:var(--brass-soft)} .bundle .r i{font-style:normal;font:700 13px/1 var(--sans);display:grid;place-items:center;width:23px;height:23px;border-radius:50%;margin-top:-1px;box-sizing:border-box} .bundle .r .tw{display:block} .bundle .r .tw+.tw{margin-top:5px} .bundle .r .tw b{font-weight:600;color:var(--ink)} .bundle.feature .r .tw b{color:#F4F1EA} .bundle .r.yes{color:var(--ink-2)}.bundle .r.yes i{background:var(--brass);color:#0C2249;border:1px solid var(--brass-deep);font-size:14px} .bundle .r.no{color:#63707F}.bundle .r.no i{background:transparent;color:#5A6675;border:1.5px solid #7B8795;font-size:14px} .bundle .r.add{color:var(--muted)}.bundle .r.add i{background:var(--navy);color:var(--brass-soft);border:1px solid var(--navy);font-size:15px} .bundle.feature .r.yes{color:#DDE5EE}.bundle.feature .r.yes i{color:#0C2249} .bundle.feature .r.no{color:#B1AAA0}.bundle.feature .r.no i{color:#8FA0B4} .bundle .addon{display:flex;width:fit-content;align-items:baseline;gap:5px;margin-top:6px;background:rgba(201,161,94,.17);border:1px solid rgba(138,108,64,.45);border-radius:2px;padding:4px 9px;font:600 12px/1.2 var(--sans);color:var(--accent-strong);cursor:pointer} .bundle .addon:hover,.bundle .addon:focus-visible{background:rgba(201,161,94,.32)} .bundle .addon b{font:600 12.5px/1.2 var(--sans)} .bundle .foot{padding-top:17px;padding-bottom:27px;align-self:end;display:grid;gap:10px} .bundles-key{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;margin-top:15px;font-size:13px;color:var(--faint)} .bundles-key span{display:inline-flex;align-items:center;gap:7px} .bundles-key i{font-style:normal;font:700 12px/1 var(--sans);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;box-sizing:border-box} .bundles-key .k-y i{background:var(--brass);color:#0C2249;border:1px solid var(--brass-deep);font-size:13px} .bundles-key .k-n i{background:transparent;color:#4E5967;border:1.5px solid #6E7C8C;font-size:13px} .bundles-key .k-a i{background:var(--navy);color:var(--brass-soft);border:1px solid var(--navy);font-size:14px} /* BUNDLE TABLE, DARK MODE. The three non-feature columns carried light-mode ink on the dark card: measured from computed styles on the live page, the included-row text read 1.47:1, the bold inside it 1.04:1, the not-included text 3.12:1 and the X chip 2.70:1 against the #0E2244 surface. The navy feature column was never affected, which is why the table still looked finished in dark mode. Fixed with tokens that already flip, so light mode is untouched: in light --muted resolves to --ink-2 and --text to --ink, the exact values these rules carried before. Dark now reads 8.71, 12.44, 5.36 and 5.90 to 1. Scoped with :not(.feature) so the navy column keeps its own treatment. */ :root[data-theme="dark"] .bundle:not(.feature) .r.yes{color:var(--muted)} :root[data-theme="dark"] .bundle:not(.feature) .r .tw b{color:var(--text)} :root[data-theme="dark"] .bundle:not(.feature) .r.no{color:var(--faint)} :root[data-theme="dark"] .bundle:not(.feature) .r.no i{color:#8FA0B4;border-color:#8FA0B4} :root[data-theme="dark"] .bundle:not(.feature) .r.add i{background:var(--navy-3);border-color:var(--navy-3)} :root[data-theme="dark"] .bundles-key .k-n i{color:#8FA0B4;border-color:#8FA0B4} :root[data-theme="dark"] .bundles-key .k-a i{background:var(--navy-3);border-color:var(--navy-3)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .bundle:not(.feature) .r.yes{color:var(--muted)} :root:not([data-theme="light"]) .bundle:not(.feature) .r .tw b{color:var(--text)} :root:not([data-theme="light"]) .bundle:not(.feature) .r.no{color:var(--faint)} :root:not([data-theme="light"]) .bundle:not(.feature) .r.no i{color:#8FA0B4;border-color:#8FA0B4} :root:not([data-theme="light"]) .bundle:not(.feature) .r.add i{background:var(--navy-3);border-color:var(--navy-3)} :root:not([data-theme="light"]) .bundles-key .k-n i{color:#8FA0B4;border-color:#8FA0B4} :root:not([data-theme="light"]) .bundles-key .k-a i{background:var(--navy-3);border-color:var(--navy-3)} } .tag{position:absolute;grid-row:1;top:-1px;right:20px;background:var(--brass);color:#0E1A2B;font:600 12.5px/1 var(--label);letter-spacing:.01em;padding:7px 10px;text-transform:none;z-index:2} /* 6.65e Navy islands: dark in both schemes, so their rules are light in both. */.picker{--mark:var(--brass);--rule:var(--line-on-dark);--line:var(--line-on-dark);--rule-2:var(--rule2-on-dark);margin-top:32px;background:var(--navy);border:1px solid var(--line);border-top:4px solid var(--brass);box-shadow:var(--shadow);padding:28px 30px 30px;color:#E7E2D9} .picker .pk-top{display:grid;grid-template-columns:minmax(250px,auto) minmax(0,1fr);gap:6px 46px;align-items:baseline;padding-bottom:24px} .picker h3{font:400 29px/1.18 var(--serif);color:#F4F1EA;margin:0} .picker .pk-lede{font:400 17.5px/1.5 var(--sans);color:#E7E2D9;margin:0;max-width:58ch} .picker .pk-lede b{display:block;font-weight:600;color:#F4F1EA} .picker .pk-lede i{display:block;margin-top:7px;font-style:normal;font-weight:500;color:#E6CF9E} /* ==== 4.58 THE PICKER IS A COMPARISON TOOL, SO ITS ROWS HAVE TO BE ROWS ==== 28 October 2026. The owner said the four options "all look same" and asked whether heavier dividers would help. Measured first, and the dividers turned out not to be the main fault. NN/g, Kate Moran, "The Lawn Mower Pattern", 13 December 2020: "On pages with distinct cells of content, people often scan those cells in a lawn mower pattern", "For each row, she bounced from one column to the next, and then down to the next row", and "When designing a comparison table, consider that your users are likely to process it in a lawn mower pattern." THAT SCAN NEEDS ROWS, AND WE DID NOT HAVE ANY. Measured at 1100px: the headline block was 73px in three columns and 49px in the fourth, so the section label landed on two different baselines and the PRICE landed on THREE. The reader cannot bounce across a row that is not level, which is exactly why the panel read as one undifferentiated horizontal mass. Subgrid gives all four columns the same five row tracks, so the headline, the label, the price and the button each sit on one line across the panel, and the bullet track absorbs the slack. Then, and only then, the separation. NN/g, Aurora Harley, "Law of Common Region", 12 July 2020: "items within a boundary are perceived as a group" and "Creating a clear boundary is a strong visual cue that can overpower other grouping principles". So a bounded card with real air between cards, not a heavier hairline. The same article's caution is why there is exactly one border and one fill per card and no further ornament: "too many borders and colored boxes that exist purely for decoration add clutter to the interface." */ .picker .pk-routes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:16px;row-gap:16px} .picker .pk-route{display:flex;flex-direction:column;padding:18px 18px 20px; background:rgba(255,255,255,.045);border:1px solid var(--rule-2)} @supports (grid-template-rows:subgrid){ @media (min-width:1100px){ .picker .pk-routes{grid-template-rows:auto auto auto 1fr auto;row-gap:0} .picker .pk-route{display:grid;grid-row:span 5;grid-template-rows:subgrid} .picker .pk-route>.pk-vols{grid-row:3/5} .picker .pk-route>.pk-more{grid-row:5} .picker .pk-route>.pk-more,.picker .pk-route>.pk-go{margin-top:0} } @media (min-width:700px) and (max-width:1099px){ .picker .pk-routes{grid-template-rows:repeat(2,auto auto auto 1fr auto)} .picker .pk-route{display:grid;grid-row:span 5;grid-template-rows:subgrid} .picker .pk-route>.pk-vols{grid-row:3/5} .picker .pk-route>.pk-more{grid-row:5} .picker .pk-route>.pk-more,.picker .pk-route>.pk-go{margin-top:0} } } .picker .pk-route>*{margin:0} .picker .pk-when{font:400 18px/1.35 var(--serif);color:#F4F1EA} .picker .pk-pick{font:600 12.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#B1AAA0;padding-top:14px} .picker .pk-amt{font:500 23px/1 var(--serif);color:#F0D496;padding-top:5px;font-variant-numeric:tabular-nums} .picker .pk-amt small{font:400 12.5px/1 var(--sans);color:#CFC8BD;margin-right:5px} .picker .pk-vols{list-style:none;margin:0;padding:12px 0 0;display:grid;gap:0} .picker .pk-vols li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)} .picker .pk-vols li:first-child{border-top:1px solid var(--line)} .picker .pk-vn{grid-row:1/3;align-self:center;font:400 15px/1.25 var(--serif);color:#F4F1EA} .picker .pk-vn small{display:block;font:400 12.5px/1.3 var(--sans);color:#CFC8BD;margin-top:2px} .picker .pk-vp{font:500 18px/1 var(--serif);color:#F0D496;font-variant-numeric:tabular-nums;justify-self:end} .picker .pk-vadd{grid-column:2;justify-self:end;font:600 12.5px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:#0C2249;background:#E6CF9E;border:0;border-radius:2px;padding:6px 10px;cursor:pointer} .picker .pk-vadd:hover{background:#F0DDB4} .picker .pk-inc{list-style:none;margin:0;padding:13px 0 0;display:grid;gap:9px} .picker .pk-inc li{display:grid;grid-template-columns:8px minmax(0,1fr);gap:10px;align-items:start;font:400 13.8px/1.42 var(--sans);color:#E7E2D9} .picker .pk-inc li:before{content:"";width:8px;height:8px;margin-top:5px;background:var(--mark);transform:rotate(45deg)} .picker .pk-inc b{font-weight:600;color:#EFF3F8} .picker .pk-more{padding-top:13px;margin-top:auto;font-size:13.5px} .picker .pk-more a{color:#E6CF9E} .picker .pk-go{padding-top:15px;margin-top:auto} .picker .pk-go .btn{width:100%;line-height:1.25} .picker .pk-go .btn-ghost{color:#EDE8DC;border-color:#4A6080} .picker .pk-go .btn-ghost:hover{background:rgba(230,207,158,.14)} .picker .shared{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.55;color:#CFC8BD;max-width:70ch} .picker .shared b{color:#F4F1EA;font-weight:600} .picker .shared a{color:var(--brass-soft)} @media (max-width:1099px) and (min-width:700px){.picker .pk-routes{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} @media (max-width:699px){.picker .pk-top{grid-template-columns:minmax(0,1fr);gap:9px 0;padding-bottom:20px} .picker .pk-lede{font-size:16.5px} .picker .pk-routes{display:grid;grid-template-columns:minmax(0,1fr);row-gap:14px}.picker .pk-route{display:flex;flex-direction:column;padding:16px 16px 18px}.picker .pk-go{align-self:auto}} @media (max-width:1099px) and (min-width:700px){ .bundles{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(22,auto)} .bundle:nth-child(2n){border-right:0} .bundle:nth-child(-n+2){border-bottom:1px solid var(--line)} } @media (max-width:699px){ .bundles{display:block;grid-template-rows:none} .bundle{display:flex;flex-direction:column;grid-row:auto;border-right:0;border-bottom:1px solid var(--line)} .bundle:last-child{border-bottom:0} .bundle .foot{align-self:auto} .bundle .ar{min-height:0} .bundle>*{padding-left:20px;padding-right:20px} .picker{padding:22px 20px} } .blueprint{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center} @media (max-width:900px){.blueprint{grid-template-columns:minmax(0,1fr);gap:36px}} .bp-rows{display:grid;gap:22px} .bp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:8px;align-items:end} .bp-row .lbl{font-size:16px;color:#F4F1EA;font-weight:500;display:grid;gap:2px} .bp-row .lbl small{font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.01em;color:#9AA7B6;font-weight:400} .bp-row .pct{font-family:var(--serif);font-size:30px;line-height:1;color:#F4F1EA;text-align:right} .bp-row .bar{grid-column:1/-1;height:14px;border-radius:0 7px 7px 0;background:rgba(244,241,234,.14);position:relative;overflow:hidden} .bp-row .bar i{position:absolute;inset:0 auto 0 0;border-radius:0 4px 4px 0;min-width:8px;background:#9D8150}.bp-row.top .bar{height:19px}.bp-row.top .bar i{background:linear-gradient(90deg,#C9A15E,#F2DCAC);box-shadow:0 0 22px rgba(227,196,142,.30)} .bp-row.top .pct{font-size:40px} .bp-row.top .lbl{font-size:18px} .bp-axis{position:relative;height:16px;font-family:var(--mono);font-size:11px;color:#B1AAA0;margin-top:-10px} .bp-axis span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap} .bp-axis span:first-child{transform:none} .bp-axis span:last-child{transform:translateX(-100%)} .bp-note{font-size:14px;color:#B1AAA0;margin-top:22px;font-family:var(--label);font-weight:600;letter-spacing:.01em} .features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .feat{background:var(--bg);padding:34px 30px;display:grid;gap:12px;align-content:start} .feat svg{width:34px;height:34px;color:var(--accent)} .feat h3{font-size:22px} .feat p{color:var(--muted);font-size:15.5px} @media (max-width:900px){.features{grid-template-columns:minmax(0,1fr)}} /* 6.85 A standalone pull quote has no section head, so nothing bounds it: the page rhythm (88+88) lands as a void rather than a pause. Hairlines above and below give the air something to attach to. The inline margin-top:56px this replaces made the gap above 232px against 176px below. */ /* 6.85b A RULE TURNS AN UNTRAPPED VOID INTO A TRAPPED ONE. 6.85 gave the quote edges, which was right, but left full section padding (88+88) under the new bottom rule. Space below a block merges into the next section gap; space below a RULE belongs to the rule, so 176px of paper read as a hole. The rules now do the separating, so the padding comes down to match. */ .sec-quote{padding-block:44px} /* 6.85c A FILLED BAND ENDS AT ITS EDGE, NOT AT ITS LAST LINE OF TEXT. Measured ink-to-ink the quote sat 187px from each neighbor, which read as balanced and was not: the navy band above terminates in a hard edge 42px from the top rule, while 133px of paper sits below the bottom rule. The selector states its own precondition, so the value cannot outlive the adjacency that justifies it. */ .band-navy + .sec-quote{padding-top:128px} @media (max-width:700px){.sec-quote{padding-block:30px}.band-navy + .sec-quote{padding-top:84px}} .author{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding-block:54px} .author .seal{width:224px;height:224px} .seal-foot{height:auto;display:block} .seal .seal-txt text,.seal-foot .seal-txt text{font-family:var(--sans);font-weight:600} .author blockquote{margin:0;font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);line-height:1.35;font-weight:300} .author cite{display:block;margin-top:22px;font-style:normal;font-size:14px;color:var(--muted)} .author cite b{color:var(--text);font-weight:500} @media (max-width:700px){.author{grid-template-columns:minmax(0,1fr);gap:26px;padding-block:36px}.author .seal{width:148px;height:148px}} .alist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px} @media (max-width:900px){.alist{grid-template-columns:minmax(0,1fr)}} .acard{display:grid;gap:12px;padding-top:22px;border-top:2px solid var(--text);text-decoration:none;color:var(--text)} .acard:hover h3{color:var(--accent)} .acard h3{font-size:23px;transition:color .2s} .acard p{color:var(--muted);font-size:15px} .acard .mono{font-size:12.5px;letter-spacing:.01em;color:var(--faint);text-transform:none} .article{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:72px;align-items:start} @media (max-width:980px){.article{grid-template-columns:minmax(0,1fr);gap:40px}} .prose{max-width:68ch} .prose h1{font-size:clamp(34px,4.6vw,52px);font-weight:400;margin:14px 0 18px} .prose h2{font-size:28px;margin:46px 0 14px} .prose h3{font-size:21px;margin:30px 0 10px} .prose p,.prose li{font-size:17.5px;line-height:1.72;color:var(--text)} .prose p+p{margin-top:16px} .prose ul,.prose ol{padding-left:22px;display:grid;gap:8px;margin:14px 0} .prose .byline{font-size:14px;color:var(--faint);display:flex;gap:14px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:28px} .callout{border-left:2px solid var(--brass);background:var(--surface);padding:18px 22px;margin:24px 0;font-size:16px} .callout b{font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.01em;text-transform:none;color:var(--accent);display:block;margin-bottom:6px;font-weight:500} .tbl-wrap{overflow-x:auto;margin:20px 0;border:1px solid var(--line)} table{border-collapse:collapse;width:100%;font-size:15px;background:var(--surface)} th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top} th{font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.01em;text-transform:none;color:var(--faint);font-weight:500;background:var(--paper-2)} tr:last-child td{border-bottom:0} .aside-box{position:sticky;top:110px;display:grid;gap:18px;background:var(--surface);border:1px solid var(--line);padding:24px} .aside-box .cover{width:120px} .toc-list{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:14px} .toc-list a{color:var(--muted);text-decoration:none} .reviewed{font-size:14px;color:var(--good);margin:-12px 0 24px} .toc-list a:hover{color:var(--accent)} .crumbs{font-size:13px;color:var(--faint);padding-block:22px} /* ==== 6.77 THE TOP LEFT OF A PAGE HEAD, 29 October 2026 ==== OWNER: "clean this up top left side and get our headline present cleaner and easier to make out and read quickly". WHAT WAS WRONG, and it was not the headline: a breadcrumb and an eyebrow sat stacked with almost nothing between them, both small, both left aligned, both roughly the same length. The eyebrow is 17px italic serif site wide while the breadcrumb is 13px sans, so the LESS important of the two was the louder, and the pair read as one muddled four-line preamble before the reader reached the headline at all. NOT FIXED BY RESTYLING .eyebrow: that override is global and governs 126 eyebrows. Changing it to fix one page head would have been the same mistake as 6.76, a local problem solved with a site-wide instrument. WHAT IS DONE INSTEAD: separate the two, and give the head a start marker in the page's OWN visual language. This page already marks its sections with a 96px brass rule above the heading (.med-h2::before). The page head now opens the same way, so the eyebrow is unmistakably the start of the article rather than the tail of the breadcrumb. */ .pghead>.crumbs{padding-bottom:30px} .pghead>.sec-head>.eyebrow{position:relative;padding-top:18px;margin-top:2px} .pghead>.sec-head>.eyebrow::before{content:"";position:absolute;top:0;left:0; width:84px;height:4px;border-radius:2px;background:var(--brass)} .pghead>.sec-head>h1{margin-top:10px} /* 6.77b Centered page heads need the marker centered with them. Caught by checking all five routes the rule touches rather than the one it was written for. */ .pghead>.sec-head.center>.eyebrow::before{left:50%;transform:translateX(-50%)} /* ==== 6.78 A THREE LINE HEADLINE AT ONE WEIGHT IS A GRAY MASS, 29 October 2026 ==== OWNER: "it all blurs together to the human eye". He is describing a typographic problem, not a layout one, and the measurement that matters is not contrast. The headline cleared 12.51:1 against its band and was still unreadable at a glance, because every one of its three lines was the same size, the same weight and the same color. Contrast against the BACKGROUND was never the issue; there was no contrast WITHIN the sentence. The sentence is an antithesis: the first half sets up, the second half is the point. Nothing told the eye which was which, so the reader had to read all three lines to find out, which is exactly what a headline exists to prevent. THE TURN IS NOW MARKED, using the device already proven on the resume page lead block rather than inventing a second one. nowrap keeps the marked clause whole: a highlight broken across a line break reads as damage. GENERALISED, not patched: .h-turn is available to any headline built as a two part statement, and the audit for others follows. */ /* 6.78b The chip clipped the descender of the line above it. A highlight set on display type needs the leading opened up, or the box eats the tail of the y. */ .h-split{text-wrap:balance;line-height:1.26} /* 6.78c nowrap was right for a SHORT clause and wrong as a default. "The paperwork is." is 400px and must stay whole; "They are the part nobody knows how to write." is 901px and forcing it onto one line pushes it straight out of a 555px column. box-decoration-break:clone already draws the chip correctly across a wrap, so wrapping is the safe default and .h-turn-1 is the opt in. */ .h-turn{font-weight:400;background:#14305C;color:#F4F1EA; padding:.03em .22em .1em;border-radius:3px; -webkit-box-decoration-break:clone;box-decoration-break:clone} .h-turn-1{white-space:nowrap} /* 6.78d A SOLID CHIP DOES NOT SCALE WITH CLAUSE LENGTH. Over one short line it is a punch; over three lines it becomes a navy wall with ragged fragment edges and it swamps the headline it was meant to clarify. Long clauses get the same job done with a brass rule under the text: still unmistakably the marked half of the sentence, a fraction of the weight. */ /* ==== 6.79 INLINE HIGHLIGHT HEIGHT, 29 October 2026 ==== OWNER: "the highlighted area is to high shorten the height so it is not so exagerated... do this for all the highlighted words". WHY padding was the wrong knob: an inline background fills the FONT'S CONTENT AREA, which for Spectral is about 1.3em, and padding only adds to that. No amount of reducing padding gets below the em box, so the chip stayed tall. THE BAND IS NOW DRAWN, not inherited. A linear-gradient with an explicit background-size gives exact control of the height, independent of the font metrics, and covers ascender to descender with nothing to spare. APPLIED TO ALL THREE DEVICES ON THE SITE, found by searching for the box-decoration-break they share rather than fixing the one that was reported: .h-turn, .rs-lead-t b and .rb-rule b. */ .h-turn,.rs-lead-t b,.rb-rule b{ padding:0 .2em;background-color:transparent; background-image:linear-gradient(var(--hl),var(--hl)); background-repeat:no-repeat;background-size:100% 1.26em;/* 6.79d 1.16em shrink-wrapped the ink on "85 percent or better": measured ZERO clearance top and bottom, one rounding from clipping the p. The band is a ruled area sized by the FONT, not by whichever string sits in it, so a clause with no capitals simply sits lower inside it. 1.26em gives every string room. */ /* 6.79c CENTERING THE BAND IN THE CONTENT BOX IS NOT CENTERING IT ON THE TEXT. At 50% the measured gap was 5.3px above the ink and 2.3px below, because a font sits low in its own em box: the content area carries more room above the cap than below the descender. The eye reads that as bottom heavy and I looked straight at it and called it balanced, which is why this is a measured offset and not a judged one. +.031em equalises the two gaps and scales with font-size, so it holds at 48px and at 27px. */ background-position:0 calc(50% + .031em); border-radius:2px; -webkit-box-decoration-break:clone;box-decoration-break:clone} .h-turn{--hl:#14305C} .rs-lead-t b{--hl:#14305C} .rb-rule b{--hl:#7A1522} .h-turn-soft{background-image:none;color:inherit;padding:0; box-shadow:inset 0 -.13em 0 0 var(--brass)}/* 6.79f CONTENT WITHOUT CAPITALS NEEDS A SHORTER BAND. "next rung" is all lowercase with one descender, so a band sized for the font carried a whole cap height of dead space above the x-height while the g nearly touched the bottom. Measured 29px above the ink against 7px below. PLACED HERE ON PURPOSE: the first attempt sat beside the other .rs-lead-t b rule, which is EARLIER in the sheet than the shared highlight rule, so it lost the cascade at equal specificity and changed nothing. Same-specificity overrides have to come after the rule they override. *//* 6.79g Measured from the DRAWN band to the INK, not from the element box: 2.25px above against 4.75px below. The band sat low by half the difference. Shifted up .05em. Verified by pixel, not by eye. */ .rs-lead-t b{background-size:100% 1.07em;background-position:0 calc(50% + .137em)} @media (max-width:560px){.h-turn-1{white-space:normal}} @media (max-width:600px){.pghead>.crumbs{padding-bottom:22px} .pghead>.sec-head>.eyebrow{padding-top:14px} .pghead>.sec-head>.eyebrow::before{width:64px;height:3px}} .crumbs a{color:var(--faint);text-decoration:none} .crumbs a:hover{color:var(--accent)} .pdp{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start;padding-bottom:72px} @media (max-width:900px){.pdp{grid-template-columns:minmax(0,1fr);gap:36px}} .pdp-media{position:sticky;top:110px;display:grid;gap:18px;justify-items:center;background:var(--paper-2);padding:56px 40px;border:1px solid var(--line)} @media (max-width:900px){.pdp-media{position:static;padding:36px 24px}} .pdp-media .cover{width:min(320px,80%);box-shadow:0 30px 50px rgba(14,26,43,.3)} .pdp h1{font-size:clamp(34px,4vw,48px);font-weight:400;margin:10px 0 12px} .pdp .sub{font-size:19px;color:var(--muted);font-family:var(--serif);font-style:italic;font-weight:300} .fmt{display:grid;gap:10px;margin:28px 0 20px} .fmt label{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:16px 18px;border:1px solid var(--line);background:var(--surface);cursor:pointer} .fmt label:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} .fmt input{accent-color:var(--brass-deep);width:18px;height:18px} .fmt .t{font-weight:500} .fmt .d{font-size:13.5px;color:var(--muted)} .fmt .p{font-family:var(--serif);font-size:20px} .qty{display:inline-flex;border:1px solid var(--line);background:var(--surface)} .qty button{width:40px;border:0;background:none;color:var(--text);font:400 18px var(--sans);cursor:pointer} .qty input{width:46px;border:0;text-align:center;background:none;color:var(--text);font:500 15px var(--sans)} .buy-row{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch} .buy-row .btn{flex:1} .assure{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:22px;font-size:13.5px;color:var(--muted)} .assure div{display:flex;gap:10px;align-items:flex-start} .assure svg{width:18px;height:18px;color:var(--accent);flex:none;margin-top:2px} .specs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--line);margin-top:34px} .specs div{padding:13px 16px;border-bottom:1px solid var(--line);display:grid;gap:2px} .specs div:nth-child(odd){border-right:1px solid var(--line)} .specs dt{font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.01em;text-transform:none;color:var(--faint)} .specs dd{margin:0;font-size:15px} .tabs{display:flex;gap:28px;border-bottom:1px solid var(--line);margin-top:48px;overflow-x:auto} .tabs button{background:none;border:0;padding:12px 0;font:500 15px var(--sans);color:var(--faint);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap} .tabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--brass)} .tabpanel{padding-top:26px} .toc{list-style:none;padding:0;margin:0;columns:2;column-gap:40px;font-size:15px} @media (max-width:600px){.toc{columns:1}} .toc li{break-inside:avoid;padding:7px 0;border-bottom:1px dotted var(--rule-2);display:flex;justify-content:space-between;gap:10px} .toc li span:last-child{font-family:var(--mono);font-size:12px;color:var(--faint)} .toc .part{font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.01em;color:var(--accent);text-transform:none;border-bottom:0;padding-top:16px} .sampler{background:#0A1320;color:#E9E4D8;padding-block:56px 72px} .sampler .eyebrow{color:var(--brass)} .sampler h1,.sampler h2{color:#F4F1EA} .sampler-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:28px} .sampler-top p{color:#B1AAA0;max-width:56ch} .sampler-pick{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.sp-grp{font:600 11px var(--label);letter-spacing:.09em;text-transform:uppercase;color:var(--brass-soft);padding:0 10px 0 0;margin-left:6px;border-left:1px solid #2E4C78;padding-left:12px}.sp-grp:first-child{border-left:0;margin-left:0;padding-left:0} .sampler-pick button{background:transparent;border:1px solid #2E4C78;color:#CFC8BD;padding:9px 14px;font:500 13px var(--sans);cursor:pointer;border-radius:2px} .sampler-pick button[aria-pressed="true"]{border-color:var(--brass);color:#F4F1EA;background:#16263B} .stage{perspective:2600px;display:flex;justify-content:center;padding-block:10px 20px;overflow:hidden} .book{position:relative;width:min(980px,100%);aspect-ratio:17/11;transition:transform .7s cubic-bezier(.4,.1,.2,1)} .book.closed-front{transform:translateX(-25%)} .book.closed-back{transform:translateX(25%)} .leaf{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.45,.05,.25,1)} .leaf.flipped{transform:rotateY(-180deg)} .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden} .face.back{transform:rotateY(180deg)} /* 6.65d Paper islands: a reproduced book page is light in both schemes, so its rules are dark in both schemes. */.pg{--rule:var(--line-on-light);--line:var(--line-on-light);--rule-2:var(--rule2-on-light);background:#FBF9F3;color:#1B2430;height:100%;padding:6.2% 7%;display:flex;flex-direction:column;container-type:inline-size;font-family:var(--sans)} .face.front .pg{box-shadow:inset 14px 0 22px -14px rgba(0,0,0,.28)} .face.back .pg{box-shadow:inset -14px 0 22px -14px rgba(0,0,0,.28)} .pg .run{display:flex;justify-content:space-between;font-family:var(--label);font-weight:600;font-size:2.27cqw;letter-spacing:.01em;color:#7A8491;text-transform:none;padding-bottom:2.2cqw;border-bottom:1px solid var(--line);margin-bottom:4cqw} .pg .folio{margin-top:auto;padding-top:2.5cqw;font-family:var(--mono);font-size:2.2cqw;color:#7A8491;display:flex;justify-content:space-between} .pg h2{font-family:var(--serif);font-weight:400;font-size:6.6cqw;line-height:1.05;color:#0E1A2B} .pg h3{font-family:var(--serif);font-weight:500;font-size:3.9cqw;color:#0E1A2B;margin:3.4cqw 0 1.4cqw} .pg p{font-family:var(--serif);font-size:2.95cqw;line-height:1.5;color:#232C38} .pg p+p{margin-top:1.6cqw} .pg .k{font-family:var(--label);font-weight:600;font-size:2.27cqw;letter-spacing:.01em;color:#8A6C40;text-transform:none} .pg table{font-size:2.45cqw;background:transparent} .pg th,.pg td{padding:1.1cqw 1.4cqw;border-bottom:1px solid var(--line);color:#232C38} .pg th{background:#EFEADF;font-size:1.9cqw;color:#5B6572} .pg .fig{border:1px solid var(--line);background:var(--panel);padding:2cqw;margin-top:2.4cqw} .pg .cap{font-family:var(--sans);font-size:2.1cqw;color:#5B6572;margin-top:1.4cqw} .pg .box{border-left:2px solid #C9A15E;background:#E9E0CA;padding:2cqw 2.6cqw;margin-top:2.6cqw;color:var(--ink)} .pg .box p{font-family:var(--sans);font-size:2.55cqw} .pg .opt{display:flex;gap:2cqw;padding:1.5cqw 0;border-bottom:1px solid var(--line);font-family:var(--sans);font-size:2.6cqw;line-height:1.45;color:#232C38} .pg .opt b{font-family:var(--mono);flex:none;width:3.4cqw} .pg .opt.ok b{color:#2F6B4F} .pg .why{font-size:2.35cqw;color:#4A5563;margin-top:.6cqw;display:block} .pg.cv{padding:0} .pg.cv .cover{height:100%;aspect-ratio:auto;width:100%} .pg.dark{background:#0E1A2B;color:#E9E4D8} .pg.dark p{color:#CFC8BD} .pg.dark h2{color:#F4F1EA} .flip-controls{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:10px} .flip-controls button{width:46px;height:46px;border-radius:50%;border:1px solid #2E4C78;background:#122033;color:#E9E4D8;cursor:pointer;display:inline-flex;align-items:center;justify-content:center} .flip-controls button:hover:not(:disabled){border-color:var(--brass)} .flip-controls button:disabled{opacity:.35;cursor:default} .flip-controls .count{font-family:var(--label);font-weight:600;font-size:13.5px;letter-spacing:.01em;color:#B1AAA0;min-width:150px;text-align:center} .flip-hint{text-align:center;color:#B1AAA0;font-size:13px;margin-top:10px} .single{display:none} @media (max-width:760px){ .stage{display:none}.single{display:block;max-width:420px;margin-inline:auto} .single .sp{aspect-ratio:8.5/11;box-shadow:0 20px 40px rgba(0,0,0,.4);transition:opacity .25s,transform .25s} .single .sp.out{opacity:0;transform:translateX(-12px)} } .scrim{position:fixed;inset:0;background:rgba(8,14,24,.5);z-index:80;opacity:0;pointer-events:none;transition:opacity .25s} .scrim.on{opacity:1;pointer-events:auto} .drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--bg);z-index:90;transform:translateX(100%);transition:transform .32s cubic-bezier(.3,.1,.2,1);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);border-left:1px solid var(--line)} .drawer.on{transform:none} .drawer-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)} .drawer-head h2{font-size:24px} .drawer-body{flex:1;overflow-y:auto;padding:8px 24px} .drawer-foot{border-top:1px solid var(--line);padding:20px 24px;display:grid;gap:12px;background:var(--surface)} .line{display:grid;grid-template-columns:62px 1fr auto;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);align-items:start} .line .cover{width:62px;padding:8%} .line .cover .ct{font-size:13cqw} .line h4{font-size:17px;font-weight:500} .line .f{font-size:13px;color:var(--muted)} .line .ctl{display:flex;gap:12px;align-items:center;margin-top:10px} .line .qty button{width:30px;height:30px} .line .qty input{width:34px;font-size:14px} .linkish{background:none;border:0;color:var(--faint);font:13px var(--sans);text-decoration:underline;cursor:pointer;padding:0} .linkish:hover{color:var(--bad)} .tot{display:flex;justify-content:space-between;font-size:15px} .tot.big{font-family:var(--serif);font-size:22px} .empty{padding:60px 10px;text-align:center;color:var(--muted);display:grid;gap:16px;justify-items:center} .upsell{margin:14px 0;padding:14px 16px;background:var(--surface);border:1px dashed var(--rule-2);font-size:14px;display:flex;justify-content:space-between;gap:12px;align-items:center} .co{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:start;padding-block:40px 80px} @media (max-width:900px){.co{grid-template-columns:minmax(0,1fr);gap:32px}} .steps{display:flex;gap:0;border:1px solid var(--line);margin-bottom:34px;background:var(--surface)} .steps div{flex:1;padding:12px 14px;font-size:13px;color:var(--faint);border-right:1px solid var(--line);display:flex;gap:10px;align-items:center} .steps div:last-child{border-right:0} .steps i{font-style:normal;font-family:var(--mono);width:22px;height:22px;border:1px solid var(--rule-2);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex:none} .steps .on{color:var(--text);font-weight:500} .steps .on i{background:var(--navy);color:#fff;border-color:var(--navy)} .steps .done i{background:var(--brass);border-color:var(--brass);color:#0E1A2B} @media (max-width:560px){.steps span{display:none}} fieldset{border:0;padding:0;margin:0 0 28px;display:grid;gap:16px} legend{font-family:var(--serif);font-size:24px;margin-bottom:6px;padding:0} .fr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px} .fr3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px} @media (max-width:560px){.fr,.fr3{grid-template-columns:minmax(0,1fr)}} .field{display:grid;gap:6px} .field label{font-size:13px;font-weight:500;color:var(--muted)} .field input,.field select,.field textarea{font:15px var(--sans);padding:12px 13px;border:1px solid var(--rule-2);background:var(--surface);color:var(--text);border-radius:2px;width:100%} .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--fring-out);outline-offset:2px;border-color:var(--accent);box-shadow:var(--fring-in)} .field.err input,.field.err select{border-color:var(--bad)} .field .msg{font-size:12.5px;color:var(--bad);display:none} .field.err .msg{display:block} .ship-opt{display:grid;gap:10px} .ship-opt label{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);background:var(--surface);cursor:pointer} .ship-opt label:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} .ship-opt input{accent-color:var(--brass-deep)} .pay-box{border:1px solid var(--line);background:var(--surface);padding:22px;display:grid;gap:14px} .pay-row{display:flex;gap:10px;flex-wrap:wrap} .pay-row span{border:1px solid var(--line);padding:6px 10px;font:600 13px var(--label);letter-spacing:.01em;color:var(--muted);background:var(--bg)} .co-note{font-size:13px;color:var(--warn);display:flex;gap:8px;align-items:flex-start} .summary{background:var(--surface);border:1px solid var(--line);padding:26px;position:sticky;top:110px;display:grid;gap:14px} .summary h3{font-size:22px} .sline{display:flex;justify-content:space-between;gap:12px;font-size:14.5px} .sline span:first-child{color:var(--muted)} .co-actions{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap} .confirm-head{display:grid;gap:14px;padding-block:56px 30px;max-width:760px} .confirm-head h1{font-size:clamp(34px,4.4vw,50px);font-weight:400} .pipe{list-style:none;margin:0;padding:0;display:grid;gap:0;border:1px solid var(--line);background:var(--surface)} .pipe li{display:grid;grid-template-columns:40px 1fr auto;gap:16px;padding:18px 22px;border-bottom:1px solid var(--line);align-items:start} .pipe li:last-child{border-bottom:0} .pipe .dot{width:26px;height:26px;border-radius:50%;border:1px solid var(--rule-2);display:inline-flex;align-items:center;justify-content:center;margin-top:2px} .pipe .dot svg{width:14px;height:14px;opacity:0} .pipe li.done .dot{background:var(--good);border-color:var(--good);color:#fff} .pipe li.done .dot svg{opacity:1} .pipe li.active .dot{border-color:var(--brass);box-shadow:0 0 0 4px color-mix(in srgb,var(--brass) 25%,transparent);animation:pulse 1.2s infinite} @keyframes pulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--brass) 8%,transparent)}} .pipe b{font-weight:500} .pipe p{font-size:14px;color:var(--muted);margin-top:3px} .pipe .when{font-family:var(--mono);font-size:12px;color:var(--faint);white-space:nowrap} .pill{display:inline-block;font:600 12px/1 var(--label);letter-spacing:.01em;padding:5px 8px;border-radius:20px;text-transform:none} .pill.g{background:var(--brass);color:#0C2249} .pill.w{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)} .arch{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:stretch} @media (max-width:980px){.arch{grid-template-columns:minmax(0,1fr)}} .node{border:1px solid var(--line);background:var(--surface);padding:18px;display:grid;gap:8px;align-content:start;position:relative} .node .k{font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.01em;color:var(--accent);text-transform:none} .node h4{font-size:19px} .node p{font-size:13.5px;color:var(--muted)} .node.hl{border-color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass)} .faq{max-width:860px} .faq details{border-bottom:1px solid var(--line)} .faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-family:var(--serif);font-size:21px;position:relative} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";position:absolute;right:6px;top:30px;width:10px;height:10px;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(45deg);transition:transform .2s} .faq details[open] summary::after{transform:rotate(-135deg);top:34px} .faq .ans{padding:0 0 24px;color:var(--muted);font-size:16.5px;max-width:70ch;display:grid;gap:12px} .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start} .vet-ask{display:grid;gap:22px;align-content:start} .vet-ask>.formcard{position:sticky;top:110px} @media (max-width:900px){.split{grid-template-columns:minmax(0,1fr);gap:36px}} .plain-list{list-style:none;padding:0;margin:0;display:grid;gap:0;border-top:1px solid var(--line)} .plain-list li{padding:18px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:44px 1fr;gap:12px} .plain-list .n{font-family:var(--serif);font-size:26px;color:var(--accent);line-height:1} .plain-list b{display:block;font-weight:500;margin-bottom:3px} .plain-list p{color:var(--muted);font-size:15px} .formcard{background:var(--surface);border:1px solid var(--line);padding:30px;display:grid;gap:16px} .ok-msg{border:1px solid var(--good);color:var(--good);padding:14px 16px;font-size:14.5px;background:color-mix(in srgb,var(--good) 8%,transparent)} /* .ok-msg is green because it reports success. A form that could not send anything is not a success, so .unsent restates it in the warning color. Measured with the WCAG 2.x relative-luminance formula, text against the .formcard ground var(--surface): light --warn #7F560F on #FFFDF7 reads 6.37, and on the other two cream grounds #F7F3E8 and #E4DCC7 it reads 5.85 and 4.74; dark --warn #D9A64E on #0E2244 reads 7.15, on #07142B 8.32 and on #11284D 6.63. All six clear the 4.5:1 that WCAG 2.2 SC 1.4.3 asks for normal text, and the 1px border clears the 3:1 SC 1.4.11 asks for a component boundary. The brass button keeps its own #0E1A2B label, measured at 7.28 on #C9A15E. The state is also named in the text itself, so it is not carried by color alone. */ .ok-msg.unsent{border-color:var(--warn);color:var(--warn);background:color-mix(in srgb,var(--warn) 9%,transparent)} .ok-msg.unsent a:not(.btn){color:var(--warn);font-weight:500} .ok-msg.unsent .btn-brass{color:#0E1A2B} .site-foot{border-top:3px solid var(--brass);background:var(--navy);color:#CFC8BD;padding-block:64px 36px;font-size:14px} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px} @media (max-width:900px){.foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} @media (max-width:520px){.foot-grid{grid-template-columns:minmax(0,1fr)}} .site-foot .foot-h{font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.01em;color:var(--brass);text-transform:none;margin:0 0 14px;font-weight:500} .site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} .site-foot a{color:#E7E2D9;text-decoration:none} .site-foot a:hover{color:var(--brass-soft)} .site-foot .brand{color:#F4F1EA} /* ==== 5.95 THE FOOTER SEAL GAP, 28 October 2026 ==== OWNER: "At the bottom of page there appears to be too much of a gap, empty space between seal on far right and the words on far left side." MEASURED at 1440: the disclaimer paragraph ends at x=593 and the seal begins at x=1044, so 451px of nothing sits between them. .legal-top was a flex row with justify-content:space-between holding exactly two items, which pushes a short paragraph and a small seal to opposite ends of a 1132px band. That is what space-between is FOR, and it is the wrong tool with two items of unequal weight: it converts the leftover width into one large hole rather than into a margin at the edge. FIX: the whole legal block becomes a two-column lockup -- the disclaimer AND the copyright line together in the left track, the seal in a track of its own on the right, vertically centered against both. The leftover width is now a single deliberate gutter beside the seal rather than a gap inside a row, and the seal reads as the mark closing the footer instead of a stray object. */ .site-foot .legal{margin-top:48px;padding-top:24px;border-top:1px solid #2A4774; display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr) auto; column-gap:clamp(28px,3.4vw,56px);row-gap:10px;align-items:start; font-size:12.5px;color:#B1AAA0} .site-foot .legal>.legal-top{grid-column:1;grid-row:1} .site-foot .legal>.legal-links{grid-column:2;grid-row:1;align-self:start; display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 18px} .site-foot .legal .seal-foot{grid-column:3;grid-row:1;align-self:center} /* 5.95b: capping the disclaimer at a readable measure left its track half used, so the hole moved rather than closed. The leftover width needed CONTENT, not more measure: the copyright and policy links move up beside the disclaimer as a second column, set two-up, and the seal closes the row. Three pieces of real content across the band, and the only remaining space is the gutter either side of the seal. Measured after: disclaimer track 560, links track 347, seal 88, gutters 56 -- no gap wider than a gutter anywhere in the row. */ @media (max-width:900px){ .site-foot .legal{grid-template-columns:minmax(0,1fr) auto} .site-foot .legal>.legal-links{grid-column:1;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr))} .site-foot .legal .seal-foot{grid-column:2;grid-row:1/span 2;align-self:center}} @media (max-width:620px){ .site-foot .legal{grid-template-columns:minmax(0,1fr)} .site-foot .legal>.legal-links{grid-template-columns:minmax(0,1fr)} .site-foot .legal .seal-foot{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px}} .news{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap} .news input{flex:1;min-width:180px;padding:11px 12px;background:#16263B;border:1px solid #2E4C78;color:#F4F1EA;font:14px var(--sans);border-radius:2px} .news input::placeholder{color:#7C8894} .toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--navy);color:#F4F1EA;padding:13px 20px;font-size:14px;z-index:100;opacity:0;transition:.25s;pointer-events:none;border-left:3px solid var(--brass);max-width:calc(100% - 32px)} .toast.on{opacity:1;transform:translate(-50%,0)} .view{animation:fade .35s ease} .hero-books{overflow:visible} @media (max-width:420px){.hero-books{height:300px}.hero-books .c1{width:160px;left:22%}.hero-books .c2{width:130px;left:52%}.hero-books .c3{width:118px}.hero h1{font-size:36px}.prose h1{font-size:30px}.sec-head h2{font-size:28px}.pcard{padding:20px}.bundle{padding:28px 20px}.formcard{padding:22px}.eyebrow{letter-spacing:.12em}} html,body{overflow-x:clip} .about-panel{background:var(--paper-2);border:1px solid var(--line);padding:34px 30px;display:grid;gap:24px;align-content:start} .cred{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:15px;color:var(--muted)} .cred li{display:flex;gap:10px}.cred li::before{content:"";width:10px;height:1px;background:var(--mark);margin-top:13px;flex:none} .glance{margin:0;display:grid;gap:0;border-top:1px solid var(--line)} .glance div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px} .glance dt{color:var(--muted)}.glance dd{margin:0;font-weight:500;text-align:right} .article>aside{align-self:stretch} :is(.series,#seriesBody) .vols.five{grid-template-columns:repeat(6,minmax(0,1fr))}:is(.series,#seriesBody) .vols.five>div{grid-column:span 2}:is(.series,#seriesBody) .vols.five>div:nth-child(n+4){grid-column:span 3} @media (max-width:700px){:is(.series,#seriesBody) .vols.five{grid-template-columns:minmax(0,1fr)}:is(.series,#seriesBody) .vols.five>div,:is(.series,#seriesBody) .vols.five>div:nth-child(n+4){grid-column:auto}} @media (min-width:901px){.split>.formcard,.split>.about-panel{position:sticky;top:110px}} @media (max-width:900px){.blueprint,.split,.pdp,.co,.hero .wrap{grid-template-columns:minmax(0,1fr)}} @media (max-width:420px){.btn{white-space:normal;text-align:center}} @keyframes fade{from{opacity:.4}to{opacity:1}} @media (max-width:600px){.res-filter .mono{display:none}} .nav{gap:22px} .res-hero{background:var(--navy);color:#EDE8DC;padding-block:8px 44px;--mark:var(--brass)} .res-hero h1{font-size:clamp(36px,4.8vw,58px);font-weight:400;color:#F4F1EA;margin:12px 0 14px} .res-hero .lede{color:#CFC8BD} .res-stats{display:flex;gap:34px;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid #2A4774} .res-stats div{display:grid;gap:2px}.res-stats b{font-family:var(--serif);font-weight:400;font-size:30px;color:#F4F1EA} .res-stats span{font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.01em;text-transform:none;color:#B1AAA0} .res-filter{position:sticky;top:calc(74px + env(safe-area-inset-top,0px));z-index:30;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} .res-filter .wrap{display:flex;gap:16px;align-items:center;padding-block:12px;overflow-x:auto} .res-filter .mono{font-size:12px;letter-spacing:.01em;text-transform:none;color:var(--faint);white-space:nowrap} .chips{display:flex;gap:6px;flex-wrap:nowrap} .chips button{border:1px solid var(--rule-2);background:var(--surface);color:var(--muted);padding:7px 12px;font:500 13px var(--sans);border-radius:20px;cursor:pointer;white-space:nowrap} .chips button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#F4F1EA} :root[data-theme="dark"] .chips button[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:#0E1A2B} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chips button[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:#0E1A2B}} .res-jump{display:flex;gap:22px;flex-wrap:wrap;padding-block:22px;font-size:14px;border-bottom:1px solid var(--line)} .res-jump a{color:var(--muted);text-decoration:none}.res-jump a:hover{color:var(--accent)} .res-sec{padding-top:56px;scroll-margin-top:140px} .res-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:26px} .res-head h2{font-size:clamp(26px,3.2vw,36px);margin-top:8px} .res-head>p{color:var(--muted);font-size:15.5px;max-width:52ch} @media (max-width:800px){.res-head{grid-template-columns:minmax(0,1fr);gap:12px}} .tagrow{display:flex;gap:5px;flex-wrap:wrap} .tg{font:600 11px/1 var(--label);letter-spacing:.01em;text-transform:none;padding:5px 7px;border-radius:3px;background:color-mix(in srgb,var(--slate) 14%,transparent);color:var(--muted)} .tg.rp{background:color-mix(in srgb,#0E1A2B 12%,transparent);color:var(--text)} .tg.pp{background:color-mix(in srgb,#B0663F 16%,transparent);color:#9A5634} .tg.ir{background:color-mix(in srgb,#29323D 14%,transparent)} .tg.cfi{background:color-mix(in srgb,#5A1B23 14%,transparent);color:#7A2A33} .tg.com{background:color-mix(in srgb,#13332A 14%,transparent);color:#1F5A47} .tg.atp{background:color-mix(in srgb,#A8382A 13%,transparent);color:#8E2F24} .tg.amt{background:color-mix(in srgb,#93A3B3 24%,transparent)} :root[data-theme="dark"] .tg{color:var(--muted)!important} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tg{color:var(--muted)!important}} .doc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} @media (max-width:980px){.doc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:600px){.doc-grid{grid-template-columns:minmax(0,1fr)}} .doc{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:18px;border:1px solid var(--line);background:var(--surface);text-align:left;cursor:pointer;font:inherit;color:inherit;align-items:start} .doc:hover{border-color:var(--accent)} .doc .ico{width:44px;height:56px;border:1px solid var(--rule-2);background:var(--bg);display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;font:600 9.5px var(--label);color:var(--accent);letter-spacing:.01em;position:relative} .doc .ico::before{content:"";position:absolute;top:8px;left:8px;right:8px;height:2px;background:var(--rule-2);box-shadow:0 6px 0 var(--rule-2),0 12px 0 var(--rule-2),0 18px 0 var(--rule-2)} .doc b{display:block;font-weight:500;font-size:15.5px;line-height:1.35} .doc .num{font-family:var(--mono);font-size:12.5px;color:var(--faint);display:block;margin:3px 0 8px} .doc .st{font-size:12px;color:var(--good);display:flex;gap:6px;align-items:center;margin-top:8px} .doc .st.w{color:var(--warn)} .calc-tabs{display:flex;gap:0;border:1px solid var(--line);background:var(--surface);margin-bottom:18px;overflow-x:auto} .calc-tabs button{flex:1;padding:12px 16px;border:0;border-right:1px solid var(--line);background:none;font:500 14px var(--sans);color:var(--muted);cursor:pointer;white-space:nowrap} .calc-tabs button:last-child{border-right:0} .calc-tabs button[aria-selected="true"]{background:var(--navy);color:#F4F1EA} :root[data-theme="dark"] .calc-tabs button[aria-selected="true"]{background:var(--brass);color:#0E1A2B} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .calc-tabs button[aria-selected="true"]{background:var(--brass);color:#0E1A2B}} .calc-grid{columns:3 320px;column-gap:18px} .calc{break-inside:avoid;margin-bottom:18px;border:1px solid var(--line);background:var(--surface);padding:20px;display:grid;gap:12px;scroll-margin-top:150px} .calc.hl{border-color:var(--brass);box-shadow:0 0 0 3px color-mix(in srgb,var(--brass) 25%,transparent)} .calc h3{font-size:19px;font-weight:500} .calc .cdesc{font-size:13.5px;color:var(--muted);margin-top:-4px} .calc .ins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .calc .ins .field.full{grid-column:1/-1} .calc .field label{font-size:13.5px} .calc .field input,.calc .field select,.calc .field textarea{padding:9px 10px;font-size:14px} .calc .out{background:var(--paper-2);border-left:2px solid var(--brass);padding:12px 14px;display:grid;gap:6px;font-size:14px} .calc .out .big{font-family:var(--serif);font-size:24px;line-height:1.15} .calc .out .row{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dotted var(--rule-2);padding-bottom:4px} .calc .out .row:last-child{border-bottom:0} .calc .out .row span:first-child{color:var(--muted)} .calc .note{font-size:13px;color:var(--faint)} .calc .wb{width:100%;font-size:13px;background:transparent} .calc .wb td,.calc .wb th{padding:4px 5px;border-bottom:1px solid var(--line)} .calc .wb input{width:100%;padding:6px;border:1px solid var(--rule-2);background:var(--surface);color:var(--text);font:13px var(--sans)} .fc{display:inline-block;font:600 12px/1 var(--mono);padding:5px 8px;border-radius:3px;color:#fff} .fc.VFR{background:#2F6B4F}.fc.MVFR{background:#2B5C9A}.fc.IFR{background:#9A2B2B}.fc.LIFR{background:#8A2B7A} .gl-tools{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px} .az{display:flex;flex-wrap:wrap;gap:2px} .az button{width:26px;height:30px;border:1px solid var(--line);background:var(--surface);font:500 12px var(--mono);color:var(--muted);cursor:pointer} .az button:disabled{opacity:.3;cursor:default} .gl-count{font-size:13px;color:var(--faint);margin-bottom:10px} .gl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px;border-top:1px solid var(--line)} @media (max-width:800px){.gl{grid-template-columns:minmax(0,1fr)}} .gl .term{padding:16px 0;border-bottom:1px solid var(--line);display:grid;gap:6px;scroll-margin-top:150px} .gl .term.hl{background:color-mix(in srgb,var(--mark) 18%,transparent);outline:2px solid color-mix(in srgb,var(--mark) 70%,transparent);outline-offset:5px;border-radius:2px} .gl dt{font-family:var(--serif);font-size:19px;font-weight:500;display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap} .gl dd{margin:0;font-size:15px;color:var(--text);line-height:1.6} .gl .src{font-size:13.5px;color:var(--faint)} .gl .src a{font-size:13.5px} .gl .letter{grid-column:1/-1;font:600 13px var(--label);letter-spacing:.01em;color:var(--accent);padding:18px 0 6px;border-bottom:1px solid var(--line)} .art-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} /* STUDY HUB OFFER. #learn ran 1,655 words and 39 headings with nothing on the page that led to a product. This block spans the grid and follows the certificate filter, so a reader filtering to Private Pilot is offered the Private Pilot book rather than the drone one. Series not yet shipping say so and use the quiet button. */ .hub-offer{grid-column:1/-1;margin:16px 0 8px;padding:26px 28px;background:var(--navy);color:#DCE2E8;border-radius:3px;display:grid;gap:8px;align-content:start} .hub-offer .eyebrow{color:var(--brass)} .hub-offer h2{font-size:clamp(21px,2.4vw,27px);font-weight:400;color:#F4F1EA;margin:0} .hub-offer p{color:#CFC8BD;font-size:15px;max-width:68ch;margin:0} .hub-offer a.btn{justify-self:start;margin-top:10px} .hub-offer .btn-ghost{color:#EDE8DC;border-color:#4A6080} .hub-offer .btn-ghost:hover{border-color:var(--brass);color:var(--brass-soft)} @media (max-width:900px){.art-grid{grid-template-columns:minmax(0,1fr)}} .off-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} @media (max-width:900px){.off-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.off-grid{grid-template-columns:minmax(0,1fr)}} .off{border:1px solid var(--line);background:var(--surface);padding:18px;display:grid;gap:8px;align-content:start} .off b{font-weight:500}.off p{font-size:14px;color:var(--muted)} .off a{font-size:14px;font-weight:500} .empty-note{padding:26px;border:1px dashed var(--rule-2);color:var(--muted);font-size:15px;text-align:center} .reader-scrim{position:fixed;inset:0;background:rgba(8,14,24,.6);z-index:110} .reader{position:fixed;z-index:120;top:calc(24px + env(safe-area-inset-top,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);width:min(980px,calc(100% - 32px));background:var(--bg);border:1px solid var(--line);display:grid;grid-template-rows:auto minmax(0,1fr);box-shadow:0 30px 80px rgba(0,0,0,.4)} .reader-bar{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface)} .reader-bar h3{font-size:18px;font-weight:500} .reader-body{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:0} @media (max-width:760px){.reader-body{grid-template-columns:minmax(0,1fr);overflow-y:auto}.reader-side{border-right:0!important;border-bottom:1px solid var(--line)}} .reader-side{padding:20px;border-right:1px solid var(--line);overflow-y:auto;display:grid;gap:16px;align-content:start;font-size:14px} .reader-side dl{margin:0;display:grid;gap:10px}.reader-side dt{font:600 12.5px var(--label);letter-spacing:.01em;text-transform:none;color:var(--faint)}.reader-side dd{margin:2px 0 0} .reader-pages{overflow-y:auto;background:#5B6572;padding:24px;display:grid;gap:18px;justify-items:center} .rpage{width:min(560px,100%);aspect-ratio:8.5/11;background:#FBFAF6;color:#1B2430;padding:7%;display:flex;flex-direction:column;gap:3%;container-type:inline-size;box-shadow:0 6px 20px rgba(0,0,0,.3)} .rpage .k{font:600 2.38cqw var(--label);letter-spacing:.01em;text-transform:none;color:#5B6572} .rpage h4{font-family:var(--serif);font-weight:500;font-size:6cqw;line-height:1.1;color:#0E1A2B} .rpage p{font-family:var(--serif);font-size:2.9cqw;line-height:1.5;color:#232C38} .rpage li{font-family:var(--serif);font-size:2.8cqw;line-height:1.5;color:#232C38} .rpage .bar{height:3px;background:#0E1A2B;width:100%} .rpage .stamp{margin-top:auto;border:1px dashed #9AA3AD;padding:3%;font:2.2cqw var(--sans);color:#4A5563} .res-promo{display:flex;justify-content:space-between;gap:32px;align-items:center;flex-wrap:wrap} .res-promo-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;flex:1;min-width:280px;max-width:640px} @media (max-width:600px){.res-promo-tiles{grid-template-columns:minmax(0,1fr)}} .res-promo-tiles a{border:1px solid var(--line);background:var(--surface);padding:16px;text-decoration:none;color:var(--text);display:grid;gap:4px} .res-promo-tiles a:hover{border-color:var(--accent)} .res-promo-tiles b{font-family:var(--serif);font-size:19px;font-weight:500}.res-promo-tiles span{font-size:13px;color:var(--muted)} .lib-jump{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:center;padding:14px 0 18px;border-bottom:1px solid var(--line);margin-bottom:8px} .lib-jump span{font:600 12.5px var(--label);letter-spacing:.01em;text-transform:none;color:var(--faint);margin-right:6px} .lib-jump button{border:1px solid var(--rule-2);background:var(--surface);color:var(--text);padding:8px 13px;font:500 13px var(--sans);border-radius:20px;cursor:pointer} .lib-jump button:hover{border-color:var(--accent);color:var(--accent)} .lib-jump button.hot{background:#1C1F22;border-color:#1C1F22;color:#C3CED9} .series{scroll-margin-top:100px} .cert-split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:center} @media (max-width:900px){.cert-split{grid-template-columns:minmax(0,1fr)}} .cert-card{background:linear-gradient(160deg,#F7F4EC,#ECE6D8);color:#1B2430;border:1px solid #D8D1C2;padding:28px;display:grid;gap:6px;position:relative;box-shadow:0 18px 36px rgba(14,26,43,.14);outline:6px double #C7BFAE;outline-offset:-14px} .cert-card .k{font:600 12.5px var(--label);letter-spacing:.01em;text-transform:none;color:#566170} .cert-card b{font-family:var(--serif);font-size:30px;font-weight:500;color:#0E1A2B} .cert-card p{font-size:14px;color:#4A5563} .stamps{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0} .stamps span{border:2px solid #1C1F22;color:#1C1F22;padding:8px 14px;font:600 14px var(--label);letter-spacing:.01em;text-transform:none;transform:rotate(-3deg);transition:opacity .25s,filter .25s} .stamps span+span{transform:rotate(2deg);border-color:#735630;color:#735630} .stamps span.off{opacity:.18;filter:grayscale(1)} .reqs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:36px} @media (max-width:900px){.reqs{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:520px){.reqs{grid-template-columns:minmax(0,1fr)}} .reqs div{border:1px solid var(--line);background:var(--surface);padding:16px 18px;display:grid;gap:4px;align-content:start} .reqs .k{font:600 12.5px var(--label);letter-spacing:.01em;text-transform:none;color:var(--accent)} .reqs b{font-family:var(--serif);font-size:19px;font-weight:500}.reqs p{font-size:13.5px;color:var(--muted)} .chooser{margin-top:40px;border:1px solid var(--line);background:var(--surface);padding:26px;display:grid;gap:22px} .chooser-head{display:flex;justify-content:space-between;gap:20px;align-items:end;flex-wrap:wrap} .chooser-head h3{font-size:24px;margin-top:6px} .chooser-opts{display:flex;gap:6px;flex-wrap:wrap} .chooser-opts button{border:1px solid var(--rule-2);background:var(--bg);color:var(--text);padding:10px 16px;font:500 14px var(--sans);border-radius:22px;cursor:pointer} .chooser-opts button[aria-pressed="true"]{background:#1C1F22;border-color:#1C1F22;color:#F4F1EA} .chooser-books{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px} @media (max-width:700px){.chooser-books{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:420px){.chooser-books{grid-template-columns:repeat(2,minmax(0,1fr))}} .chooser-books a{display:grid;gap:8px;text-decoration:none;color:var(--text);font-size:13.5px;transition:opacity .25s,filter .25s} .chooser-books a.skip{opacity:.28;filter:grayscale(1)} .chooser-books a .cover{box-shadow:0 10px 22px rgba(14,26,43,.22)} .chooser-books .need{font:600 12.5px var(--label);letter-spacing:.01em;text-transform:none} .chooser-books a:not(.skip) .need{color:var(--good)}.chooser-books a.skip .need{color:var(--faint)} .chooser-result{display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px} .chooser-result b{font-family:var(--serif);font-size:22px;font-weight:500} .kit-head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:36px} @media (max-width:900px){.kit-head{grid-template-columns:minmax(0,1fr)}} .kit-sample{display:grid;gap:8px;background:var(--navy);color:#E7E2D9;padding:26px 28px;text-decoration:none;border-left:4px solid var(--brass);transition:transform .2s} .kit-sample:hover{transform:translateY(-2px);color:#E7E2D9} .kit-sample .k{font:600 12.5px var(--label);letter-spacing:.01em;text-transform:none;color:var(--brass)} .kit-sample b{font-family:var(--serif);font-size:24px;font-weight:500;color:#F4F1EA} .kit-sample span{font-size:14px}.kit-sample .go{color:#D9C49E;font-weight:500;margin-top:4px} .kit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} @media (max-width:980px){.kit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.kit-grid{grid-template-columns:minmax(0,1fr)}} .kit-grid>div,.kit-terms>div{border:1px solid var(--line);background:var(--surface);padding:20px;display:grid;gap:6px;align-content:start} .kit-grid .k,.kit-terms .k{font:600 12.5px var(--label);letter-spacing:.01em;text-transform:none;color:var(--accent)} .kit-grid b{font-family:var(--serif);font-size:20px;font-weight:500}.kit-grid p{font-size:14px;color:var(--muted)} .kit-terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px} @media (max-width:900px){.kit-terms{grid-template-columns:minmax(0,1fr)}} .kit-terms ol,.kit-terms ul{margin:4px 0 0;padding-left:18px;display:grid;gap:6px;font-size:14.5px;color:var(--muted)} .kit-terms .avail{font-size:13.5px;color:var(--text);margin-top:8px;padding-top:8px;border-top:1px solid var(--line)} .cons-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line);background:var(--surface);margin-bottom:16px} @media (max-width:900px){.cons-stats{grid-template-columns:repeat(2,minmax(0,1fr))}} .cons-stats div{padding:26px 24px;border-right:1px solid var(--line);display:grid;gap:6px;align-content:start} .cons-stats div:last-child{border-right:0} @media (max-width:900px){.cons-stats div:nth-child(2){border-right:0}.cons-stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}} .cons-stats b{font-family:var(--serif);font-size:44px;font-weight:400;line-height:1;color:var(--text)} .cons-stats span{font-size:16px;line-height:1.5;color:var(--text);letter-spacing:.002em}.cons-stats div:last-child span{color:#EAF0F8;font-weight:500}.cons-stats div{row-gap:9px} .cons-stats .ours{background:var(--navy)}.cons-stats .ours b{color:var(--brass-soft)}.cons-stats .ours span{color:#CFC8BD} .cons-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:48px;align-items:start}@media (min-width:901px) and (max-width:1199px){.cons-body{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}} @media (max-width:900px){.cons-body{grid-template-columns:minmax(0,1fr);gap:28px}} .cons-list{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)} .cons-list li{padding:15px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.6;color:var(--text)} .cons-list b{color:var(--text);font-weight:600} .cons-note{margin-top:32px;border-left:3px solid var(--brass);background:var(--surface);padding:16px 20px;font-size:15.5px} .stmt{text-align:center;font-family:var(--serif);font-weight:500;font-size:clamp(25px,3vw,34px);line-height:1.28;color:var(--text);max-width:58ch;margin:36px auto 36px;position:relative;padding-top:26px}.stmt .l1{display:block;text-wrap:balance;font-size:.78em;font-weight:400;color:#333F4E;letter-spacing:.002em}.stmt .l2{display:block;margin-top:.14em;font-size:1.18em;font-weight:600;color:var(--text);text-wrap:balance}.stmt::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:62px;height:3px;border-radius:2px;background:linear-gradient(90deg,#C9A15E,#E6CF9E)}.cons-src{margin-top:14px;font-size:14.5px;line-height:1.5;color:var(--faint)}.wrap>.cons-src{max-width:none;columns:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 46px;margin:0 0 40px}@media (max-width:760px){.wrap>.cons-src{grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:30px}} .cons-src span{display:block} .wx{display:grid;gap:16px;--wxc1:#10223A;--wxc2:#1F3A5C;--wxc3:#35577D} .wx-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:26px}.wx-lesson{margin:12px 0 0;padding:13px 16px;border-left:4px solid #A84E17;border-radius:3px;background:rgba(168,78,23,.07);font-size:15px;line-height:1.6;color:var(--text);max-width:78ch}.wx-lesson b{font:600 11.5px/1.4 var(--label);letter-spacing:.07em;text-transform:uppercase;color:#7A3A11;display:block;margin-bottom:4px}.wx-exlab{margin:0;font:600 12px/1.4 var(--label);letter-spacing:.07em;text-transform:uppercase;color:#573F21} .wx-bar .field{flex:1;min-width:200px} .wx-bar .field input{padding:11px 12px} .wx-presets{display:flex;gap:6px;flex-wrap:wrap} .wx-presets button{border:1px solid var(--rule-2);background:var(--surface);color:var(--text);padding:9px 12px;font:500 13px var(--sans);border-radius:20px;cursor:pointer} .wx-presets button[aria-pressed="true"]{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);color:var(--navy);background:var(--surface)} .wx-units{display:inline-flex;border:1px solid var(--rule-2);border-radius:20px;overflow:hidden} .wx-units button{border:0;background:var(--surface);color:var(--muted);padding:9px 12px;font:500 13px var(--sans);cursor:pointer} .wx-units button[aria-pressed="true"]{background:var(--navy);color:#F4F1EA} .wx-sample{font-size:12.5px;color:var(--warn);display:flex;gap:8px;align-items:flex-start} /* ==== 6.22 LIVE OFFICIAL WEATHER, 28 October 2026 ==== Owner: "thought you fixed this with govt resources". It had NOT been built -- 6.11 only made the interface stop promising what it could not do. TWO GOVERNMENT SOURCES, NO API KEY: US Census geocoder geocoding.geo.census.gov ZIP -> coordinates FAA/NWS Aviation Weather Center aviationweather.gov/api/data DESIGN IS SET BY THE LIABILITY RESEARCH (6.18), not by taste: Aetna v. Jeppesen (9th Cir. 1981) found a publisher liable for its GRAPHIC SYNTHESIS of data whose numbers were all correct -- "It was reliance on this graphic portrayal that Jeppesen invited." Winter v. Putnam (9th Cir. 1991) put a chart on the product side of the line and a "How to Use" book on the expression side. So: THE RAW OFFICIAL TEXT IS THE HERO ELEMENT, the decode is a secondary teaching annotation, the raw text governs on any conflict, and NO go/no-go verdict is ever rendered against live data. WCAG 2.2 SC 1.4.3: the raw text is #0B121C on #F4EFE2, 13.6:1. The AWC documents that it does not permit cross-origin requests. That is DOCUMENTED, NOT TESTED -- neither this container nor the research sandbox could reach the host to try it. So this fails LOUDLY and visibly rather than silently, and the worked examples below are untouched either way. */ /* 6.65f Another fixed-light panel. Same class as .pg: its background does not follow the scheme, so its rules must not either. */.wxl{--rule:var(--line-on-light);--line:var(--line-on-light);--rule-2:var(--rule2-on-light);border:1px solid var(--rule-2);border-radius:4px;background:#FBF9F3; padding:18px 20px;margin:0 0 20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6);color:var(--ink)} .wxl h2{margin:0 0 4px;font-family:var(--serif);font-weight:400;font-size:20px;color:var(--text)} .wxl .hint{margin:0 0 12px;font-size:13.5px;color:var(--muted)} .wxl form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0} .wxl input{flex:1 1 220px;min-width:0;padding:11px 13px;font-size:16px; border:1px solid rgba(141,121,80,.55);border-radius:3px;background:#fff;color:var(--text)} .wxl button[type=submit]{padding:11px 20px;min-height:44px;border:1px solid #14305C; background:#14305C;color:#fff;border-radius:3px;font-size:15px;font-weight:500;cursor:pointer} .wxl button[type=submit]:hover{background:#0D2244} .wxl-out{margin-top:16px}.wxl-src{display:grid;gap:10px;margin:14px 0 0}.wxl-src a{display:block;padding:13px 15px;border:1px solid var(--rule-2);border-left:4px solid #14305C;border-radius:3px;background:#fff;text-decoration:none;color:var(--text)}.wxl-src a:hover{background:#14305C;border-color:#14305C;color:#fff}.wxl-src a:hover span{color:rgba(255,255,255,.88)}.wxl-src b{display:block;font-size:16px;font-weight:600;margin-bottom:2px}.wxl-src span{display:block;font-size:13.5px;line-height:1.5;color:var(--muted)}.wxl-quick{margin:11px 0 0;font-size:13.5px;color:var(--muted);display:flex;gap:7px;flex-wrap:wrap;align-items:center}.wxl-quick button{font:600 13px/1 var(--mono,ui-monospace,Menlo,monospace);padding:6px 10px;min-height:32px;border:1px solid rgba(141,121,80,.55);background:#fff;color:#14305C;border-radius:3px;cursor:pointer}.wxl-quick button:hover{background:#14305C;color:#fff;border-color:#14305C} .wxl-raw{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace); font-size:15px;line-height:1.6;color:#0B121C;background:#fff; border:1px solid rgba(141,121,80,.45);border-left:4px solid #14305C; border-radius:3px;padding:14px 16px;white-space:pre-wrap;word-break:break-word;margin:0 0 6px} .wxl-k{font:600 12px var(--label);letter-spacing:.06em;text-transform:uppercase; color:#573F21;margin:14px 0 5px} .wxl-k:first-child{margin-top:0} .wxl-meta{font-size:12.5px;color:var(--muted);margin:0 0 14px} .wxl-dec{margin:0;font-size:14.5px;line-height:1.6;color:var(--text)} .wxl-dec li{margin:0 0 3px} .wxl-note{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line); font-size:13px;line-height:1.55;color:var(--muted)} .wxl-err{margin:14px 0 0;padding:12px 14px;border-radius:3px; background:rgba(142,20,20,.08);border-left:4px solid #8E1414; font-size:14px;line-height:1.55;color:var(--text)} .wxl-busy{margin:14px 0 0;font-size:14px;color:var(--muted)} @media (max-width:560px){.wxl{padding:16px}.wxl button[type=submit]{flex:1 1 100%}} .wx-hero{border-radius:2px;padding:28px 30px;color:#fff;background:linear-gradient(135deg,var(--wxc1),var(--wxc2) 62%,var(--wxc3));position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;box-shadow:0 12px 32px rgba(14,26,43,.22)} @media (max-width:820px){.wx-hero{grid-template-columns:minmax(0,1fr);padding:22px}} .wx-hero .loc{font:600 13px var(--label);letter-spacing:.01em;text-transform:none;opacity:.9} .wx-hero .now{display:flex;gap:18px;align-items:center;margin-top:10px} .wx-hero .now svg{width:92px;height:92px;flex:none;filter:drop-shadow(0 6px 12px rgba(0,0,0,.18))} .wx-hero .temp{font-family:var(--serif);font-size:74px;line-height:1;font-weight:400} .wx-hero .cond{font-size:20px;font-weight:500} .wx-hero .sub{font-size:14px;opacity:.92;margin-top:4px} .wx-hero .quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:20px} /* 6.07 THE SIX CONDITION TILES, 28 October 2026. Measured from the owner's own screenshot, sampled at the correct scale: 7 of the 15 tile pairs were below dE 10, the point at which the eye reads two colors as one. Worst: Visibility vs Rain chance dE 1.3, Wind vs Gusts dE 2.1, and -- the damaging one -- Flight category (MVFR, meant to be BLUE) only dE 6.3 from the neutral Visibility tile. The semantic color was in the CSS and never arrived at the eye, because every wash was mixed at 46%/12%. Tile-vs-GROUND was never the problem: the tiles measured dL* 12.6-18.9 above the hero, already inside the 10-12 band the separation research recommends. So the fill stays and the WASHES are what change. Border raised to .40 so a tile reads as a discrete object rather than a soft patch. */ .wx-hero .quick div{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.40);border-radius:6px;padding:10px 12px;backdrop-filter:blur(4px)} /* 6.09, 28 October 2026. Owner: "the names in top left corner are very small and need to get more attention so visitor easily knows what box is actually representing". Correct, and the hierarchy was backwards: the LABEL, which says what the number means, was 11px at .85 opacity while the VALUE was 18px bold -- the identifier at under two thirds the size of the thing it identifies. Label now 13px / 700 / .96 opacity / uppercase with tracking, which is what makes a short word scannable at small size. WHY THE SIX TILES ARE NOT SIX COLORS, though the owner asked twice: color on this panel carries STATE -- red means "exceeds the limit YOU set", blue means the flight category. FAA DOT/FAA/AM-07/10, Section V item 6: "WHEN USED FOR ATTENTION OR IDENTIFICATION, A COLOR SHALL BE FULLY CORRELATED WITH A SPECIFIC MEANING IN TASK PERFORMANCE", and Appendix B: "one color shall not be used for multiple purposes". Giving Visibility, Ceiling and Rain chance their own hues would make color mean "which box", and the red would stop reading as a warning -- on a panel whose job is to tell a remote pilot not to fly. Identity belongs to the label; state belongs to the color. Enlarging the label IS the fix for "I can't tell what the box represents", and it is the one that keeps the warning working. */ .wx-hero .quick span{display:block;font-size:13px;font-weight:700; letter-spacing:.055em;text-transform:uppercase;opacity:.96;margin-bottom:3px} .wx-hero .quick b{font-size:21px;font-weight:600;letter-spacing:-.005em} /* 5.81, CORRECTED 28 October 2026 (6.07): the flight category is the one tile carrying a meaning a pilot already reads by color. ACCURACY, and this matters for what we may print: the CATEGORIES are formally defined -- FAA AIM paragraph 7-1-7, "Categorical Ceiling and Visibility Conditions", verbatim thresholds. The COLORS are NOT. No FAA or NWS document specifies them numerically anywhere; aviationweather.gov's GFA help names only "purple, red, blue, green", and the NOAA/ForeFlight legend calls LIFR MAGENTA where the GFA help calls it PURPLE. The two most authoritative descriptions of the same scheme disagree, which is itself proof there is no specification. The earlier wording here, "the colors are the FAA's", was an overclaim. Any hex we ship is OURS, chosen to match a convention, and site copy must never say "FAA-standard colors". The word is written inside the colored tile, so color is never the only cue -- required, not optional, because the FAA scheme's own green/red pair is the worst case for deuteranopia and CANNOT be made safe by tuning: measured, VFR vs IFR falls to 1.08:1 simulated, and pushing them apart only reaches 2.65:1, still under 3:1. WCAG 2.2 SC 1.4.1 and FAA DOT/FAA/AM-07/10 ("THE USE OF COLOR ... SHALL BE ACCOMPANIED WITH EFFECTIVE REDUNDANT CUES") independently require the label. */ .wx-hero .quick .wq-cat{position:relative;border-color:rgba(255,255,255,.42)} .wx-hero .quick .wq-cat::before{content:"";position:absolute;left:0;top:0;bottom:0; width:6px;border-radius:6px 0 0 6px;background:var(--fcc,#8A96A6)} .wx-hero .quick .wq-cat{padding-left:16px; background-image:linear-gradient(90deg,color-mix(in srgb,var(--fcc,#8A96A6) 86%,transparent), color-mix(in srgb,var(--fcc,#8A96A6) 38%,transparent))} .wx-hero .quick .wq-cat.VFR{--fcc:#2F6B4F} .wx-hero .quick .wq-cat.MVFR{--fcc:#2B5C9A} .wx-hero .quick .wq-cat.IFR{--fcc:#9A2B2B} .wx-hero .quick .wq-cat.LIFR{--fcc:#8A2B7A} /* 5.81b: the verdict panel already computes whether wind and gusts break the limits the visitor set, and says so in a sentence. The two tiles that hold those exact numbers said nothing about it, so the most actionable fact on the page was carried only by prose. They now carry the state too. NOT COLOR ALONE: the tile keeps its label and value, takes a left bar and a wash the way the category tile does, and the verdict list above still spells it out in words. Color is a second cue here, never the only one. */ .wx-hero .quick .wq-lim{position:relative;padding-left:16px} .wx-hero .quick .wq-lim::before{content:"";position:absolute;left:0;top:0;bottom:0; width:6px;border-radius:6px 0 0 6px;background:var(--lc,transparent)} /* "over" must out-shout "ok": an exceeded limit is the one thing on this panel a remote pilot must not miss. Both still write the state in words inside the tile, so color is never the only cue (WCAG 2.2 SC 1.4.1). */ .wx-hero .quick .wq-lim.over{--lc:#FF7A7A;border-color:rgba(255,122,122,.85); background-image:linear-gradient(90deg,rgba(214,58,58,.80),rgba(214,58,58,.26))} .wx-hero .quick .wq-lim.ok{--lc:#7FD7A3;border-color:rgba(127,215,163,.55); background-image:linear-gradient(90deg,rgba(47,140,85,.46),rgba(47,140,85,.10))} /* 26 October 2026. The weather column's content stopped 169px above the verdict card beside it, leaving bare navy under the six condition tiles. The column is now a flex column and the tile grid takes the remaining height with equal rows, so the space becomes larger, more legible tiles instead of a hole. Measured 0px mismatch after. Playbook 5.9. */ @media (min-width:821px){ .wx-hero>*:first-child{display:flex;flex-direction:column} .wx-hero>*:first-child>.quick{flex:1;grid-auto-rows:1fr;align-content:stretch} } .wx-go{background:rgba(255,255,255,.95);color:#16202D;border-radius:6px;padding:18px 20px;display:grid;gap:10px;align-content:start} .wx-go .verdict{display:flex;gap:12px;align-items:center} .wx-go .lamp{width:44px;height:44px;border-radius:50%;flex:none;box-shadow:inset 0 -3px 0 rgba(0,0,0,.15)} .wx-go .lamp.good{background:#2F6B4F} .wx-go .lamp.caution{background:#C9A15E} .wx-go .lamp.poor{background:#8E2A2A} .wx-go h4{font-family:var(--serif);font-size:22px;font-weight:500} .wx-go small{font:600 12.5px var(--label);letter-spacing:.01em;text-transform:none;color:#6B7684} .wx-go ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:13.5px} .wx-go li{display:flex;gap:8px}.wx-go li i{font-style:normal;flex:none;width:18px;text-align:center} .wx-go .lims{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:#4A5563;align-items:center;border-top:1px solid var(--line);padding-top:10px} .wx-go .lims input{width:56px;padding:4px 6px;border:1px solid var(--rule-2);font:13px var(--sans);border-radius:3px} .wx-alert{border-radius:2px;padding:14px 18px;background:var(--panel);border:1px solid #D9C49E;border-left:4px solid #8A6C40;color:#4A3720;display:flex;gap:12px;align-items:flex-start;font-size:14.5px} .wx-alert b{display:block} .wx-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px} .wx-card{grid-column:span 4;border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:18px 20px;display:grid;gap:10px;align-content:start} .wx-card.w8{grid-column:span 8}.wx-card.w12{grid-column:1/-1}.wx-card.w6{grid-column:span 6} @media (max-width:980px){.wx-card,.wx-card.w8,.wx-card.w6{grid-column:span 6}.wx-card.w12{grid-column:1/-1}} @media (max-width:640px){.wx-card,.wx-card.w8,.wx-card.w6,.wx-card.w12{grid-column:1/-1}} .wx-card h3,.wx-card h4{font:600 12px var(--label);letter-spacing:.01em;text-transform:none;color:var(--faint)} .wx-card .row{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:5px 0;border-bottom:1px dotted var(--rule-2)} .wx-card .row:last-child{border-bottom:0}.wx-card .row span:first-child{color:var(--muted)} .hourly{overflow-x:auto} .hourly svg{display:block;min-width:720px;width:100%} .days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px} @media (max-width:820px){.days{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.day{flex:0 0 104px;scroll-snap-align:start}} /* ==== 6.06 THE 7-DAY STRIP, 28 October 2026 ==== Seven identical tan cards: a 0%-rain Saturday and a 70%-rain thunderstorm today looked the same, so visitors skipped the strip. Treisman & Gelade 1980 explains why -- a color target is found in one glance (3.8 ms/item) only when it differs from its distractors; seven equally muted cards make every card a distractor and force serial search (28.7 ms/item). The fix is NOT seven colored cards. FAA DOT/FAA/AM-07/10 is explicit: "THE NUMBER OF DISTRACTER COLORS SHALL BE FEWER THAN FIVE" and colors identifying data categories "SHALL BE FEWER THAN SEVEN". Seven loud panels is the condition where nothing pops, and it is also the high-chroma- everywhere case that Zhou et al. (JCR 2026) ties to LOWER perceived status. So: the card stays quiet and uniform, ONE saturated element per card (the icon), ONE sequential element (the rain bar), everything else in ink. The printed percentage is mandatory, not decorative: Reed, Jasko & Senkbeil (Wea. Climate Soc. 2021) found light/moderate/heavy rain icons produced NO significant difference in interpretation, and a lightning icon drew answers from 0% to 100% (sigma 29.16). An icon cannot carry a probability. */ .day{position:relative;border-radius:6px;padding:12px 10px 16px;text-align:center;display:grid;gap:4px;justify-items:center;background:var(--bg);border:1px solid var(--line);overflow:hidden} .day .dn{font-weight:600;font-size:14px}.day svg{width:44px;height:44px} .day .hl{font-size:15px}.day .hl b{font-weight:600}.day .hl span{color:var(--muted)} .day .pp{font-size:12px;color:#0C4A6E;font-weight:600} .day .dw{font-size:12.5px;color:var(--teal-text)} /* today is the only card that gets an accent: one, not seven */ .day.today{border-color:rgba(168,78,23,.42)} .day.today::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:#A84E17} .day.today .dn{color:var(--warn-text)} /* the week's shape, readable in one saccade: seven bars of visibly different length and lightness along the foot of the strip */ .day .ppbar{position:absolute;left:0;bottom:0;height:5px;background:#CFE0EB; border-top:1px solid rgba(12,74,110,.30)} .compass{width:120px;height:120px;flex:none} .aloft{display:grid;gap:6px} .aloft .ab{display:grid;grid-template-columns:62px minmax(0,1fr) 64px;gap:10px;align-items:center;font-size:13px} .aloft .ab i{height:8px;border-radius:0;background:linear-gradient(90deg,#2F6B4F,#C9A15E 60%,#8E2A2A);display:block} .aloft .ab em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums} .raw{font:13px/1.55 var(--mono);background:var(--bg);border:1px solid var(--line);padding:10px 12px;border-radius:4px;white-space:pre-wrap;word-break:break-word} .kp{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:3px} .kp i{height:26px;border-radius:3px;background:var(--line)} .kp i.on{background:var(--kpc)} .wx-learn{border-radius:2px;padding:18px 20px;background:color-mix(in srgb,var(--brass) 9%,var(--surface));border-left:4px solid var(--brass)!important;border:1px solid var(--line);display:grid;gap:10px} .wx-learn ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14.5px} @media (max-width:460px){.wx-hero .now{flex-wrap:wrap;gap:12px}.wx-hero .now svg{width:64px;height:64px}.wx-hero .temp{font-size:56px}.wx-hero .quick{grid-template-columns:repeat(2,minmax(0,1fr))}.wx-hero{padding:18px}} .wx-foot{font-size:12.5px;color:var(--faint);line-height:1.6} .res-hero .eyebrow{color:var(--brass)} .site-foot .brand .wm span{color:var(--brass)} @media (max-width:760px){.pcard .links a,.crumbs a,.res-jump a,.off a,.series .vols a,#seriesBody .vols a,.site-foot a,.acard,.toc-list a{display:inline-block;padding-block:4px}.res-jump{gap:6px 18px}} @media (max-width:560px){.hero-facts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}.hero-ctas{flex-direction:column;align-items:stretch}.hero-ctas .btn{width:100%}} .acard{align-content:start} @media (min-width:901px){.amt-fan{height:290px}} .res-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:end} .res-hero .res-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;border:0} .res-hero .res-stats div{background:#16263B;border:1px solid #2A4774;padding:18px 20px} @media (max-width:900px){.res-hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}} .wx-side{grid-column:span 4;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-content:start;min-width:0} @media (max-width:980px){.wx-side{grid-column:span 6}} @media (max-width:640px){.wx-side{grid-column:1/-1}} /* 6.41 DUPLICATE-RULE DEFECT, found 28 Oct 2026. This rule used to read `.gl{display:block;columns:2 360px;column-gap:40px}`. Being a later rule with the same selector, it beat the grid declared at .gl above AND sat outside any media query, so it also beat the @media (max-width:800px) single-column rule. Consequences: the glossary rendered as CSS multi-column rather than the grid it was written as; `.gl .letter{grid-column:1/-1}` was dead, so letter dividers never spanned; and once the list reached 2,371 terms the single column stood roughly 400,000px tall and Chromium spilled the last entry into a second column 784px out, off the screen at 768px wide. The grid is kept and the break-inside hints are retained: they are inert outside a fragmented context and still apply if this is ever printed. */ .gl .term,.gl .letter{break-inside:avoid} .gl .letter{break-after:avoid} @media (min-width:1100px){.art-grid,#learnArticles{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (min-width:701px) and (max-width:1099px){#learnArticles{grid-template-columns:repeat(2,minmax(0,1fr))}.art-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} .sampler-top{flex-direction:column;align-items:center;text-align:center} .sampler-top>div{justify-items:center} .sampler-top p{margin-inline:auto} .sampler-pick{justify-content:center} .prose .eyebrow,.prose p.eyebrow{font-size:12.5px;line-height:1.4;color:var(--accent)} .hero-panel{--mark:var(--brass);background:linear-gradient(168deg,#23457A 0%,#1C3765 100%);border:1px solid #44699F;border-top:3px solid var(--brass);border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.32),0 26px 60px rgba(0,0,0,.48);padding:26px 28px;display:grid;gap:16px;color:#E7E2D9} .hero-panel .eyebrow{color:var(--brass)} .hp-score{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid #2A4774} .hp-score b{font-family:var(--serif);font-weight:400;font-size:46px;line-height:1;color:#F4F1EA} .hp-score span{font-size:14px;color:#B1AAA0} .hp-rows{display:grid;gap:12px} .hp-rows div{display:grid;grid-template-columns:118px minmax(0,1fr) 48px;gap:12px;align-items:center;font-size:14px} .hp-rows i{height:12px;border-radius:0 6px 6px 0;background:rgba(6,16,32,.38);overflow:visible;display:block;position:relative} .hp-rows i::after{content:"";position:absolute;left:70%;top:-4px;bottom:-4px;width:2px;background:#F4F1EA;opacity:.55;border-radius:1px} .hp-rows em{display:block;height:100%;border-radius:0 4px 4px 0;background:linear-gradient(90deg,#2F6B4F,#5E9C7E)} .hp-rows .low em{background:linear-gradient(90deg,#8A6C40,#E3C384)} .hp-rows .low span,.hp-rows .low b{color:#F4F1EA} .hp-rows b{font-weight:500;text-align:right;color:#F4F1EA} .hp-score .hp-pass{font:600 12px var(--label);letter-spacing:.01em;text-transform:none;color:#0E1A2B;background:#6FC39A;padding:4px 8px;border-radius:3px} .hp-key{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:#9AA7B6} .hp-key span{display:inline-flex;align-items:center;gap:6px} .hp-key i{display:inline-block;width:14px;height:8px;border-radius:4px} .hp-key .k-ok{background:#6FC39A}.hp-key .k-low{background:#F2A65A}.hp-key .k-line{width:2px;height:12px;background:#F4F1EA;opacity:.55} .hp-next{display:grid;gap:4px;border-left:2px solid #F2A65A;padding:4px 0 4px 14px;font-size:14px} .hp-next b{font-family:var(--serif);font-weight:500;font-size:20px;color:#F4F1EA} .hp-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:hs} .hp-steps li{display:grid;gap:3px;padding:14px 0 14px 46px;border-top:1px solid #2A4774;position:relative;counter-increment:hs;font-size:14.5px} .hp-steps li:first-child{border-top:0;padding-top:4px} .hp-steps li::before{content:counter(hs);position:absolute;left:0;top:12px;width:30px;height:30px;border:1px solid var(--mark);border-radius:50%;display:flex;align-items:center;justify-content:center;font:500 13px var(--mono);color:var(--mark)} .hp-steps li:first-child::before{top:2px} .hp-steps b{font-weight:500;color:#F4F1EA;font-size:15.5px} .faq-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:64px;align-items:start} .faq-layout .faq{max-width:none} .faq-aside{position:sticky;top:110px;background:var(--surface);border:1px solid var(--line);padding:26px;display:grid;gap:12px} .faq-aside h3{font-size:24px} .faq-aside p:not(.eyebrow){font-size:14.5px;color:var(--muted)} @media (max-width:900px){.faq-layout{grid-template-columns:minmax(0,1fr);gap:36px}.faq-aside{position:static}} .dd{position:relative} .dd-btn{background:none;border:0;border-bottom:1px solid transparent;padding:6px 0;font:inherit;font-size:14.5px;color:var(--muted);cursor:pointer;display:inline-flex;gap:6px;align-items:center;white-space:nowrap} .dd-btn:hover,.dd-btn.on,.dd.open .dd-btn{color:var(--text);border-bottom-color:var(--brass)} .dd-menu{position:absolute;top:calc(100% + 12px);left:-18px;width:382px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);padding:8px;display:none;z-index:60} .dd-menu.dd-right{left:auto;right:-18px;width:320px} .dd.open .dd-menu{display:grid} .dd-menu a{display:grid;gap:2px;padding:10px 12px;text-decoration:none;color:var(--text);border-bottom:0!important} .dd-menu a:hover,.dd-menu a:focus-visible{background:var(--paper-2)} .dd-menu a b{font-weight:500;font-size:15px} .dd-menu a span{font-size:13px;color:var(--faint)} .dd-menu .dd-all{color:var(--accent);font-size:14px;border-top:1px solid var(--line)!important;margin-top:4px;padding-top:12px} .dd-grp{margin:10px 12px 2px;padding-top:11px;border-top:1px solid var(--line);font:600 10.5px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)} /* Six chips in a two-column grid give three even rows. flex-wrap packed them 2/3/1 and orphaned the last one. The order is the certificate ladder, not the shortest-first order. */ .dd-chips{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;padding:5px 12px 8px} /* 6.86 A BORDER IS NOT A BODY. These chips were background:transparent on a --surface panel, so fill-vs-panel measured 1.000:1 and the 1px border was carrying 100% of the chip. Four of them read as a wireframe rather than as four things you can click. --chip is a light step of the SAME ramp the hover uses, so hover intensifies rather than changes hue: 1.22:1 against the panel at rest, 1.23:1 from rest to hover, text 15.4:1. */ .dd-menu .dd-chips a{display:block;padding:6px 10px;text-align:center;border:1px solid var(--line);border-radius:2px;font-size:12.8px;line-height:1.25;color:var(--text);background:var(--chip)} .dd-menu .dd-chips a:hover,.dd-menu .dd-chips a:focus-visible{background:var(--paper-2);border-color:var(--brass)} .mn-label{font:600 12.5px var(--label);letter-spacing:.01em;text-transform:none;color:var(--faint);padding:14px 24px 2px} .u-short{display:none} @media (max-width:760px){.utility .u-long,.utility .u-side{display:none}.utility .u-short{display:inline}.utility .wrap{padding-block:7px}} .search-scrim{position:fixed;inset:0;background:rgba(8,14,24,.45);z-index:110} .search-box{position:fixed;z-index:120;top:calc(72px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:min(720px,calc(100% - 32px));background:var(--bg);border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.35);display:grid;max-height:calc(100vh - 120px)} .search-row{display:flex;gap:12px;align-items:center;padding:12px 12px 12px 18px;border-bottom:1px solid var(--line);color:var(--faint)} .search-row input{flex:1;min-width:0;border:0;background:none;font:17px var(--sans);color:var(--text);padding:8px 0} .search-row input:focus{outline:2px solid var(--fring-out);outline-offset:2px;box-shadow:var(--fring-in)} .search-results{overflow-y:auto;padding:8px} .search-results .sg{font:600 12.5px var(--label);letter-spacing:.01em;text-transform:none;color:var(--faint);padding:12px 12px 4px} .search-results a{display:grid;gap:2px;padding:10px 12px;text-decoration:none;color:var(--text)} .search-results a:hover,.search-results a.sel{background:var(--paper-2)} .search-results a b{font-weight:500} .search-results a span{font-size:13px;color:var(--faint)} .search-results .none{padding:22px 12px;color:var(--muted);font-size:15px} .hero-proof{margin-top:18px;font-size:15px;color:#CFC8BD;max-width:60ch} .hero-proof b{color:#E3C48E;font-weight:500} .cmp{margin-top:48px;background:var(--surface);border:1px solid var(--line);padding:30px 30px 22px} /* Exam Engine bands. The old layout ran everything down one 534px column while 1,181px of the right column sat empty, which is why the content read as fine print: it was being forced through a third of the available width. */ .eb{margin-top:34px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)} .eb-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:22px 26px 0} .eb-head .sth{font:600 12.5px var(--label);letter-spacing:.09em;text-transform:uppercase;color:var(--accent)} .fcx{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:30px 42px;align-items:start;padding:14px 26px 26px} .fcx-stat{display:grid;gap:2px;padding-right:38px;border-right:1px solid var(--line);align-self:stretch} .fcx-stat b{font:500 58px/1 var(--serif);color:var(--accent);font-variant-numeric:tabular-nums} .fcx-stat span{font-size:15px;color:var(--muted);line-height:1.35} .fcx-stat .sub{font-size:13.5px;color:var(--faint);margin-top:8px} .fcx ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:13px 34px} .fcx li{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:15.5px;line-height:1.45;color:var(--muted)} .fcx li i{font-style:normal;font:700 15px/1.45 var(--label);color:var(--accent);text-align:center} .fcx li b{color:var(--text);font-weight:600} @media (max-width:900px){.fcx{grid-template-columns:minmax(0,1fr);gap:20px} .fcx-stat{border-right:0;border-bottom:1px solid var(--line);padding:0 0 16px} .fcx ul{grid-template-columns:minmax(0,1fr)}} .stools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--line);border-top:3px solid var(--brass);background:var(--surface);box-shadow:var(--shadow);margin-top:14px} /* 26 October 2026. The two tool cells stretched to equal height, so the divider ran 255px past the end of the shorter Flashcards column and pointed at the emptiness. The cells now size to their own content, so the rule stops where the text does. The shorter column is shorter because that tool is in preparation and genuinely has less to say; spreading five bullets 64px apart to fill the height would be padding, not design. Recorded as the one place on the site where the honest fix is a line of real content, not CSS. */ .stools{align-items:stretch} @media (min-width:701px){ .stools>.stool{border-right:0} .stools>.stool+.stool{border-left:1px solid var(--line)} }.stool{padding:22px 24px 24px;border-right:1px solid var(--line)}.stool:last-child{border-right:0}.stool .sth{display:flex;align-items:center;gap:8px;font:600 13px var(--label);letter-spacing:.06em;text-transform:uppercase}.stool.eng .sth{color:#275084}.stool.cards .sth{color:#5E4A2E}.stool .cnt{font-family:var(--serif);font-size:34px;line-height:1.08;color:var(--accent);display:block;margin:7px 0 2px;font-variant-numeric:tabular-nums} .stool .stool-lead{margin:0 0 13px;font:500 15.5px/1.45 var(--sans);color:var(--text)} .stool .stool-lead b{font-weight:700}.stool.soon .cnt{font-size:15px;color:var(--muted);font-family:var(--sans)} .stool .soonnote{margin:0 0 9px;font-size:13.5px;line-height:1.45;color:var(--muted)}.stool ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}.stool li{font-size:14.5px;line-height:1.5;color:var(--muted);padding-left:19px;position:relative} .stool li b{color:var(--text);font-weight:600}.stool li::before{content:'';position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:0;transform:rotate(45deg)}.stool.eng li::before{background:#275084}.stool.cards li::before{background:var(--mark)}@media (max-width:700px){.stools{grid-template-columns:minmax(0,1fr)}.stool{border-right:0;border-bottom:1px solid var(--line)}.stool:last-child{border-bottom:0}}.ans-box{margin:22px 0 10px;padding:18px 22px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brass,#C9A15E);border-radius:3px}.ans-box .ans-k{font:600 12.5px var(--label);letter-spacing:.09em;text-transform:uppercase;color:var(--accent,#876723);margin:0 0 6px}.ans-box .ans-t{margin:0;font-size:17px;line-height:1.55;color:var(--text)}#learnFilter{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:none}#learnFilter button{flex:0 0 auto;width:auto;min-width:0;padding:8px 14px;font:500 14px var(--sans);background:var(--surface);border:1px solid var(--rule-2,var(--line));border-radius:999px;color:var(--text);cursor:pointer;transition:border-color .18s,background .18s}#learnFilter button:hover{border-color:var(--brass,#C9A15E)}#learnFilter button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#F4F1EA}#learnFilter button[aria-pressed="true"] .lf-n{opacity:.85}.lf-n{display:inline-block;margin-left:7px;font-size:12.5px;opacity:.72;font-variant-numeric:tabular-nums}.cfr-cite{color:inherit;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;text-decoration-color:var(--brass,#C9A15E)}.cfr-cite:hover{text-decoration-style:solid;color:var(--accent,#876723)}.cmp-head{display:grid;gap:8px;margin-bottom:18px} .cmp-head h3{font-size:clamp(24px,2.6vw,30px)} .cmp-table{background:transparent;font-size:15px} .cmp-table th,.cmp-table td{padding:13px 14px} .cmp-table thead th{background:transparent;border-bottom:2px solid var(--line);color:var(--text);font-weight:600}.cmp-table thead th+th,.cmp-table tbody td{border-left:1px solid var(--line)}.cmp-table tbody td:nth-child(2),.cmp-table thead th:nth-child(2){color:#334459}.cmp-table tbody td:nth-child(3),.cmp-table thead th:nth-child(3){color:#5E4A2E}:root[data-theme="dark"] .cmp-table tbody td:nth-child(2),:root[data-theme="dark"] .cmp-table thead th:nth-child(2){color:#CBDCEF}:root[data-theme="dark"] .cmp-table tbody td:nth-child(3),:root[data-theme="dark"] .cmp-table thead th:nth-child(3){color:#E0C69A}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cmp-table tbody td:nth-child(2),:root:not([data-theme="light"]) .cmp-table thead th:nth-child(2){color:#CBDCEF}:root:not([data-theme="light"]) .cmp-table tbody td:nth-child(3),:root:not([data-theme="light"]) .cmp-table thead th:nth-child(3){color:#E0C69A}} .cmp-table tbody th{font-family:var(--sans);font-size:14px;letter-spacing:0;text-transform:none;color:var(--text);font-weight:500;background:transparent;width:22%} .cmp-table td{color:var(--muted);width:24%} .cmp-table .us{background:color-mix(in srgb,var(--navy) 6%,transparent);color:var(--text);width:30%} .cmp-table thead .us{background:var(--navy);color:#F4F1EA} .cmp-table .us b{font-weight:600} .cmp .tbl-wrap{border:0;margin:0} /* READABLE MEASURE. Audited 2026-10-25 across 16 views with a Range-based line measurement (element width over-reports multi-column and grid children by up to 2x). The worst were unclassed paragraphs directly in .wrap at 159ch on Maintenance, 20 of them. 68ch is inside the house range already in use (62ch x11, 70ch x5, 68ch x4). Scoped to direct children so grid and card contents are untouched. */ .wrap>p{max-width:68ch}.callout{max-width:72ch}.pol-lede,.pol-short{max-width:70ch}.bp-note{max-width:62ch}.eng-why{max-width:68ch}.gr-item .gr-look,.gr-item .gr-main p{max-width:62ch}.pol-list>li{max-width:72ch} .cmp-note{font-size:13.5px;color:var(--faint);margin-top:14px} .pick{background:var(--surface);border:1px solid var(--line);padding:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-bottom:28px;align-items:start} .pick-r{grid-column:1/-1} @media (max-width:760px){.pick{grid-template-columns:minmax(0,1fr);padding:22px}} .pick-l{font-weight:500;margin-bottom:10px} .pick-r:not(:empty){grid-column:1/-1;margin-top:4px;padding-top:20px;border-top:1px solid var(--line)} .pick-o{display:flex;flex-direction:column;gap:6px} .pick-o button{text-align:left;border:1px solid var(--rule-2);background:var(--bg);color:var(--text);padding:10px 34px 10px 26px;font:14.5px var(--sans);cursor:pointer;border-radius:2px} /* SELECTED STATE, rebuilt 22 October 2026. It was carried by a 5 percent navy tint: measured, the selected fill was 1.097 against the unselected one, a ten percent luminance difference. A tint cannot do this job on a light ground at all, measured at every strength from 5 to 32 percent, the best being 1.256. So the state is now carried by FOUR cues at once: a brass bar down the left, a navy edge, a heavier weight, and a check. The left padding is reserved on every button so selecting one does not shift the text. */ .pick-o button{position:relative;transition:background .12s ease,box-shadow .12s ease} .pick-o button:hover{background:color-mix(in srgb,var(--brass) 8%,var(--bg))} .pick-o button[aria-pressed="true"]{border-color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy),inset 4px 0 0 var(--brass-deep); background:color-mix(in srgb,var(--brass) 20%,var(--bg));font-weight:600} .pick-o button[aria-pressed="true"]::after{content:"\2713";position:absolute;right:12px;top:50%; transform:translateY(-50%);font-size:14px;font-weight:700;color:#6E552F;line-height:1} .pick-r{background:var(--navy);color:#E7E2D9;padding:24px 28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 36px;align-items:center} .pick-r>.pr-main{display:grid;gap:8px} .pick-r>.pr-buy{display:grid;gap:10px;justify-items:end;text-align:right} @media (max-width:760px){.pick-r{grid-template-columns:minmax(0,1fr)}.pick-r>.pr-buy{justify-items:stretch;text-align:left}} .pick-r .eyebrow{color:var(--brass)} .pick-r h3{color:#F4F1EA;font-size:24px} .pick-r .pr{font-family:var(--serif);font-size:28px;color:#F4F1EA} .pick-r p{font-size:14.5px} @media (max-width:900px){} .close-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:56px;align-items:stretch}.close-note{align-content:start;display:grid;gap:18px;border-left:1px solid rgba(201,161,94,.42);padding-left:30px}.bridge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px);align-items:stretch;margin-top:10px}.bridge-col{display:grid;grid-template-rows:auto 1fr auto;gap:16px}.bridge-col .btn{justify-self:start}.bridge-list{list-style:none;margin:0;padding:0;display:grid;gap:15px;align-content:start}.bridge-list li{font-size:15.5px;line-height:1.6;color:#C8D2DE;padding-left:19px;position:relative}.bridge-list li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--mark);transform:rotate(45deg)}.bridge-list b{color:#F4F1EA;font-weight:600}.bridge-note{margin:38px 0 0;padding-top:18px;border-top:1px solid var(--line-on-dark);font-size:14px;line-height:1.6;color:#AEBACA;max-width:none}@media (max-width:760px){.bridge-grid{grid-template-columns:minmax(0,1fr)}}.close-books{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;background:#E3CE9C;padding:18px 18px 15px;border-top:3px solid var(--brass);color:var(--ink)}.close-books a{display:grid;gap:9px;text-decoration:none;color:#2A2F38;font:600 12.5px var(--sans)}.close-books .cover{box-shadow:0 0 0 1px rgba(24,28,36,.30),0 10px 20px rgba(0,0,0,.34);transition:transform .22s}.close-books a:hover .cover,.close-books a:focus-visible .cover{transform:translateY(-4px)}.close-trust{margin:0;font-size:14px;line-height:1.55;color:#AEBACA}.close-trust b{color:#E3C384;font-weight:600} @media (max-width:900px){.close-grid{grid-template-columns:minmax(0,1fr);gap:28px}.close-note{border-left:0;padding-left:0;border-top:1px solid rgba(201,161,94,.42);padding-top:22px}} @media (max-width:760px){.cmp{padding:22px 18px}.cmp-table{min-width:640px}} .bundle .retest{font-size:13px;color:#CFC8BD;margin-top:-4px} .fmt .best{font-style:normal;font:600 11px var(--label);letter-spacing:.01em;text-transform:none;background:var(--brass);color:#0E1A2B;padding:3px 6px;border-radius:2px;margin-left:6px;vertical-align:2px} .fmt.one{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:16px 18px;border:1px solid var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--surface)} .ship-line{font-size:13.5px;color:var(--muted);margin-top:12px} .buybar{display:none} @media (max-width:760px){ .buybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;gap:12px;align-items:center;justify-content:space-between;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--navy);color:#F4F1EA;box-shadow:0 -8px 24px rgba(0,0,0,.25)} .buybar b{display:block;font-weight:500;font-size:14px} .buybar span{font-family:var(--serif);font-size:19px} [data-view="product"]{padding-bottom:76px} } .btn-ghost.on-dark{color:#EDE8DC;border-color:#3A4D65;background:transparent} .btn-ghost.on-dark:hover{border-color:var(--brass);color:var(--brass-soft)} @media (max-width:600px){.eyebrow{font-size:12px;letter-spacing:.14em}.hero-facts span,.res-stats span,.pcard .vol,.pcard .meta,.acard .mono,.shelf small,.codes{font-size:12.5px}.tg{font-size:11px}.brand .wm span{font-size:10px}} @media (max-width:760px){ .cmp-table{min-width:0!important} .cmp-table thead{display:none} .cmp-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr);border-bottom:1px solid var(--line);padding:12px 0} .cmp-table tbody th,.cmp-table tbody td{width:auto!important;border:0;padding:4px 0;background:transparent!important} .cmp-table tbody th{font-weight:600;font-size:15px;padding-bottom:6px} .cmp-table td.us{order:1;background:color-mix(in srgb,var(--navy) 7%,transparent)!important;padding:8px 10px;margin-bottom:4px} .cmp-table td:not(.us){order:2;font-size:14px} .cmp-table td::before{content:attr(data-l)": ";font-weight:500;color:var(--faint)} .cmp-table td.us::before{color:var(--text);font-weight:600} } .hp-rows div{grid-template-columns:118px minmax(0,1fr) 92px} .hp-rows b small{font-size:12px;color:#9AA7B6;font-weight:400;margin-left:4px} .hp-small{font-size:13px;color:#AEBCCB;margin-top:-4px} .wx-go .wx-disc{font-size:12px;color:#4A5563;border-top:1px solid var(--line);padding-top:8px} .toc-m{display:none} @media (max-width:980px){.toc-m{display:block;border:1px solid var(--line);background:var(--surface);padding:12px 16px;margin:0 0 24px}.toc-m summary{cursor:pointer;font-weight:500}.toc-m .toc-list{margin-top:10px}} .prose h2,.prose h3{scroll-margin-top:100px} @media print{*{animation:none!important;transition:none!important}.view{opacity:1!important}.site-head,.buybar,.toast{position:static!important}.hero-dial{display:none}} .res-hero{padding-top:36px}.res-hero-grid{align-items:center}.res-hero .res-stats{gap:14px;grid-auto-rows:1fr} .res-hero .res-stats .rs{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:0;padding:20px 22px 18px;min-height:0;text-decoration:none;color:inherit; background:linear-gradient(155deg,#1C3150 0%,#15263D 55%,#111F33 100%);border:1px solid rgba(176,141,87,.30);border-radius:4px; box-shadow:inset 0 1px 0 rgba(217,196,158,.14),0 10px 28px -14px rgba(0,0,0,.6);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease} .res-hero .res-stats .rs::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,#C9A15E,#E6CFA0 50%,#C9A15E);opacity:.85} .rs .rs-ring{position:absolute;z-index:0;right:-54px;bottom:-54px;width:148px;height:148px;color:#E6CF9E;opacity:.20;transition:transform .7s cubic-bezier(.2,.7,.3,1),opacity .35s ease;pointer-events:none} .res-hero .res-stats .rs .rs-top{background:none;border:0;padding:0;display:flex;align-items:center;justify-content:space-between;margin-bottom:6px} .rs .rs-ic{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:rgba(176,141,87,.16);border:1px solid rgba(176,141,87,.38);color:#E6CFA0} .rs .rs-ic svg{width:15px;height:15px} .rs .rs-go{font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.01em;text-transform:none;color:#D9C49E;opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .25s} .res-hero .res-stats .rs b{font-family:var(--serif);font-weight:400;font-size:clamp(46px,4.4vw,60px);line-height:1;color:#F1DDB2;letter-spacing:-.01em;text-shadow:0 2px 18px rgba(230,207,160,.18)} .res-hero .res-stats .rs span{font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.01em;text-transform:none;color:#E9E3D6;margin-top:10px} .rs .rs-sub{font-size:13px;line-height:1.45;color:#CFC8BD;margin:6px 0 0;position:relative}.res-hero .res-stats .rs>b,.res-hero .res-stats .rs>span,.res-hero .res-stats .rs>.rs-top,.res-hero .res-stats .rs>.rs-sub{position:relative;z-index:1} .res-hero .res-stats .rs:hover,.res-hero .res-stats .rs:focus-visible{transform:translateY(-3px);border-color:rgba(217,196,158,.75);box-shadow:inset 0 1px 0 rgba(217,196,158,.2),0 16px 34px -14px rgba(0,0,0,.7)} .rs:hover .rs-go,.rs:focus-visible .rs-go{opacity:1;transform:none} .rs:hover .rs-ring{transform:rotate(48deg) scale(1.24);opacity:.16}.rs:focus-visible .rs-ring{transform:rotate(48deg) scale(1.24);opacity:.16} @media (max-width:600px){.res-hero{padding-top:14px}.res-hero .res-stats{gap:10px}.res-hero .res-stats .rs{padding:16px 14px 14px;min-height:0}.res-hero .res-stats .rs b{font-size:42px}.rs .rs-sub{font-size:12.5px}.rs .rs-go{display:none}.res-hero .res-stats .rs span{font-size:10.5px;letter-spacing:.12em}} @media (prefers-reduced-motion:reduce){.res-hero .res-stats .rs,.rs .rs-ring,.rs .rs-go{transition:none}} .dg-hero{background:var(--navy);color:#EDE8DC;padding:36px 0 120px} .dg-hero .eyebrow{color:var(--brass);margin-top:18px} .dg-hero h1{font-size:clamp(34px,4.6vw,56px);font-weight:400;line-height:1.08;color:#F4F1EA;margin:12px 0 14px;max-width:18ch} .dg-hero .lede{color:#CFC8BD;max-width:62ch} .dg{position:relative;margin:-84px auto 96px;max-width:880px} .dg-card{background:var(--surface);border:1px solid var(--rule);box-shadow:0 18px 44px -24px rgba(14,26,43,.45);padding:34px 36px;border-radius:4px} .dg-card h2{font-size:clamp(24px,2.6vw,30px);font-weight:400;margin:0 0 6px} .dg-setup{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:36px} .dg-days{margin-top:16px;padding:16px 18px;border-left:3px solid var(--brass);background:color-mix(in srgb,var(--brass) 8%,var(--surface))} .dg-days b{font-family:var(--serif);font-weight:400;font-size:40px;line-height:1;color:var(--text);display:block} .dg-days span{font-size:14px;color:var(--muted)} .dg-check{display:flex;gap:10px;align-items:center;font-size:14.5px;margin-top:12px;min-height:24px} .dg-check input{width:18px;height:18px;accent-color:var(--navy)} .dg-get{list-style:none;margin:0;padding:0;display:grid;gap:14px;font-size:14.5px} .dg-get li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start} .dg-get li::before{content:"";width:12px;height:1px;background:var(--mark);margin-top:.8em;flex:none} .dg-note{font-size:13px;color:var(--muted);margin-top:18px;line-height:1.5} .dg-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:24px} .dg-prog{display:flex;justify-content:space-between;gap:12px;font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.01em;text-transform:none;color:var(--muted)} .dg-bar{height:4px;background:var(--rule);border-radius:2px;margin:10px 0 26px;overflow:hidden} .dg-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brass-deep),var(--brass));transition:width .3s ease} .dg-q{font-family:var(--serif);font-size:clamp(21px,2.3vw,26px);line-height:1.35;margin:0 0 22px;font-weight:400} .dg-opts{display:grid;gap:10px;border:0;padding:0;margin:0} .dg-opt{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;padding:14px 16px;border:1px solid var(--rule-2);border-radius:3px;cursor:pointer;font-size:15.5px;transition:border-color .15s,background .15s} .dg-opt:hover{border-color:var(--brass)} .dg-opt input{position:absolute;opacity:0;pointer-events:none} .dg-opt .l{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--rule-2);font:600 13px var(--mono);color:var(--muted)} .dg-opt:has(input:checked){border-color:var(--navy);background:color-mix(in srgb,var(--navy) 5%,var(--surface))} .dg-opt:has(input:checked) .l{background:var(--navy);border-color:var(--navy);color:#F4F1EA} .dg-opt:has(input:focus-visible){outline:2px solid var(--fring-out);outline-offset:2px;box-shadow:var(--fring-in)} .dg-res{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}.dg-res .hero-panel{align-content:start} .dg-res .hero-panel{background:var(--navy);border-color:#2A4774;border-radius:4px} .dg-res .hp-score b{font-size:52px} .dg-res .hp-score .hp-pass.no{background:#F2A65A} .dg-plan{display:grid;gap:0;list-style:none;margin:14px 0 0;padding:0} .dg-plan li{display:grid;grid-template-columns:132px 1fr;gap:14px;padding:13px 0;border-top:1px solid var(--rule);font-size:14.5px} .dg-plan li:first-child{border-top:0} .dg-plan .when{font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.01em;text-transform:none;color:var(--accent-strong);padding-top:3px} .dg-plan b{display:block;font-weight:600;margin-bottom:2px} .dg-plan span{color:var(--muted)} .dg-plan li.weak b::after{content:"Missed on diagnostic";margin-left:8px;font:600 11px var(--label);letter-spacing:.01em;text-transform:none;color:#7F4A12;background:#FBE6CF;padding:2px 6px;border-radius:3px;vertical-align:2px} .dg-alert{margin-top:16px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--warn) 40%,var(--rule));background:color-mix(in srgb,var(--warn) 7%,var(--surface));font-size:14px;border-radius:3px} .dg-review{margin-top:18px} .dg-review details{border-top:1px solid var(--rule);padding:14px 0} .dg-review summary{cursor:pointer;display:grid;grid-template-columns:26px 1fr;gap:10px;font-size:15px;list-style:none} .dg-review summary::-webkit-details-marker{display:none} .dg-review .mk{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:700;color:#fff;background:#2F7A57} .dg-review .mk.x{background:#B4561C} .dg-review .ans{margin:10px 0 0 36px;font-size:14.5px;display:grid;gap:6px} .dg-review .ans cite{font-style:normal;font-size:13px;color:var(--muted)} .dg-cta{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:center;max-width:880px;margin:0 auto 34px;padding:16px 20px;background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--brass);border-radius:3px;text-decoration:none;color:var(--text);font-size:15px;transition:border-color .2s,transform .2s} .dg-cta:hover{border-color:var(--brass);transform:translateY(-1px)} .dg-cta-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--navy);color:#E6CFA0;font-weight:700} .dg-cta-go{font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:.01em;text-transform:none;color:var(--accent-strong);white-space:nowrap} @media (max-width:760px){.dg-setup,.dg-res{grid-template-columns:minmax(0,1fr)}.dg-card{padding:24px 18px}.dg{margin-top:-96px}.dg-plan li{grid-template-columns:minmax(0,1fr);gap:4px}.dg-cta{grid-template-columns:36px minmax(0,1fr)}.dg-cta-go{grid-column:2}} .dg-res .hero-panel a{color:#D9C49E} @media (max-width:600px){.dg-res .hp-rows div{grid-template-columns:96px minmax(0,1fr) 78px;gap:10px}} @media print{.dg-hero{padding:0}.dg{margin:0}} .res-jump a[aria-current="page"]{color:var(--text);font-weight:600;box-shadow:inset 0 -2px 0 var(--brass);padding-bottom:4px} .res-focus .res-sec{padding-top:36px} .res-focus .res-sec .res-head .eyebrow{display:none} .res-focus .res-stats{display:none} .res-focus .res-hero{padding-bottom:36px} .res-focus .res-hero-grid{grid-template-columns:minmax(0,1fr)} /* ==== 5.92 HERO HEADS FILLING HALF A BAND, 28 October 2026 ==== OWNER photographed TFRs, Flight Weather, Missed Codes, Over People, Reference Shelf and Study Articles, all "unbalanced". One cause, six routes. MEASURED: ink filled 0.57 to 0.66 of a 1132px band, 383 to 485px dead right. .res-focus already collapses this hero to a single track and hides the stat tiles, so the head owns the whole band -- and then stacked eyebrow, headline and lede down the left of it. A full-width box is not a filled box. WHY THREE EARLIER ATTEMPTS CHANGED NOTHING, recorded because the lesson is the point: I keyed the fix on :not(:has(>.res-stats)), but .res-stats is in the DOM on these routes WITH four tiles in it, merely collapsed to 0x0 by this rule. :has() sees the element, not whether it renders. :empty does not help either, because the container holds whitespace text nodes. A JS normalizer then failed silently because it was declared in a script scope where nothing could call it, and the page threw no error at all. The condition was already in the markup the whole time: .res-focus. Keying on the class that ALREADY distinguishes these pages needs no JS and cannot drift. FIX: the head sets as the site's editorial masthead, eyebrow and headline left, lede right on the baseline, so the band is filled with content. */ .res-focus .res-hero-grid>.res-hero-head{display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); column-gap:clamp(36px,4.4vw,72px);row-gap:12px;align-items:end} .res-focus .res-hero-grid>.res-hero-head>.crumbs{grid-column:1/-1;grid-row:1} .res-focus .res-hero-grid>.res-hero-head>.eyebrow{grid-column:1;grid-row:2} .res-focus .res-hero-grid>.res-hero-head>h1{grid-column:1;grid-row:3;margin:0} .res-focus .res-hero-grid>.res-hero-head>.lede{grid-column:2;grid-row:2/span 2; align-self:end;margin:0 0 6px;max-width:48ch} .res-focus .res-hero-grid>.res-hero-head>*:not(.crumbs):not(.eyebrow):not(h1):not(.lede){grid-column:1/-1} @media (max-width:900px){ .res-focus .res-hero-grid>.res-hero-head{grid-template-columns:minmax(0,1fr)} .res-focus .res-hero-grid>.res-hero-head>*{grid-column:1!important;grid-row:auto!important;align-self:auto}} .res-focus .res-hero h1{font-size:clamp(34px,4.2vw,52px)} .res-more{margin:56px 0 96px;padding-top:28px;border-top:1px solid var(--line)} .res-more h2{font-size:24px;font-weight:400;margin:0 0 16px} .res-more-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:12px} .res-more-grid a{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:3px;align-items:start;padding:16px 18px;border:1px solid var(--rule);background:var(--surface);text-decoration:none;color:var(--text);border-radius:3px;transition:border-color .2s} .res-more-grid a:hover{border-color:var(--brass)} .res-more-grid b{font-weight:600;font-size:15px;grid-column:2} .res-more-grid span{font-size:13.5px;color:var(--muted);grid-column:2} /* the mark sits in its own column and spans both rows, so a two-line title never pushes the description out from under it */ .res-more-grid .tool-ic{grid-column:1;grid-row:1/span 2;width:22px;height:22px;flex:none; color:#8A6C40;margin-top:1px} .res-more-grid a:hover .tool-ic{color:#A8823F} .res-more-grid a.more-app{grid-template-columns:auto 1fr} .res-more-grid a.more-app .tool-ic{color:#E6CF9E} [data-count]{font-variant-numeric:tabular-nums} .grow{transform-origin:left center;transition:transform .8s cubic-bezier(.2,.7,.2,1)} .grow-pre{transform:scaleX(0)} @media (prefers-reduced-motion:reduce){.grow{transition:none}.grow-pre{transform:none}} .doc-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:44px} .shelf-h{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--line)} .shelf-h h3{font-family:var(--serif);font-weight:400;font-size:24px;margin:0;display:flex;align-items:baseline;gap:10px} .shelf-h h3 .num{font:600 13px var(--label);color:var(--faint);letter-spacing:.01em} .shelf-h p{margin:0;font-size:14.5px;color:var(--muted)} .doc-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .doc-grid .doc{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:20px 22px 18px 26px;min-height:150px;border:1px solid var(--line);border-radius:3px;background:var(--surface);text-align:left;cursor:pointer;font:inherit;color:inherit;transition:border-color .2s,box-shadow .2s,transform .2s} .doc-grid .doc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--sp);border-radius:3px 0 0 3px} .doc-grid .doc:hover,.doc-grid .doc:focus-visible{border-color:var(--rule-2);box-shadow:0 10px 24px -16px rgba(14,26,43,.45);transform:translateY(-2px)} .doc-grid .doc-no{font:600 12px var(--label);letter-spacing:.01em;text-transform:none;color:var(--accent)} .doc-grid .doc b{font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.3;} .doc-grid .doc-foot{margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12.5px;color:var(--faint)} .doc-grid .doc-for .more{color:var(--muted);font-weight:500} .doc-grid .st{margin:0;font-size:12px;white-space:nowrap;color:var(--faint);display:inline-flex;gap:4px} .doc-grid .st.ok{color:var(--good)}.doc-grid .st.w{color:var(--warn);font-weight:500} @media (max-width:1020px){.doc-row{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.doc-row{grid-template-columns:minmax(0,1fr);gap:12px}.doc-grid{gap:36px}.doc-grid .doc{min-height:0;padding:16px 16px 14px 20px}.doc-grid .doc b{font-size:17px}.shelf-h{display:grid;gap:4px}} @media (prefers-reduced-motion:reduce){.doc-grid .doc{transition:none}.doc-grid .doc:hover{transform:none}} .shelf-g.capped .doc-row .doc:nth-child(n+7){display:none} .shelf-more{margin-top:16px;background:none;border:1px solid var(--rule-2);padding:10px 18px;font:500 14px var(--sans);color:var(--text);cursor:pointer;border-radius:2px;min-height:44px} .shelf-more:hover{border-color:var(--brass)} h1,h2,h3,.dg-q,.hero-panel .hp-next b{text-wrap:balance} p,li,dd{text-wrap:pretty} .res-head{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:start;margin-bottom:30px;max-width:780px} .res-head h2{margin-top:6px;font-size:clamp(28px,3.2vw,38px);line-height:1.15} .res-head>p{max-width:64ch;font-size:16px;line-height:1.6} .res-sec{padding-top:72px} .res-sec+.res-sec{border-top:1px solid var(--line);margin-top:24px} .res-focus .res-sec+.res-sec{border-top:0;margin-top:0} .shelf-h{display:grid;gap:4px;justify-content:start} .shelf-h p{max-width:64ch} .calc-tabs{border-radius:3px;overflow:hidden} .calc-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px} .calc-tabs .dot{width:9px;height:9px;border-radius:50%;background:var(--cc)} .calc-tabs button[aria-selected="true"] .dot{box-shadow:0 0 0 2px rgba(255,255,255,.7)} [data-cg="Flight"]{--cc:#2F5D8A;--cct:#244B72;--ccbg:#E8EEF5} [data-cg="Currency"]{--cc:#C9A15E;--cct:#735630;--ccbg:#F3ECDF} [data-cg="Maintenance"]{--cc:#3F6B5B;--cct:#2F5546;--ccbg:#E6EFEA} .calc-grid{columns:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:48px} .calc-set-h{display:grid;gap:4px;margin-bottom:16px;padding-left:14px;border-left:4px solid var(--cc)} .calc-set-h h3{font-family:var(--serif);font-weight:400;font-size:24px;margin:0;display:flex;gap:10px;align-items:baseline} .calc-set-h h3 .num{font:600 13px var(--label);color:var(--faint);letter-spacing:.01em} .calc-set-h p{margin:0;color:var(--muted);font-size:14.5px} .calc-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch} .calc-row .calc{margin:0;position:relative;display:flex;flex-direction:column;gap:12px;border-radius:3px;border-top:4px solid var(--cc);padding:22px 22px 20px} .calc-row .calc .eyebrow{color:var(--cct)!important} .calc-row .calc .out{border-left-color:var(--cc);background:var(--ccbg);color:#1B2530} .calc-row .calc .out .row span:first-child{color:#4A5563} .calc-row .calc .note{margin-top:-2px} .calc-row .calc .c-for{margin-top:auto;font-size:12.5px;color:var(--faint);border-top:1px solid var(--line);padding-top:10px} .calc-row .calc .c-for .more{color:var(--muted);font-weight:500} @media (max-width:1020px){.calc-row{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.calc-row{grid-template-columns:minmax(0,1fr);gap:14px}.calc-grid{gap:36px}.calc-row .calc{padding:18px 16px}} :root[data-theme="dark"] [data-cg]{--ccbg:#18293D} :root[data-theme="dark"] .calc-row .calc .out{color:var(--text)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-cg]{--ccbg:#18293D}:root:not([data-theme="light"]) .calc-row .calc .out{color:var(--text)}:root:not([data-theme="light"]) .calc-row .calc .out .row span:first-child{color:var(--muted)}:root:not([data-theme="light"]) .calc-row .calc .eyebrow{color:var(--cc)!important}} .wx-side>*{grid-column:1/-1!important} .gl .term{padding:18px 0;gap:6px} .gl dt{font-size:20px;font-weight:400} .gl dd{font-size:15px;line-height:1.65;max-width:62ch} .gl .letter{font:400 28px var(--serif);letter-spacing:0;color:var(--accent);padding:26px 0 8px;border-bottom:2px solid color-mix(in srgb,var(--brass) 45%,transparent)} .gl .letter:first-child{padding-top:6px} #glMore{display:block;margin-top:22px} .off-grid{gap:18px} .off{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:3px;border-top:4px solid var(--navy)} .off b{font-family:var(--serif);font-weight:400;font-size:20px} .off p{margin:0;line-height:1.55} .off .c-for{font-size:12.5px;color:var(--faint);margin-top:auto} .off .c-for .more{color:var(--muted);font-weight:500} /* ==== 6.14 THE ACTION WAS THE WEAKEST THING ON THE CARD. 28 October 2026 ==== Owner, twice on this page: "is this too much white? the human eye tends to see too much white and skips over much of this", and separately "should these stick out more? maybe different color or shade?" MEASURED across all 84 routes: res-official is 34.1% near-white hueless pixels against a site MEDIAN of 15.0% -- the second whitest page on the site. Six identical white cards, and the PRIMARY ACTION on each was a white ghost button ON a white card, held together by a 1px hairline. The thing a visitor came to click was the lowest-contrast element in front of them. NOT six colors: these are six destinations, and FAA DOT/FAA/AM-07/10 caps data-category colors at "FEWER THAN SEVEN" with "FEWER THAN FIVE" distracter colors. Six loud cards is the condition where nothing pops. Instead ONE vivid element per card -- the action -- which is the same quiet-ground/vivid-figure rule used on the weather icons in 6.06. #14305C reads 13.07:1 against the card for both its boundary (SC 1.4.11 needs 3:1) and its label (SC 1.4.3 needs 4.5:1), and every button removes its own area from the white total. */ .off .off-go{margin-top:4px;align-self:flex-start;display:inline-flex;gap:6px;align-items:center;padding:10px 16px;min-height:44px;border:1px solid var(--brass);background:#14305C;border-radius:2px;text-decoration:none;color:#FFFFFF;font-size:14px;font-weight:500} .off .off-go:hover{background:#0D2244;border-color:#0D2244;color:#FFF0CC} .sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media (max-width:1020px){.off-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.off-grid{grid-template-columns:minmax(0,1fr)}} .res-promise{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;color:#D9DFE6} .res-promise li{display:inline-flex;align-items:center;gap:8px} .res-promise li::before{content:"";width:10px;height:1px;background:var(--mark);flex:none} [data-shelf="std"]{--sp:#1F3A5F}[data-shelf="reg"]{--sp:#8A6C40}[data-shelf="hb"]{--sp:#3F6B5B}[data-shelf="ref"]{--sp:#5E6B80} .doc-tools{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-end;margin-bottom:28px;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:4px} .doc-q{flex:1 1 280px;max-width:420px} .doc-types{display:flex;flex-wrap:wrap;gap:8px} .doc-types button{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 14px;border:1px solid var(--rule-2);border-radius:999px;background:transparent;font:500 14px var(--sans);color:var(--text);cursor:pointer} .doc-types button .c{color:var(--faint);font-weight:400} .doc-types button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#F4F1EA} .doc-types button[aria-pressed="true"] .c{color:#CFC8BD} .doc-types .dot,.shelf-h .dot,.doc-key .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--sp)} .shelf-h h3 .dot{width:11px;height:11px;align-self:center} .doc-count{font-size:13.5px;color:var(--faint);margin:0 0 14px} .rlist{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px;align-items:center;padding:22px 24px;margin-bottom:34px;background:var(--navy);color:#DCE2E8;border-radius:4px} .rlist .eyebrow{color:var(--brass)}.rlist h3{font-family:var(--serif);font-weight:400;font-size:26px;color:#F4F1EA;margin:6px 0} .rlist p{margin:0;font-size:14.5px;color:#CFC8BD;max-width:60ch} .rl-prog{display:grid;gap:8px}.rl-prog b{font-weight:500;color:#F4F1EA} .rl-bar{display:block;height:10px;border-radius:5px;background:rgba(244,241,234,.12);overflow:hidden} .rl-bar i{display:block;height:100%;background:linear-gradient(90deg,#2F6B4F,#5E9C7E);border-radius:0;transition:width .5s ease} .rl-note{font-size:12px;color:#B1AAA0} .rl-mini{font-size:14px;color:var(--muted);margin:-8px 0 26px} .linkish{background:none;border:0;padding:0;font:inherit;color:var(--accent-strong);text-decoration:underline;cursor:pointer} .doc-grid .doc{display:grid;grid-template-columns:66px minmax(0,1fr);gap:16px;align-items:start;padding:18px 18px 16px;min-height:0;cursor:default;text-align:left} .doc-grid .doc::before{display:none} .doc-grid .doc:hover,.doc-grid .doc:focus-within{border-color:var(--rule-2);box-shadow:0 12px 26px -18px rgba(14,26,43,.5);transform:translateY(-2px)} .cov{position:relative;width:66px;height:86px;border-radius:2px 4px 4px 2px;background:linear-gradient(160deg,color-mix(in srgb,var(--sp) 88%,#fff) 0%,var(--sp) 60%);box-shadow:inset 4px 0 0 rgba(0,0,0,.18),0 6px 14px -8px rgba(14,26,43,.6);display:flex;flex-direction:column;justify-content:space-between;padding:8px 7px 7px 10px;color:#F4F1EA;overflow:hidden} .cov::after{content:"";position:absolute;left:10px;right:7px;top:22px;height:1px;background:rgba(244,241,234,.45)} .cov-k{font:600 9.5px var(--label);letter-spacing:.01em;opacity:.95} .cov-n{font:500 9.5px var(--mono);line-height:1.25;letter-spacing:0;overflow-wrap:anywhere} .cov-ck{position:absolute;right:5px;top:5px;width:16px;height:16px;border-radius:50%;background:#6FC39A;color:#0E1A2B;font-size:10px;font-weight:700;display:grid;place-items:center} .doc-body{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:100%} .start{align-self:flex-start;font:600 11px var(--label);letter-spacing:.01em;text-transform:none;color:#0E1A2B;background:#E6CFA0;padding:3px 7px;border-radius:3px} .doc-open{all:unset;cursor:pointer;display:block} .doc-open::after{content:"";position:absolute;inset:0;z-index:1} .doc-open:focus-visible{outline:none}.doc:has(.doc-open:focus-visible){outline:2px solid var(--fring-out);outline-offset:2px;box-shadow:var(--fring-in),0 10px 24px -16px rgba(14,26,43,.45)} .doc-open b{font-family:var(--serif);font-weight:400;font-size:17.5px;line-height:1.3;color:var(--text)} .doc:hover .doc-open b{color:var(--accent-strong)} /* 6.13, 28 October 2026: the 3-line clamp was removed from the DOCUMENT TITLES (.doc-grid .doc b and .doc-open b). A clip sweep across all 84 routes found 21 clipped text elements, all on res-shelf, and the clamp was truncating official FAA document titles: "Remote Pilot - Small Unmanned Aircraft Systems Airman Certification..." dropped the word STANDARDS, and "Aviation Mechanic General, Airframe, and Powerp..." lost its own subject. A visitor uses these titles to FIND the document on faa.gov; a truncated title is not findable. The grid equalises row heights anyway, so nothing shifts. The DESCRIPTION clamp below stays: that is a summary, and its ellipsis reads as "there is more". */ .doc-what{font-size:13.5px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .doc-grid .doc-foot{margin-top:auto;padding-top:8px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:var(--faint)} .doc-for{font-family:var(--mono);font-size:11px;letter-spacing:.03em;min-width:0} .rd{position:relative;z-index:2;flex:none;min-height:32px;padding:5px 11px;border:1px solid var(--rule-2);border-radius:999px;background:var(--surface);font:500 12.5px var(--sans);color:var(--muted);cursor:pointer} .rd:hover{border-color:var(--good);color:var(--good)} .rd[aria-pressed="true"]{background:color-mix(in srgb,var(--good) 12%,var(--surface));border-color:var(--good);color:var(--good)} .doc.is-read .doc-open b{color:var(--muted)} .doc-grid .st{font-family:var(--sans);font-size:12px} @media (max-width:760px){.rlist{grid-template-columns:minmax(0,1fr);gap:16px;padding:18px}.doc-tools{padding:14px}.doc-q{max-width:none}} @media (max-width:640px){.doc-grid .doc{grid-template-columns:52px minmax(0,1fr);gap:14px;padding:16px 14px}.cov{width:52px;height:70px}.cov-n{font-size:9px}} .doc-key{display:flex;flex-wrap:wrap;gap:8px 20px;margin:18px 0 0;font-size:13px;color:var(--muted)}.doc-key span{display:inline-flex;align-items:center;gap:7px} .res-focus .res-sec>.res-head{display:none} .res-focus .res-sec{padding-top:28px} :root[data-theme="dark"] .doc-types button[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:#0E1A2B} :root[data-theme="dark"] .doc-types button[aria-pressed="true"] .c{color:#2A3442} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .doc-types button[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:#0E1A2B}:root:not([data-theme="light"]) .doc-types button[aria-pressed="true"] .c{color:#2A3442}:root:not([data-theme="light"]) .rlist{background:#16263B}} .res-hub{padding:40px 0 96px} .res-hub-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} .hub-card{display:flex;flex-direction:column;gap:10px;padding:26px 26px 22px;min-height:196px;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--brass);border-radius:4px;text-decoration:none;color:var(--text);transition:transform .2s,box-shadow .2s,border-color .2s} .hub-card:hover,.hub-card:focus-visible{transform:translateY(-3px);box-shadow:0 16px 30px -20px rgba(14,26,43,.55);border-color:var(--rule-2);border-top-color:var(--brass)} .hub-card:focus-visible{box-shadow:var(--fring-in),0 16px 30px -20px rgba(14,26,43,.55)} .hub-n{font-family:var(--serif);font-size:24px;line-height:1.2} .hub-d{font-size:14.5px;line-height:1.55;color:var(--muted)} .hub-f{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--line)} .hub-c{font:600 12.5px var(--label);letter-spacing:.01em;text-transform:none;color:var(--accent)} .hub-go{white-space:nowrap;font-size:14px;font-weight:500;color:var(--accent-strong);transition:transform .2s} .hub-card:hover .hub-go{transform:translateX(3px)} .hub-dg{background:var(--navy);border-color:var(--navy);color:#F4F1EA} .hub-dg .hub-d{color:#CFC8BD}.hub-dg .hub-c{color:#D9C49E}.hub-dg .hub-go{color:#E6CFA0}.hub-dg .hub-f{border-top-color:#2A4774} @media (max-width:1180px){.res-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.res-hub-grid{grid-template-columns:minmax(0,1fr);gap:12px}.hub-card{min-height:0;padding:20px 18px 16px}.hub-n{font-size:21px}} .res-jump{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--hh,74px));z-index:20;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);padding-block:14px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none} .res-jump::-webkit-scrollbar{display:none} .res-jump a{white-space:nowrap} @media (max-width:760px){.res-jump{gap:18px;padding-block:10px;margin-inline:-24px;padding-inline:24px}} /* FULL-BLEED GUTTER MATCH. The bleed above cancels .wrap's 24px gutter, but .wrap drops to 18px at 600px, so below that this nav overhung the viewport by 6px on each side. It was invisible because html,body{overflow-x:clip} clips the overhang, and clip never creates a scroll container, so a scrollWidth check could not have caught it either. Measured on the published file with overflow-x forced visible: nav left -6px and right viewport+6px at 360 and 430px, 0px at 700 to 760px where the gutter is still 24px. */ @media (max-width:600px){.res-jump{margin-inline:-18px;padding-inline:18px}} .to-top{position:fixed;right:18px;bottom:18px;z-index:40;width:46px;height:46px;border-radius:50%;border:1px solid var(--edge);background:var(--surface);color:var(--text);box-shadow:0 8px 20px -10px rgba(14,26,43,.5);display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .25s,transform .25s} .to-top.on{opacity:1;pointer-events:auto;transform:none} .to-top:hover{border-color:var(--brass)} body:has(.buybar:not([hidden])) .to-top{bottom:88px} @media (prefers-reduced-motion:reduce){.hub-card,.to-top,.hub-go{transition:none}} .res-filter{position:relative;top:auto;z-index:1} .air-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 20px;align-items:center;margin-bottom:10px} .air-locs,.air-view{display:flex;flex-wrap:wrap;gap:8px} .air-locs button,.air-view button{min-height:40px;padding:8px 14px;border:1px solid var(--rule-2);border-radius:999px;background:transparent;font:500 14px var(--sans);color:var(--text);cursor:pointer} .air-locs button[aria-pressed="true"],.air-view button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#F4F1EA} .air-sample{font-size:13px;color:var(--warn);margin:4px 0 20px} .air-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;margin-bottom:34px} .air-mapcard{background:var(--navy);border-radius:6px;padding:20px 22px;color:#DCE2E8;display:grid;gap:12px} .air-map-h{display:grid;gap:2px}.air-map-h .eyebrow{color:var(--brass)}.air-map-h b{font-family:var(--serif);font-weight:400;font-size:22px;color:#F4F1EA} .air-map{width:100%;max-width:380px;justify-self:center;height:auto} .air-key{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:#CFC8BD} .air-key li{display:inline-flex;align-items:center;gap:7px}.air-key i{width:11px;height:11px;border-radius:50%;display:inline-block} .air-verdict{border-radius:6px;padding:22px 24px;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:10px;border-left:5px solid var(--good)} .air-verdict.bad{border-left-color:#B3261E;background:color-mix(in srgb,#B3261E 6%,var(--surface))} .air-verdict b{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2} .air-verdict p{margin:0;color:var(--muted);font-size:14.5px} .air-steps{margin:6px 0 0;padding-left:20px;display:grid;gap:8px;font-size:14px;line-height:1.5} .air-steps b{font-family:var(--sans);font-size:14px;font-weight:600} .air-h{font-family:var(--serif);font-weight:400;font-size:24px;margin:0 0 14px} .air-tfrs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:36px} .tfr{background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--tc);border-radius:4px;padding:20px 22px;display:flex;flex-direction:column;gap:10px} .tfr header{display:flex;justify-content:space-between;gap:10px;align-items:center} .tfr-type{font:600 12px var(--label);letter-spacing:.01em;text-transform:none;color:var(--tc)} .tfr-st{font:600 12.5px var(--label);letter-spacing:.01em;text-transform:none;padding:3px 8px;border-radius:3px;background:var(--paper-2);color:var(--muted);white-space:nowrap} .tfr-st.on{background:#B3261E;color:#fff} .tfr h4{font-family:var(--serif);font-weight:400;font-size:20px;margin:0;line-height:1.25} .tfr-id{display:block;font:500 12.5px var(--mono);color:var(--faint);margin-top:3px} .tfr-dl{margin:0;display:grid;gap:6px;font-size:14px} .tfr-dl div{display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px} .tfr-dl dt{color:var(--faint);font-size:12.5px;padding-top:1px}.tfr-dl dd{margin:0} .tfr-why{margin:0;font-size:14px;color:var(--muted);line-height:1.55} .tfr-drone{margin:auto 0 0;padding:10px 12px;border-radius:3px;font-size:14px;background:color-mix(in srgb,var(--good) 10%,var(--surface));color:var(--good)} .tfr-drone.bad{background:color-mix(in srgb,#B3261E 9%,var(--surface));color:#9A2019} .ntm-raw{margin:0;padding:10px 12px;background:#0E1A2B;color:#E6CFA0;font:12.5px/1.5 var(--mono);border-radius:3px;white-space:pre-wrap;word-break:break-word} .ntms{display:grid;gap:12px;margin-bottom:36px} /* ==== 5.69 THE NOTAM KEY COLUMN, 27 October 2026 ==== Detector: minFill 0.29 on cell 1. The key column was 150px while the keys in use are Aerodrome, Airport, Airspace, Apron, Obstacle, Other, Runway and Taxiway -- the longest, "Aerodrome", renders about 75px. So every row carried at least 75px of hole between the key and its body, and "Apron" carried 110. NOT fit-content here, deliberately: each .ntm is its own grid, so fit-content would size every row to its OWN key and the keys would stop aligning down the column, which is worse than the hole. A fixed track is right; it was simply set almost twice as wide as the content it was built for. */ .ntm{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:start;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--nc);border-radius:4px} .ntm-k{font:600 12px var(--label);letter-spacing:.01em;text-transform:none;color:var(--nc);padding-top:3px} .ntm-b{display:grid;gap:6px} .ntm-en{margin:0;font-size:15.5px;line-height:1.5}.ntm-en.big{font-family:var(--serif);font-size:20px;line-height:1.35} .ntm-w{margin:0;font-size:13px;color:var(--faint);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center} .ntm-tip{margin:0;font-size:13.5px;color:var(--muted);border-top:1px dashed var(--rule-2);padding-top:8px} .air-dec{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px 28px;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:6px;margin-bottom:36px} .air-dec>div:first-child{grid-row:span 3} .air-dec h3{font-family:var(--serif);font-weight:400;font-size:24px;margin:6px 0} .air-dec p{margin:0;color:var(--muted);font-size:14.5px} .air-dec textarea{font:13.5px/1.5 var(--mono)} .air-dec-btns{display:flex;flex-wrap:wrap;gap:8px} .ntm-out{border-left:3px solid var(--brass);padding:12px 16px;background:var(--paper-2);border-radius:0 3px 3px 0;display:grid;gap:10px} .ntm-hint{color:var(--faint);font-size:14px;margin:0} .ntm-parts{margin:0;display:grid;gap:6px;font-size:13.5px} .ntm-parts div{display:grid;grid-template-columns:minmax(90px,auto) minmax(0,1fr);gap:12px} .ntm-parts dt code{font:12.5px var(--mono);background:#0E1A2B;color:#E6CFA0;padding:2px 6px;border-radius:3px}.ntm-parts dd{margin:0;color:var(--muted)} .air-links{display:grid;gap:12px;margin-bottom:12px} .air-links>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .air-links a{display:grid;gap:3px;padding:14px 16px;border:1px solid var(--rule-2);border-radius:4px;text-decoration:none;color:var(--text);background:var(--surface)} .air-links a:hover{border-color:var(--brass)}.air-links a b{font-weight:600;font-size:14.5px}.air-links a span{font-size:13px;color:var(--muted)} @media (max-width:1020px){.air-top,.air-dec{grid-template-columns:minmax(0,1fr)}.air-dec>div:first-child{grid-row:auto}.air-links>div{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.air-tfrs{grid-template-columns:minmax(0,1fr)}.ntm{grid-template-columns:minmax(0,1fr);gap:6px}.air-links>div{grid-template-columns:minmax(0,1fr)}.tfr,.air-verdict,.air-mapcard,.air-dec{padding:18px 16px}} :root[data-theme="dark"] .tfr-drone.bad{color:#F2A0A0} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tfr-drone.bad{color:#F2A0A0}:root:not([data-theme="light"]) .air-locs button[aria-pressed="true"],:root:not([data-theme="light"]) .air-view button[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:#0E1A2B}} .air-verdict.soon{border-left-color:#C8621A;background:color-mix(in srgb,#C8621A 6%,var(--surface))} .res-quick{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px} .res-quick span{font:600 12px var(--label);letter-spacing:.01em;text-transform:none;color:#B1AAA0;margin-right:4px} .res-quick a{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border:1px solid #3A4D65;border-radius:999px;color:#F4F1EA;text-decoration:none;font-size:14px;font-weight:500;transition:border-color .2s,background .2s} .res-quick a:hover{border-color:var(--brass);background:rgba(176,141,87,.12)} .gear-wrap{margin-top:-84px;position:relative;padding-bottom:96px} .gear-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .gear-card{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:22px 24px;display:flex;flex-direction:column;gap:8px;box-shadow:0 14px 30px -24px rgba(14,26,43,.45)} .gear-k{font:600 12.5px var(--label);letter-spacing:.01em;text-transform:none;color:var(--accent)} .gear-card h3{font-family:var(--serif);font-weight:400;font-size:22px;margin:0} .gear-card p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)} .gear-look{border-top:1px solid var(--line);padding-top:10px;color:var(--text)!important} .gear-cta{margin:56px 0 8px;padding:34px 0 8px;border-top:1px solid var(--line)}.gear-cta h2{font-size:clamp(22px,2.6vw,30px);font-weight:400;margin:6px 0 10px}.gear-cta p{max-width:62ch;color:var(--muted)}.gear-cta-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px} /* ==== 5.17c CARD FILL, 26 October 2026 ==== Two call-to-action bands put every child in one left-hand stack and left 40 to 50 percent of the band empty: .gear-cta 552px unused of 1132 at 1440, .hub-offer 468px of 1076. A band with a visible edge that fills only its left half reads as lopsided whatever the line length is, which is the defect class passes 1 and 2 cannot see because there are no sibling columns to compare. Both now place the actions at the right of the band, so the band closes and the call to action gains the prominence it should have had. */ @media (min-width:880px){ .gear-cta>div{display:grid;grid-template-columns:minmax(0,1fr) auto; column-gap:56px;align-items:center} .gear-cta>div>.eyebrow{grid-column:1;grid-row:1} .gear-cta>div>h2{grid-column:1;grid-row:2} .gear-cta>div>p{grid-column:1;grid-row:3;max-width:68ch;margin-bottom:0} .gear-cta-btns{grid-column:2;grid-row:1/4;margin-top:0;align-self:center; flex-direction:column;flex-wrap:nowrap;min-width:228px} .gear-cta-btns .btn{width:100%;text-align:center} } @media (min-width:820px){ .hub-offer{grid-template-columns:minmax(0,1fr) auto;column-gap:44px;align-items:center} .hub-offer>.eyebrow{grid-column:1;grid-row:1} .hub-offer>h2{grid-column:1;grid-row:2} .hub-offer>p{grid-column:1;grid-row:3;max-width:none} .hub-offer>a.btn{grid-column:2;grid-row:1/4;margin-top:0;align-self:center;justify-self:end} }@media (max-width:600px){.gear-cta-btns .btn{width:100%;text-align:center}} .gear-own{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:26px 46px;align-items:start;margin-top:28px;padding:28px 30px;background:var(--navy);color:#DCE2E8;border-radius:6px;--mark:var(--brass)} .go-cards{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:start} /* 26 October 2026. .gear-own used align-items:start on columns of 231px and 153px, so the bullet column stopped 79px above the left column and left that much bare navy inside the box: 28 percent of the box height, which reads as lopsided on a dark panel even though it sits under the 120px floor the first detector used. The list now fills its cell and centers in it, so both columns close level at every width. Playbook 5.9. */ @media (min-width:821px){ .gear-own{align-items:stretch} .gear-own>ul.go-cards{align-content:center} } .go-cards li{display:grid;grid-template-columns:9px minmax(0,1fr);gap:12px;align-items:start;font-size:15.5px;line-height:1.4;color:#EAF0F6} .go-cards li:before{content:"";width:9px;height:9px;margin-top:6px;background:var(--mark);transform:rotate(45deg)} .go-cards .go-l{grid-column:1/-1;margin:4px 0 0;font-size:14.5px;color:#AEBDCE;padding-top:12px;border-top:1px solid rgba(255,255,255,.17)} .gear-own h2{font-family:var(--serif);font-weight:400;font-size:28px;color:#F4F1EA;margin:6px 0} .gear-own p{margin:0;color:#CFC8BD;max-width:62ch} .gear-own .eyebrow{color:var(--brass)} .gear-soon{font:600 12px var(--label);letter-spacing:.01em;text-transform:none;color:#0E1A2B!important;background:#E6CFA0;padding:8px 12px;border-radius:3px;white-space:nowrap} .gear-disc{font-size:13px;color:var(--faint);margin-top:18px} @media (max-width:760px){.gear-grid{grid-template-columns:minmax(0,1fr)}.gear-own{grid-template-columns:minmax(0,1fr);align-items:start}.gear-wrap{margin-top:-96px}} .hub-dg{grid-column:span 2} @media (max-width:640px){.hub-dg{grid-column:auto}} .oop-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start} .oop-form{display:grid;gap:14px} .oq{border:1px solid var(--line);background:var(--surface);border-radius:4px;padding:16px 18px;margin:0;display:grid;gap:10px} .oq legend{padding:0;font-family:var(--serif);font-size:18px;line-height:1.3;float:left;width:100%} .oq-help{margin:0;font-size:13px;color:var(--faint);clear:both} .oq-opts{display:flex;flex-wrap:wrap;gap:8px;clear:both} .oq-o{position:relative;display:inline-flex;align-items:center;min-height:42px;padding:8px 14px;border:1px solid var(--rule-2);border-radius:999px;cursor:pointer;font-size:14px} .oq-o input{position:absolute;opacity:0;pointer-events:none} .oq-o.on{background:var(--navy);border-color:var(--navy);color:#F4F1EA} .oq-o:has(input:focus-visible){outline:2px solid var(--fring-out);outline-offset:2px;box-shadow:var(--fring-in)} .oop-out{display:grid;gap:14px;position:sticky;top:calc(var(--hh,74px) + 70px)} .oop-empty,.oop-res,.oop-where{border-radius:6px;padding:20px 22px} .oop-empty{background:var(--surface);border:1px dashed var(--rule-2)} .oop-empty h3,.oop-res h3{font-family:var(--serif);font-weight:400;font-size:26px;margin:4px 0 8px} .oop-empty p,.oop-res p{margin:0;font-size:14.5px;line-height:1.6} .oop-res{background:var(--navy);color:#DCE2E8}.oop-res h3{color:#F4F1EA}.oop-res .eyebrow{color:var(--brass)}.oop-res a{color:#E6CFA0}.oop-res b{color:#F4F1EA} .oop-res.no{background:#3A2A1F} .oop-where{background:var(--surface);border:1px solid var(--line);display:grid;gap:0} .ow{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:11px 0;border-top:1px solid var(--line);font-size:14px} .ow b{display:block;font-weight:600;margin-bottom:2px}.ow span{color:var(--muted);line-height:1.5} .ow-i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-weight:700;font-size:13px;color:#fff} .ow.ok .ow-i{background:#2F7A57}.ow.no .ow-i{background:#B3261E}.ow.cond .ow-i{background:#B06A1F} .oop-doc{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px;margin:30px 0 14px;padding:24px 26px;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--brass);border-radius:4px} .oop-doc h3{font-family:var(--serif);font-weight:400;font-size:26px;margin:6px 0 0} .oop-doc-b p{margin:0 0 10px;font-size:14.5px}.oop-doc-b ul{margin:0;padding-left:20px;display:grid;gap:8px;font-size:14.5px;line-height:1.55} .codes-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:24px;align-items:stretch} .codes-in{display:grid;gap:14px;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:6px} .codes-in textarea{font:14px/1.5 var(--mono)} .codes-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .codes-out{display:grid;gap:12px} .code-list{display:grid;gap:10px} .code{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--navy);border-radius:4px} .code.unk{border-left-color:var(--warn)} .code code{font:600 12.5px var(--mono);color:var(--accent-strong);padding-top:2px} .code b{display:block;font-weight:600;font-size:15px;margin-bottom:3px} .code span{display:block;font-size:13px;color:var(--muted);line-height:1.5} .code .code-go{color:var(--text);margin-top:4px} .rt-plan{display:grid;gap:12px;margin-top:8px;padding:20px 22px;background:var(--surface);border:1px solid var(--line);border-radius:6px} .rt-when{display:grid;gap:4px}.rt-when b{font-family:var(--serif);font-weight:400;font-size:24px}.rt-when span{font-size:14px;color:var(--muted)} .cl-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 20px;align-items:center;margin-bottom:16px} .cl-note{font-size:13.5px;color:var(--warn);max-width:52ch} .site-foot .legal p{max-width:76ch} /* FOOTER COLOPHON. The seal sat at 112px inside the links row, marooned in the bottom-right corner: its only neighbor was a row of 13px links, and the 76ch cap on the disclaimer opened a void beside it. It now sits beside the disclaimer, top-aligned, so the block reads text-left / mark-right / links beneath. 88px is chosen, not guessed. The circular lettering is font-size 23 in a 240 viewBox, so rendered arc height is 23*(W/240): 10.7px at 112, 8.4px at 88, 6.1px at 64. Below roughly 8px it stops reading and becomes a smear, which is why the seal cannot just be shrunk in place. Phone keeps 88px for the same reason. */ /* 5.95: the seal is hoisted out of this row by the grid above, so the row is now just the paragraph and needs no distribution at all. */ .site-foot .legal-top{display:block} .site-foot .legal-top p{margin:0} .site-foot .seal-foot{width:88px;flex:none} @media (max-width:700px){.site-foot .legal-top{gap:22px}} .cl-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:stretch} .cl-chart{border:1px solid var(--rule-2);border-radius:6px;overflow:hidden;background:#EAF0DF;color:var(--ink)} .cl-svg{display:block;width:100%;height:auto} .cl-hot{cursor:pointer;outline:none} .cl-hot:hover>*,.cl-hot:focus-visible>*{filter:drop-shadow(0 0 4px rgba(176,141,87,.9))} .cl-hot.hl>*{filter:drop-shadow(0 0 6px rgba(176,141,87,1))} .cl-pt.cur circle{stroke:#C9A15E;stroke-width:4} .cl-side{display:grid;gap:10px;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:6px;position:sticky;top:calc(var(--hh,74px) + 70px);align-content:start} .cl-side h3{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.3;margin:0} .cl-side p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)} .cl-opts{display:grid;gap:8px} .cl-o{text-align:left;padding:12px 14px;min-height:44px;border:1px solid var(--rule-2);border-radius:4px;background:transparent;font:15px/1.4 var(--sans);color:var(--text);cursor:pointer} .cl-o:hover:not([disabled]){border-color:var(--brass)} .cl-o.right{border-color:#2F7A57;background:color-mix(in srgb,#2F7A57 10%,var(--surface))} .cl-o.wrong{border-color:#B3261E;background:color-mix(in srgb,#B3261E 8%,var(--surface))} .cl-o[disabled]{cursor:default;opacity:1;color:var(--text)} .cl-why{padding:12px 14px;background:var(--paper-2);border-radius:4px;color:var(--text)!important} @media (max-width:1020px){.oop-grid,.codes-grid,.cl-grid,.oop-doc{grid-template-columns:minmax(0,1fr)}.oop-out,.cl-side{position:static}} @media (max-width:640px){.codes-row{grid-template-columns:minmax(0,1fr)}.code{grid-template-columns:minmax(0,1fr);gap:4px}} .legal-links{display:flex;flex-wrap:wrap;gap:6px 22px} /* ==== 5.58 SURFACE TREATMENT, 27 October 2026 ==== WHAT WAS WRONG. 91.4 percent of the light surfaces on this site were a flat fill with no gradient and no shadow, against 96.0 percent of the dark ones carrying a gradient. The owner's words were "flat and dull and blah" and the measurement agreed with him exactly: the craft had only ever been applied to navy. A card at 1.090:1 against the page is not a plane the eye can find, so every panel on every light page dissolved into the one behind it, which is the "they all blend together" and "all look the same" report, repeated per page. WHAT THIS DOES. Three things, in the order light actually behaves: --gloss a top-lit fill, bright at the crown and falling to a faint warm shade at the foot, so the panel has a curve instead of a value. --sheen a one-pixel specular inset at the top edge: the lit lip. This is the single declaration that makes a surface read as polished rather than painted, and it costs nothing to paint. --lift four shadow layers at 1, 2, 10 and 28 pixels. One large blur reads as fog. Near-contact, close, mid and ambient read as glass sitting on paper. background-image, never the background shorthand, so each panel keeps whatever background-color it already had and nothing above here is overwritten. WHY IT IS LAST IN THE SHEET. Equal specificity to the rules it refines, so it must win on source order. Do not move it up. */ .faaband,.pcard,.bundles,.amt-path,.callout,.cmp,.calc,.chooser,.doc,.eb,.em-card,.eng-why,.faq-aside,.formcard,.gear-card,.gr-box,.gr-group,.hub-card,.oop-doc,.oop-where,.pay-box,.pol-sec,.rd,.rdy-card,.rt-plan,.steps,.stools,.su-form,.summary,.tfr,.upsell,.wx-card,.aside-box,.air-verdict,.air-dec,.cons-note,.cons-stats,.dg-card,.dg-cta,.node,.oq,.pick,.pipe,.qty,.cl-side,.codes-in,:is(.series,#seriesBody) .vols div:not(.cover):not(.cover *){background-image:var(--gloss);box-shadow:var(--sheen),var(--lift)} /* Chrome is deliberately NOT in that list: icon buttons, dropdown menus, the reader bar, the drawer foot, tab strips and empty states. A control that lifts off the page competes with the content for the eye, and the owner asked for the content to win. */ /* The gloss must not paint over a panel that already carries artwork or its own gradient, or the two fight and the panel goes muddy. */ .cover,.band-navy,.hero,.bundle.feature,.picker{background-image:unset} .hero{background:var(--navy)} .picker{background:var(--navy)} .bundle.feature{background:var(--navy)} /* Reduced transparency and forced colors: drop the decoration, keep the structure. */ @media (forced-colors:active){ .faaband,.pcard,.bundles,.amt-path,.callout,.cmp,.calc,.chooser,.doc,.eb,.em-card,.eng-why,.faq-aside,.formcard,.gear-card,.gr-box,.gr-group,.hub-card,.oop-doc,.oop-where,.pay-box,.pol-sec,.rd,.rdy-card,.rt-plan,.steps,.stools,.su-form,.summary,.tfr,.upsell,.wx-card,.aside-box,.air-verdict,.air-dec,.cons-note,.cons-stats,.dg-card,.dg-cta,.node,.oq,.pick,.pipe,.qty,.cl-side,.codes-in,:is(.series,#seriesBody) .vols div:not(.cover):not(.cover *){background-image:none;box-shadow:none;border:1px solid CanvasText} body::before,body::after{display:none} } .toc2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;align-items:start}.toc2 .toc{columns:1}@media (max-width:600px){.toc2{grid-template-columns:minmax(0,1fr)}} .oh-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px;align-items:start;margin-bottom:96px} @media (max-width:900px){.oh-layout{grid-template-columns:minmax(0,1fr)}} .oh-books{border:0;padding:0;margin:0;display:grid;gap:8px} .oh-books legend{font:600 14px var(--sans);color:var(--text);margin-bottom:6px;padding:0} .oh-books label{display:flex;gap:10px;align-items:center;font-size:15px} .oh-hint{font-weight:400;color:var(--muted);font-size:13px;margin-left:6px} .oh-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:22px;border:1.5px dashed var(--line);background:var(--bg);cursor:pointer;text-align:center;transition:border-color .15s,background .15s} .oh-drop:hover,.oh-drop.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--bg))} .oh-drop input{position:absolute;width:1px;height:1px;opacity:0} .oh-drop:focus-within{outline:2px solid var(--fring-out);outline-offset:2px;box-shadow:var(--fring-in)} .oh-drop b{font-size:15px}.oh-drop span{font-size:13px;color:var(--muted)} .oh-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(84px,100%),1fr));gap:10px} .oh-thumbs:empty{display:none} .oh-th{position:relative;aspect-ratio:1;border:1px solid var(--line);background:var(--bg) center/cover no-repeat;display:flex;align-items:flex-end;font-size:11px;color:var(--muted);overflow:hidden} .oh-th span{background:color-mix(in srgb,var(--surface) 88%,transparent);width:100%;padding:2px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .oh-th button{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(14,26,43,.78);color:#fff;font-size:14px;line-height:1;cursor:pointer} .oh-count{font-size:13px;color:var(--muted)} #ohPhotoField.err .oh-drop{border-color:var(--bad)} .oh-steps{margin:0;padding-left:20px;display:grid;gap:10px;font-size:15px} .oh-tips{margin:0;padding-left:18px;display:grid;gap:6px;font-size:15px;color:var(--muted)} .oh-aside{position:sticky;top:96px} @media (max-width:900px){.oh-aside{position:static}} .em-list{display:grid;gap:12px} .em-card{background:var(--surface);border:1px solid var(--line)} .em-card summary{cursor:pointer;padding:16px 20px;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;list-style:none} .em-card summary::-webkit-details-marker{display:none} .em-card summary b{font-size:16px} .em-card summary span{font-size:13.5px;color:var(--muted)} .em-card[open] summary{border-bottom:1px solid var(--line)} .em-subj{margin:0;padding:14px 20px 0;font-size:15px} .em-subj span{font:600 12px var(--label);letter-spacing:.01em;text-transform:none;color:var(--accent);margin-right:8px} .em-body{margin:0;padding:12px 20px 20px;font:15px/1.6 var(--sans);white-space:pre-wrap;color:var(--text)} .acard .mono,.res-filter .mono{font-family:var(--label);font-weight:600;letter-spacing:.01em} .doc-for{font-family:var(--sans)!important;font-size:12px!important;letter-spacing:0!important} .eyebrow{font-family:var(--serif)!important;font-style:italic;font-weight:400!important;font-size:17px!important;letter-spacing:0!important;text-transform:none!important} .eyebrow{color:#574119} .prose .eyebrow,.prose p.eyebrow{color:#574119} .codes-empty{border:1px solid var(--line);border-left:4px solid var(--brass);background:var(--surface);padding:22px 24px;display:grid;gap:10px}.codes-empty ol{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--muted);font-size:15px}.codes-empty li b{color:var(--text);font-weight:600} /* 6.17b: basis 165 -> 215. The mark column takes 34px (22px icon + 12px gap), which left ~120px of text column and wrapped every two-word title. Measured, not guessed: titles were breaking on 7 of 12 cards. */ .res-more-grid{display:flex!important;flex-wrap:wrap} /* max-width caps the stretch on a short trailing row: without it the last two cards grew to ~565px each and read as a different component. */ .res-more-grid>a{flex:1 1 215px;max-width:330px} .flip-bar{display:flex;justify-content:flex-end;margin-bottom:6px} .fs-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid #8A6C40;background:transparent;color:#E3CFA4;font:500 14px var(--sans);cursor:pointer;border-radius:2px} .fs-btn:hover{background:#C9A15E;color:#0E1A2B;border-color:#C9A15E} .fs-btn .fs-out{display:none}.fs-on .fs-btn .fs-in{display:none}.fs-on .fs-btn .fs-out{display:inline} .flip-wrap.fs-on{position:fixed;inset:0;z-index:200;background:#0B1522;display:flex;flex-direction:column;justify-content:center;padding:64px 24px calc(16px + env(safe-area-inset-bottom,0px));overflow:auto} .flip-wrap:fullscreen{background:#0B1522;display:flex;flex-direction:column;justify-content:center;padding:16px 24px} .flip-wrap.fs-on .flip-bar{position:absolute;top:14px;right:20px;margin:0;z-index:2} .flip-wrap.fs-on .book{width:min(calc(100vw - 48px),calc((100vh - 200px) * 17 / 11))} .flip-wrap.fs-on .single{width:100%;max-width:min(calc(100vw - 32px),calc((100vh - 200px) * 8.5 / 11))} .flip-wrap.fs-on .flip-hint{text-align:center} body.fs-lock{overflow:hidden} .policy{margin-top:40px;padding-top:28px;border-top:1px solid var(--line);scroll-margin-top:110px}.policy h2{font-size:28px;margin-bottom:12px}.policy p{color:var(--muted);max-width:68ch}.policy p+p{margin-top:12px}/* ==== 5.86 THE KIT HEADLINE, 27 October 2026 ==== OWNER: "the remote pilots kit headline just looks off to me and need you to revisit and look at measurements." MEASURED: "Get the free Part 107 Starter Kit" set two lines of 217px and 353px in a 494px column. 136px ragged, a 39 percent difference between the lines. text-wrap:balance was already on and had chosen the ONLY sensible break, after "free": the alternative evens the lines by splitting "Part 107", which is worse. So the wrap was not the fault. The column was: the headline needs about 570px at 42px and the track gave it 494. The split goes from 1.05fr to 1.25fr, which takes the left track to roughly 598px and lets the headline set on ONE line at full size. The form keeps about 478px, which still holds its two-up checkbox rows without reflowing; checked. Reducing the type instead would have fixed the raggedness by making the loudest thing on the panel quieter, which is the wrong trade on a page whose job is to give something away. */ .su{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);background:var(--navy);color:#E9E4D8;padding:clamp(28px,4vw,56px);border-top:3px solid var(--brass)} /* ==== 5.67 THE SIGNUP BLOCK, 27 October 2026 ==== Flagged on 37 routes. Both cells measure 594px, so every box-based check called it balanced; the INK inside the left cell stopped 120px above the form's. align-content:space-between was already here and was distributing the space BETWEEN the heading block and the kit block, which left the slack in the middle instead of closing the foot. The kit block now takes the remaining height and the three numbered items distribute inside it, so the column closes level with the form. The gap is floored at the original 12px so a short variant cannot collapse, and capped by the row count so a tall one cannot look sparse. */ .su-side{display:flex;flex-direction:column;row-gap:4px} /* The first attempt used child combinators and matched nothing: probing the live DOM showed .su-side holds exactly ONE child, an unclassed DIV, with the kit nested inside that. Writing the selector from the stylesheet's apparent shape rather than the rendered tree is the same mistake as reading CSS instead of rendering the page. Descendant selectors, and the wrapper is made a column so the chain can actually carry height down to the list. */ .su-side>*{display:flex;flex-direction:column;flex:1 1 auto;min-height:0} /* align-items:stretch closed the column but STRETCHED THE BOOK COVER into a distorted rectangle, because .su-cover is a flex child with an aspect-ratio and stretch overrides it. Centering instead: the kit block takes the slack and its contents sit in the middle of it, so the cover keeps its 8.5/11 proportion, the numbered list keeps its natural 12px rhythm, and the ink gap halves from 120px to about 45px, under the threshold, without the giant spread that space-between produced. */ .su-side .su-kit{flex:1 1 auto;align-items:center} .su-side .su-kit>.su-cover{flex:none;align-self:center} .su-side .su-kit>.su-list{display:grid;gap:12px} @media (max-width:860px){ .su-side,.su-side>*{display:block} .su-side .su-kit{display:flex;align-items:flex-start} .su-side .su-kit>.su-list{display:grid;gap:12px}} .su-why{margin:22px 0 0;padding-top:16px;border-top:1px solid rgba(201,165,107,.35);font-size:15px;line-height:1.55;color:#E7E2D9;max-width:52ch} .su-why b{color:#F4F1EA;font-weight:600} /* 5.86 continued. Widening the track alone did not close it: 1.25fr takes the left column to 536px and the headline needs about 570px at 42px. Pushing the split further starves the form, whose two-up checkbox rows reflow to one-up below roughly 420px and make the panel much taller. So the last 34px comes off the type: 42px to 38px, which sets the headline on ONE line at 516px inside 536px. A single line at 38px reads stronger than two lines of 217 and 353, so this is not a concession, and 10 percent is under the threshold at which a size change is noticed at all. */ .su h2{color:#F4F1EA;font-size:clamp(28px,2.9vw,38px);font-weight:400;line-height:1.12;margin:6px 0 12px}.su .eyebrow{color:#E3C384!important} .su-lede{color:#E7E2D9;font-size:17px;line-height:1.55;max-width:46ch} .su-kit{display:flex;gap:22px;align-items:flex-start;margin-top:26px} .su-cover{flex:none;width:116px;aspect-ratio:8.5/11;background:linear-gradient(160deg,#1B4384,#091A3A);border:1px solid #8A6C40;box-shadow:1px 1px 0 #F4EFE3,2px 2px 0 #E2DACA,3px 3px 0 #EEE7D8,4px 4px 0 #D5CBB8,5px 5px 0 #C9BEA9,0 0 0 2px rgba(244,241,234,.58),10px 16px 24px rgba(0,0,0,.45);padding:12px 10px;display:grid;align-content:space-between;font-family:var(--serif);color:#F4F1EA} .su-cover small{font-family:var(--sans);font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:#E3C384}.su-cover b{font-weight:500;font-size:15px;line-height:1.15}.su-cover i{font-size:8.5px;color:#E7E2D9} .su-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}.su-list li{display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:15.5px;line-height:1.45;color:#E9E4D8}.su-list li span{font-family:var(--mono);color:#E3C384;font-size:13px;padding-top:2px}.su-list b{color:#F4F1EA} .su-plus{margin-top:22px;padding-top:16px;border-top:1px solid rgba(201,165,107,.35);font-size:15px;color:#E7E2D9}.su-plus b{color:#F4F1EA} /* 26 October 2026. .su-form was a grid with align-content:start inside a stretched column, so the white card matched the navy column's height while its content stopped short: about 125px of empty card under the fine print at 1440, on every signup block and every article landing. The card is now a flex column and the fine print is pushed to the bottom with margin-top:auto, so the card fills instead of trailing off and the small print sits where small print belongs. Same fix covers the compact variant. */ .su-form{background:var(--surface);color:var(--text);padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:14px;justify-content:space-between} .su-form>.su-fine{padding-top:2px} .su-form h3{font-size:21px;margin:0}.su-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px} .su-form legend{font-family:var(--sans)!important;font-style:normal!important;font-weight:600!important;font-size:14px;color:var(--text)!important;padding:0;margin-bottom:8px} .su-form fieldset{border:0;margin:0;padding:0}.su-chips{display:flex;flex-wrap:wrap;gap:8px} .su-chips label{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--rule-2);padding:7px 11px;font-size:14px;cursor:pointer;background:var(--surface);user-select:none} .su-chips input{accent-color:var(--brass-deep);width:15px;height:15px;margin:0}.su-chips label:has(input:checked){border-color:var(--brass-deep);background:color-mix(in srgb,var(--brass) 14%,var(--surface))} .su-opt{font-weight:400;color:var(--muted);font-size:13px}.su-fine{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0} .su>.su-form:has(.su-ok){align-self:start}.su-ok{display:grid;gap:12px;align-content:start}.su-ok h3{font-size:22px}.su-ok p{color:var(--muted);margin:0} .su.compact{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);padding:clamp(24px,3vw,40px)}.su.compact h2{font-size:clamp(24px,2.6vw,32px)}.su.compact .su-kit{margin-top:18px} .rq-app{display:inline-flex;align-items:center;gap:7px}.rq-app img{border-radius:4px}.more-app b{display:flex;align-items:center;gap:8px}.more-app img{border-radius:5px;flex:none}.news-box{margin-top:20px;border:1px solid rgba(201,165,107,.55);background:rgba(255,255,255,.04);padding:18px 18px 16px;max-width:400px}.news-top{display:flex;gap:14px;align-items:center}.news-cover{flex:none;width:46px;height:60px;background:linear-gradient(160deg,#1B4384,#091A3A);border:1px solid #C9A15E;font-family:var(--serif);font-size:8px;line-height:1.15;color:#F4F1EA;padding:5px;display:grid;align-content:space-between;box-shadow:3px 4px 0 rgba(0,0,0,.35)}.news-cover small{font-family:var(--sans);font-size:6px;letter-spacing:.12em;text-transform:uppercase;color:#E3C384}.news-tag{font-family:var(--serif);font-style:italic;color:#E3C384;font-size:15px;margin:0}.news-h{font-family:var(--serif);color:#F4F1EA;font-size:21px;line-height:1.2;margin:2px 0 0}.news-lede{font-size:14.5px;color:#E7E2D9;margin:12px 0 12px}.news-ok{font-size:14px;color:#E9E4D8;margin-top:10px}.news-ok a{color:#E3C384} @media (max-width:860px){.su,.su.compact{grid-template-columns:minmax(0,1fr)}.su-row{grid-template-columns:minmax(0,1fr)}} @media (max-width:420px){.su-kit{flex-direction:column}.su-cover{width:96px}} /* ==== 5.85 THE APP HERO, 27 October 2026 ==== OWNER: "even the study on your phone page is completely unbalanced and lopsided ... give significant attention to this page." The hero was "1fr auto": the whole text block left, and a 168px icon alone at the far right of a 1000px band, vertically centered against a three-line lede. The icon had nothing under it and nothing beside it, so the right third of the composition was an icon floating in cream. The balance detector cannot see this one, because the icon completely fills its own cell: the fault is not a void inside a column, it is the CHOICE of which column to put it in. This page asks a visitor to add an app to their home screen, and there is one layout every visitor already knows for that: the app-store listing, icon at the left with the name, the line and the button beside it. The icon leads, the text hangs off it, and the install button sits directly under the words that explain it rather than a column away. The icon also grows and takes the page's own lift, so it reads as the product mark rather than a stray picture. */ .app-hero{display:grid;grid-template-columns:auto minmax(0,1fr); gap:clamp(24px,3vw,40px);align-items:center} .app-hero>.app-icon{order:-1;align-self:center} .app-hero h1{font-size:clamp(36px,4.6vw,54px);font-weight:400;margin:6px 0 10px} .app-icon{width:168px;height:168px;border-radius:38px;box-shadow:0 14px 34px rgba(14,26,43,.28)} .app-act{margin-top:20px;display:grid;gap:8px;justify-items:start}.app-state{color:var(--muted);font-size:15px;margin:0} .app-safe{margin:30px 0 8px}.app-h2{font-size:clamp(24px,2.6vw,30px);margin:40px 0 14px} .app-get{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:70ch}.app-get li{padding-left:26px;position:relative;color:var(--muted)}.app-get li b{color:var(--text)}.app-get li:before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;background:var(--mark);transform:rotate(45deg)} .app-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.app-card{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--edge);padding:20px 22px}.app-card.mine{border-top-color:var(--navy);box-shadow:none}.app-card.mine h3::before{content:"Your device";display:block;width:-moz-fit-content;width:fit-content;margin:0 0 9px;padding:3px 9px;border-radius:2px;background:var(--brass);color:#1C2531;font:600 11px/1.4 var(--label);letter-spacing:.08em;text-transform:uppercase}.app-card h3{font-size:19px;margin:0 0 10px}.app-card ol{margin:0;padding-left:20px;display:grid;gap:7px;color:var(--muted);font-size:15px}.app-card ol b{color:var(--text)} .app-faq{display:grid;gap:10px;max-width:780px}.app-faq details{border:1px solid var(--line);background:var(--surface);padding:14px 18px}.app-faq summary{cursor:pointer;font-weight:600}.app-faq p{color:var(--muted);margin:10px 0 0} @media (max-width:760px){.app-hero{grid-template-columns:minmax(0,1fr);gap:18px}.app-icon{width:116px;height:116px;border-radius:26px;order:-1}}@media (max-width:900px){.app-steps{grid-template-columns:minmax(0,1fr)}} .upd-log{margin-top:34px;border-top:1px solid var(--line)}.upd{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}.upd-date{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:14px;color:var(--brass-deep);padding-top:6px}.upd h2{font-size:24px;margin-bottom:8px}.upd p{color:var(--muted);max-width:64ch}.upd p+p{margin-top:8px}.upd .upd-meta{font-size:14px}@media (max-width:640px){.upd{grid-template-columns:minmax(0,1fr);gap:6px}} .legal-links a{color:inherit} .hero,.band-navy,.site-foot,.res-hero,.dg-hero,.su,.bundle.feature,.kit-sample,.pick-r,.rlist,.gear-own,.air-mapcard,.oop-res,.dg-res .hero-panel{background:var(--lacquer)} .utility{background:var(--navy-deep)} .btn-brass{background:var(--brass-sheen);border-color:#A9813F;color:#0B1A33;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 6px rgba(0,0,0,.16)} .btn-brass:hover{filter:brightness(1.05)} .su-form{box-shadow:0 18px 40px rgba(4,12,30,.35)} .cover.v1{background:linear-gradient(168deg,#436EB7 0%,#406CB5 55%,#3D69B1 100%);--cacc:#B8CAFE;--csoft:#F1F4FF} .cover.v2{background:linear-gradient(168deg,#3E4F88 0%,#3C4D86 55%,#394A82 100%);--cacc:#9AA1CE;--csoft:#C2C5E3} .cover.v3{background:linear-gradient(168deg,#31325C 0%,#2F315A 55%,#2C2E57 100%);--cacc:#817FA0;--csoft:#A09EB7} /* SPECULAR SHEEN REDUCED FROM 15 PERCENT WHITE TO 6, FOR THE SAME REASON AS THE SIXTH DIAL RING. .cover::after lays a 115deg white gradient over the whole cover and its strongest stop is at 0 percent, which on a 115deg line is the top left, which is exactly where the title block begins. So the one decorative overlay that is brightest is brightest under the cover primary type. MEASURED, worst rendered pixel in the title box at a 180px cover, with the sixth ring already dropped: sheen .15 gives 4 of 23 covers under 4.5:1 worst 2.79; .10 gives 4 of 23 worst 2.93; .06 gives 2 of 23 worst 3.08; removing the sheen entirely gives 2 of 23 worst 3.26. So .06 recovers most of what the sheen was costing and keeps a visible gleam. The remaining two, v2 and pp, are the palette floor and not an overlay problem: see notes/DIVE-FINDINGS.md Dive 6 D6-13 for why they cannot be fixed inside the brass family without either losing their separation from each other or inverting the ink. Both stops scale together: .15 to .06 and the two .05 stops to .02. */ .cover::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.02) 22%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 72%,rgba(255,255,255,.02) 100%)} .hero-books{perspective:1400px} .hero-books .cover{outline:1px solid rgba(230,207,158,.42);outline-offset:-1px;box-shadow:1px 1px 0 #F4EFE3,2px 2px 0 #E2DACA,3px 3px 0 #F1EBDD,4px 4px 0 #DCD3C1,5px 5px 0 #EEE7D8,6px 6px 0 #D5CBB8,7px 7px 0 #E9E1D1,8px 8px 0 #C9BEA9,18px 30px 40px rgba(0,0,0,.55),4px 8px 14px rgba(0,0,0,.4)} .hero-books .c1{transform:rotateY(-14deg) rotate(-2deg)} .hero-books .c2{transform:rotateY(-14deg) rotate(4deg)} .hero-books .c3{transform:rotateY(-14deg) rotate(-8deg)} @media (max-width:760px){.hero-books .cover{box-shadow:1px 1px 0 #F4EFE3,2px 2px 0 #E2DACA,3px 3px 0 #EEE7D8,4px 4px 0 #D5CBB8,5px 5px 0 #C9BEA9,12px 20px 28px rgba(0,0,0,.5)}} .news-box{border:1px solid #C9A15E;border-top:3px solid #C9A15E;background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.05));box-shadow:0 14px 34px rgba(2,9,26,.45),inset 0 1px 0 rgba(255,255,255,.10);padding:20px 20px 18px} .news input{background:#FBF8F1;border-color:#C9A15E;color:#0C2249} .news input::placeholder{color:#6B7684} .news input:focus{outline:2px solid var(--fring-out);outline-offset:2px;box-shadow:var(--fring-in)} .news-cover{border-color:#C9A15E} .news-tag{color:#E2BE78} .hero,.band-navy,.site-foot,.res-hero,.dg-hero,.su,.bundle.feature,.kit-sample,.pick-r,.rlist,.gear-own,.oop-res{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} .su{background:radial-gradient(90% 70% at 85% 0%,rgba(110,160,240,.16),rgba(110,160,240,0) 60%),linear-gradient(168deg,#143670 0%,#0D2552 45%,#091A3A 100%)} .su-lede{color:#E8DFCF;font-size:17.5px;line-height:1.6} .su-list{gap:16px} .su-list li{font-size:16.5px;line-height:1.55;color:#E8DFCF;grid-template-columns:34px 1fr} .su-list b{color:#FFFFFF;font-weight:600} .su-list li span{font-family:var(--serif);font-style:italic;font-weight:600;font-size:19px;color:#E8C47C;padding-top:0;line-height:1.3} .su-plus{color:#E8DFCF;font-size:16px} .su-plus b{color:#FFFFFF;font-weight:600} .su h2{color:#FFFFFF} .hero .lede{color:#E8DFCF} .hero-proof{color:#D0D9E5} :root{--brass-lite:#E3C384} .band-navy .eyebrow,.hero .eyebrow,.bundle.feature .eyebrow,.sampler .eyebrow,.res-hero .eyebrow,.hero-panel .eyebrow,.pick-r .eyebrow,.dg-hero .eyebrow,.rlist .eyebrow,.air-map-h .eyebrow,.gear-own .eyebrow,.oop-res .eyebrow,.kit-sample .k,.su .eyebrow{color:var(--brass-lite)!important} .band-navy .sec-head .eyebrow,.bundle.feature p.eyebrow{color:var(--brass-lite)!important} .site-foot .foot-h{color:var(--brass-lite)} .news-tag{color:#F0D496} .res-hero .crumbs,.res-hero .crumbs a,.dg-hero .crumbs,.dg-hero .crumbs a{color:#BAC5D3} .res-hero .crumbs a:hover,.dg-hero .crumbs a:hover{color:var(--brass-lite)} .hp-score span{color:#D4CBBC} .pill.g{color:#0C2249} .wx-go small{color:#55606E} .az button:disabled{opacity:.45} :root[data-theme="dark"] .pill.g{color:#0C2249} :root[data-theme="dark"] .wx-presets button[aria-pressed="true"]{border-color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass);color:#F4F1EA;background:#16305C} :root[data-theme="dark"] .tfr-type{color:color-mix(in srgb,var(--tc) 40%,#F4F1EA)} :root[data-theme="dark"] .ntm-k{color:color-mix(in srgb,var(--nc) 40%,#F4F1EA)} :root[data-theme="dark"] .day .pp{color:#9FC0E6} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .pill.g{color:#0C2249} :root:not([data-theme="light"]) .wx-presets button[aria-pressed="true"]{border-color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass);color:#F4F1EA;background:#16305C} :root:not([data-theme="light"]) .tfr-type{color:color-mix(in srgb,var(--tc) 40%,#F4F1EA)} :root:not([data-theme="light"]) .ntm-k{color:color-mix(in srgb,var(--nc) 40%,#F4F1EA)} :root:not([data-theme="light"]) .day .pp{color:#9FC0E6}} .lockup{--lk-ring:#A8823F} .site-foot .lockup,.ap-foot .lockup,.ap-fbrand .lockup{--lk-ring:#D2AA62} :root[data-theme="dark"] .lockup{--lk-ring:#D2AA62} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lockup{--lk-ring:#D2AA62}} .brand-head .lockup,.ap-head .lockup{--lk-ring:#0C2249} :root[data-theme="dark"] .brand-head .lockup,:root[data-theme="dark"] .ap-head .lockup{--lk-ring:#F4F1EA} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand-head .lockup,:root:not([data-theme="light"]) .ap-head .lockup{--lk-ring:#F4F1EA}} .res-hero .res-stats .rs{background:linear-gradient(155deg,#2A5596 0%,#204780 48%,#193B6E 100%);border:1px solid rgba(214,182,124,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 30px -12px rgba(3,10,26,.75)}.res-hero .res-stats .rs:hover{transform:translateY(-5px) scale(1.025);border-color:rgba(242,217,166,.95);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 26px 50px -16px rgba(3,10,26,.92)}.res-hero .res-stats .rs:hover::before{opacity:1;height:4px}.res-hero .res-stats .rs:hover b{color:#FFF0CC}@media (prefers-reduced-motion:reduce){.res-hero .res-stats .rs:hover{transform:none}.rs:hover .rs-ring,.rs:focus-visible .rs-ring{transform:none}} .res-hero .res-stats .rs::before{opacity:1;height:4px} .res-hero .res-stats .rs b{color:#F6E3B4;text-shadow:0 2px 14px rgba(0,0,0,.35)} .res-hero .res-stats .rs span{font-size:17px;font-weight:700;letter-spacing:.004em;color:#FFFFFF;margin-top:12px} .rs .rs-sub{font-size:14px;color:#E7E2D9} .rs .rs-ic{background:rgba(201,161,94,.22);border-color:rgba(230,207,160,.6);color:#F2D9A6} .rs .rs-ring{opacity:.08;color:#E6CF9E}.res-hero .res-stats .rs.rs-doc::before{background:linear-gradient(90deg,#E6CF9E,#E6CF9E)}.res-hero .res-stats .rs.rs-doc b{color:#E6CF9E}.res-hero .res-stats .rs.rs-doc .rs-ic{background:#E6CF9E26;border-color:#E6CF9E;color:#E6CF9E}.res-hero .res-stats .rs.rs-doc .rs-go{color:#E6CF9E}.res-hero .res-stats .rs.rs-calc::before{background:linear-gradient(90deg,#E6CF9E,#E6CF9E)}.res-hero .res-stats .rs.rs-calc b{color:#E6CF9E}.res-hero .res-stats .rs.rs-calc .rs-ic{background:#E6CF9E26;border-color:#E6CF9E;color:#E6CF9E}.res-hero .res-stats .rs.rs-calc .rs-go{color:#E6CF9E}.res-hero .res-stats .rs.rs-gl::before{background:linear-gradient(90deg,#E6CF9E,#E6CF9E)}.res-hero .res-stats .rs.rs-gl b{color:#E6CF9E}.res-hero .res-stats .rs.rs-gl .rs-ic{background:#E6CF9E26;border-color:#E6CF9E;color:#E6CF9E}.res-hero .res-stats .rs.rs-gl .rs-go{color:#E6CF9E}.res-hero .res-stats .rs.rs-cert::before{background:linear-gradient(90deg,#E6CF9E,#E6CF9E)}.res-hero .res-stats .rs.rs-cert b{color:#E6CF9E}.res-hero .res-stats .rs.rs-cert .rs-ic{background:#E6CF9E26;border-color:#E6CF9E;color:#E6CF9E}.res-hero .res-stats .rs.rs-cert .rs-go{color:#E6CF9E}.rs .rs-ic{width:38px;height:38px;border-width:2px}.rs .rs-ic svg{width:20px;height:20px} .rs .rs-go{opacity:.9;transform:none;color:#E8CC92} .res-hero .res-stats .rs:hover,.res-hero .res-stats .rs:focus-visible{border-color:#E6CFA0;background:linear-gradient(155deg,#305EA3 0%,#254F8C 48%,#1D4277 100%)} .res-hero .res-stats .rs:focus-visible{box-shadow:var(--fring-in),inset 0 1px 0 rgba(217,196,158,.2),0 16px 34px -14px rgba(0,0,0,.7)} @media (max-width:600px){.res-hero .res-stats .rs span{font-size:13.5px;letter-spacing:.01em}.rs .rs-sub{font-size:13.5px;line-height:1.5}.rs .rs-go{display:inline}} .rq-appcard{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:18px;margin-top:26px;max-width:640px;padding:18px 22px;border-radius:6px;text-decoration:none;color:#F4F1EA;position:relative;overflow:hidden; background:linear-gradient(155deg,#2A5596 0%,#204780 48%,#193B6E 100%);border:1px solid rgba(214,182,124,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 30px -12px rgba(3,10,26,.75);transition:transform .25s ease,border-color .25s ease} .rq-appcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#F2D38E,#C9A15E)} .rq-appcard img{width:56px;height:56px;border-radius:13px;box-shadow:0 6px 16px -6px rgba(0,0,0,.6)} .rq-app-t{display:grid;gap:3px} .rq-app-k{font-family:var(--serif);font-style:italic;font-size:15px;color:#F0D496} .rq-appcard b{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.2;color:#FFFFFF} .rq-app-d{font-size:14px;line-height:1.5;color:#E7E2D9} .rq-app-go{white-space:nowrap;font-weight:600;font-size:14px;color:#1A1405;background:var(--brass-sheen,#C9A15E);padding:10px 16px;border-radius:4px} .rq-appcard:hover,.rq-appcard:focus-visible{transform:translateY(-2px);border-color:#E6CFA0} @media (max-width:600px){.rq-appcard{grid-template-columns:48px minmax(0,1fr);gap:14px;padding:16px}.rq-appcard img{width:48px;height:48px;border-radius:11px}.rq-app-go{grid-column:1 / -1;justify-self:start}.rq-appcard b{font-size:20px}} @media (prefers-reduced-motion:reduce){.rq-appcard{transition:none}} a.more-app{background:linear-gradient(155deg,#2A5596 0%,#1C3F74 100%)!important;border-color:rgba(214,182,124,.6)!important} a.more-app b{color:#FFFFFF!important}a.more-app span{color:#E7E2D9!important} a.more-app img{width:28px;height:28px;border-radius:7px} .hero-facts span{font-size:13px;color:#D4CBBC} .bp-row .lbl small{font-size:13px;color:#D4CBBC} .bp-axis{font-size:12px;color:#D4CBBC} .bundle.feature .was{color:#D4CBBC} .pill{font-size:12.5px;padding:6px 10px} .fmt .best{font-size:12px;padding:4px 8px} .hp-key{font-size:13px;color:#D4CBBC} .hp-small{font-size:13px;color:#D4CBBC} .hp-rows b small{font-size:12.5px;color:#D4CBBC} .site-foot .foot-h{font-size:13.5px;letter-spacing:.02em} .site-foot .legal{font-size:13px;color:#CFC8BD} .legal-links{align-items:baseline} .prose th,.tbl-wrap th{font-size:13px} .calc .note{font-size:13px;color:var(--muted)} .dg-cta-go{display:inline-flex;align-items:center;gap:6px;background:var(--navy);color:#F4F1EA;padding:10px 16px;border-radius:4px;font-size:14px;font-family:var(--sans);font-weight:600} .dg-cta:hover .dg-cta-go{background:#173C78} .hub-start{background:var(--brass-sheen,#C9A15E);color:#0B1A33!important;padding:8px 14px;border-radius:4px;font-weight:600} .samp-buy{margin-left:8px;vertical-align:middle} .look-in{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--brass-deep);color:var(--text);background:color-mix(in srgb,var(--brass) 10%,var(--surface));font-weight:600} .look-in svg{width:16px;height:16px;color:var(--brass-deep)} .look-in:hover{border-color:var(--brass);background:color-mix(in srgb,var(--brass) 18%,var(--surface))} .shelf-more{border-color:var(--brass-deep);background:color-mix(in srgb,var(--brass) 10%,var(--surface));font-weight:600} /* non-breaking space, so the arrow can never be left alone on a line */ .res-more-grid a b::after{content:"\00a0\2192";color:var(--brass-deep);font-weight:600} .res-more-grid a{transition:border-color .2s,transform .2s} .res-more-grid a:hover{transform:translateY(-2px)} .lib-jump button.hot{background:var(--surface);border-color:var(--brass);color:var(--text)} .lims .nw{white-space:nowrap;display:inline-block} .tbl-wrap{background:linear-gradient(90deg,var(--surface) 30%,transparent),linear-gradient(90deg,transparent,var(--surface) 70%) 100% 0,radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.18),transparent),radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.18),transparent) 100% 0;background-repeat:no-repeat;background-size:40px 100%,40px 100%,14px 100%,14px 100%;background-attachment:local,local,scroll,scroll} .hourly{background:linear-gradient(90deg,transparent calc(100% - 28px),rgba(0,0,0,.06))} @media (min-width:1100px){.res-jump{gap:6px 16px;font-size:13.5px}} @media (max-width:760px){ .legal-links>span{flex-basis:100%} .res-quick>span{flex-basis:100%} .su-chips{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .su-chips label{justify-content:flex-start} .chooser-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} .chooser-opts button{padding:10px 6px;font-size:13px} .calc-tabs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .calc-tabs button{border-bottom:1px solid var(--line)} .dg-cta-go{justify-self:start} .res-more-grid .more-app{order:-1} .buybar{transform:translateY(110%);transition:transform .25s ease} .buybar.on{transform:none} .samp-buy{display:flex;margin:10px auto 0} } :root[data-theme="dark"] .su-form{background:#16305C;border:1px solid rgba(214,182,124,.45)} :root[data-theme="dark"] .su-chips label{background:#1C3A6E;border-color:#3A5A8C} :root[data-theme="dark"] .cons-stats{background:#13294D;border-color:var(--line)} :root[data-theme="dark"] .stmt .l1{color:#C3D2E6} :root[data-theme="dark"] .cons-stats div{border-color:var(--line)} :root[data-theme="dark"] .cons-stats .ours{background:#244A8A;box-shadow:inset 0 0 0 1px #C9A15E} :root[data-theme="dark"] .cmp-table thead .us{background:#244A8A;color:#F0D496} :root[data-theme="dark"] .cmp-table .us{background:rgba(255,255,255,.05);box-shadow:inset 3px 0 0 #C9A15E} :root[data-theme="dark"] .pick-o button{background:#13294D;border-color:#3A5A8C} :root[data-theme="dark"] .pick-o button[aria-pressed="true"]{border-color:#C9A15E; box-shadow:inset 0 0 0 1px #C9A15E,inset 4px 0 0 #E3C384; background:rgba(201,161,94,.20);font-weight:600} .pick-o button[aria-pressed="true"]::after{color:#E3C384} :root[data-theme="dark"] .wx-units button[aria-pressed="true"]{background:var(--brass);color:#0C2249} :root[data-theme="dark"] .chooser-opts button[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:#0C2249} :root[data-theme="dark"] .lib-jump button.hot{background:#13294D;border-color:var(--brass);color:#F4F1EA} :root[data-theme="dark"] .kit-grid>div,:root[data-theme="dark"] .kit-terms>div{background:#16305C;border-color:var(--line)} :root[data-theme="dark"] .dg-card{background:#13294D;border-color:var(--line)} :root[data-theme="dark"] .gear-card{background:#13294D;border-color:var(--line)} :root[data-theme="dark"] .oh-drop{background:#16305C;border-color:#4A6A9C} :root[data-theme="dark"] .dg-cta-ic{background:var(--brass);color:#0C2249} :root[data-theme="dark"] .dg-cta-go{background:var(--brass);color:#0C2249} :root[data-theme="dark"] .hub-dg{background:#1E447F;border-color:#C9A15E;border-top-color:#C9A15E} :root[data-theme="dark"] .hp-key,:root[data-theme="dark"] .hp-small{color:#D4CBBC} :root[data-theme="dark"] .look-in{background:rgba(201,161,94,.14);border-color:#C9A15E;color:#F4F1EA} :root[data-theme="dark"] .look-in svg{color:#E6CFA0} :root[data-theme="dark"] .shelf-more{background:rgba(201,161,94,.12);border-color:#C9A15E;color:#F4F1EA} :root[data-theme="dark"] .res-more-grid a b::after{color:#E6CFA0} :root[data-theme="dark"] .hourly text{fill:#B8C4D8} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .su-form{background:#16305C;border:1px solid rgba(214,182,124,.45)} :root:not([data-theme="light"]) .su-chips label{background:#1C3A6E;border-color:#3A5A8C} :root:not([data-theme="light"]) .cons-stats{background:#13294D;border-color:var(--line)} :root:not([data-theme="light"]) .stmt .l1{color:#C3D2E6} :root:not([data-theme="light"]) .cons-stats div{border-color:var(--line)} :root:not([data-theme="light"]) .cons-stats .ours{background:#244A8A;box-shadow:inset 0 0 0 1px #C9A15E} :root:not([data-theme="light"]) .cmp-table thead .us{background:#244A8A;color:#F0D496} :root:not([data-theme="light"]) .cmp-table .us{background:rgba(255,255,255,.05);box-shadow:inset 3px 0 0 #C9A15E} :root:not([data-theme="light"]) .pick-o button{background:#13294D;border-color:#3A5A8C} :root:not([data-theme="light"]) .pick-o button[aria-pressed="true"]{border-color:#C9A15E; box-shadow:inset 0 0 0 1px #C9A15E,inset 4px 0 0 #E3C384; background:rgba(201,161,94,.20);font-weight:600} .pick-o button[aria-pressed="true"]::after{color:#E3C384} :root:not([data-theme="light"]) .wx-units button[aria-pressed="true"]{background:var(--brass);color:#0C2249} :root:not([data-theme="light"]) .chooser-opts button[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:#0C2249} :root:not([data-theme="light"]) .lib-jump button.hot{background:#13294D;border-color:var(--brass);color:#F4F1EA} :root:not([data-theme="light"]) .kit-grid>div,:root:not([data-theme="light"]) .kit-terms>div{background:#16305C;border-color:var(--line)} :root:not([data-theme="light"]) .dg-card{background:#13294D;border-color:var(--line)} :root:not([data-theme="light"]) .gear-card{background:#13294D;border-color:var(--line)} :root:not([data-theme="light"]) .oh-drop{background:#16305C;border-color:#4A6A9C} :root:not([data-theme="light"]) .dg-cta-ic{background:var(--brass);color:#0C2249} :root:not([data-theme="light"]) .dg-cta-go{background:var(--brass);color:#0C2249} :root:not([data-theme="light"]) .hub-dg{background:#1E447F;border-color:#C9A15E;border-top-color:#C9A15E} :root:not([data-theme="light"]) .hp-key,:root:not([data-theme="light"]) .hp-small{color:#D4CBBC} :root:not([data-theme="light"]) .look-in{background:rgba(201,161,94,.14);border-color:#C9A15E;color:#F4F1EA} :root:not([data-theme="light"]) .look-in svg{color:#E6CFA0} :root:not([data-theme="light"]) .shelf-more{background:rgba(201,161,94,.12);border-color:#C9A15E;color:#F4F1EA} :root:not([data-theme="light"]) .res-more-grid a b::after{color:#E6CFA0} :root:not([data-theme="light"]) .hourly text{fill:#B8C4D8} } :root[data-theme="dark"]{color-scheme:dark} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}} input[type=radio],input[type=checkbox]{accent-color:#B48A45} .air-view{margin-left:18px;padding-left:18px;border-left:1px solid var(--line)} @media (max-width:760px){.air-view{margin-left:0;padding-left:0;border-left:0;flex-basis:100%;margin-top:6px}} .calc .wb td:first-child,.calc .wb th:first-child{width:46%} .calc .wb input{min-width:0} .wx-card .raw{white-space:pre;overflow-x:auto} .upd-log .upd:last-child{border-bottom:0} :root[data-theme="dark"] .dg-card{background:#1A3768;border-color:#3A5A8C} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dg-card{background:#1A3768;border-color:#3A5A8C}} .cv-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block} .cover:has(.cv-img){padding:0} .cover:has(.cv-img)::before,.cover:has(.cv-img)::after{z-index:1} .cover:has(.cv-img)::after, .cover.pp{background:linear-gradient(168deg,#886427 0%,#866225 55%,#825E22 100%);--cacc:#E2C092;--csoft:#FFEAD1} .cover.pp2{background:linear-gradient(168deg,#63451D 0%,#61431B 55%,#5E4019 100%);--cacc:#B29577;--csoft:#CFB9A2} .cover.pp3{background:linear-gradient(168deg,#3F2913 0%,#3D2711 55%,#3A250E 100%);--cacc:#8A7563;--csoft:#A39386} .cover.set,.cover.v1{background:linear-gradient(168deg,#436EB7 0%,#406CB5 55%,#3D69B1 100%);--cacc:#B8CAFE;--csoft:#F1F4FF} .cover.v2{background:linear-gradient(168deg,#3E4F88 0%,#3C4D86 55%,#394A82 100%);--cacc:#9AA1CE;--csoft:#C2C5E3} .cover.v3{background:linear-gradient(168deg,#31325C 0%,#2F315A 55%,#2C2E57 100%);--cacc:#817FA0;--csoft:#A09EB7} .cover.ir{background:linear-gradient(168deg,#8D2C38 0%,#892835 55%,#842431 100%);--cacc:#D19193;--csoft:#E1AFB0} .cover.cfi{background:linear-gradient(168deg,#005A5D 0%,#00575A 55%,#005356 100%);--cacc:#77B1B1;--csoft:#9DC7C8} .cover.com{background:linear-gradient(168deg,#256F3B 0%,#206B38 55%,#1B6734 100%);--cacc:#87B18F;--csoft:#A8C7AD} .cover.atp{background:linear-gradient(168deg,#84477D 0%,#80447A 55%,#7B4075 100%);--cacc:#BD96B8;--csoft:#D1B3CD} .cover.amt{background:linear-gradient(168deg,#776A66 0%,#756864 55%,#726561 100%);--cacc:#D6C5C0;--csoft:#F8F0EE} .cover.amt2{background:linear-gradient(168deg,#625A57 0%,#605855 55%,#5D5552 100%);--cacc:#BEADA8;--csoft:#DAD5D3} .cover.amt3{background:linear-gradient(168deg,#504948 0%,#4E4846 55%,#4B4543 100%);--cacc:#A89793;--csoft:#BEBBBA} .cover.amt4{background:linear-gradient(168deg,#403A38 0%,#3E3836 55%,#3B3534 100%);--cacc:#948480;--csoft:#AAA6A5} .cover.amt5{background:linear-gradient(168deg,#302A29 0%,#2E2927 55%,#2C2625 100%);--cacc:#847470;--csoft:#969392} .cover.amtall{background:linear-gradient(168deg,#211C1B 0%,#201A19 55%,#1D1817 100%);--cacc:#776865;--csoft:#888584} .cover.amtall::before{width:6%;background:linear-gradient(180deg,#856609 0% 20%,#0E6A91 20% 40%,#B9301A 40% 60%,#0A6C41 60% 80%,#823DB0 80% 100%)} /* --cacc deliberately NOT set here. This rule is (0,2,0): :not() and :has() take the specificity of their argument, so .cover:not(:has(.cv-img)) ties .cover. and, being later in source order, won every tie. Result: all 23 covers computed the one brass #C9A15E and 10 declared per-series accents never rendered (amtall #93A3B3, pp3 #E0A9A0, pp2 #E6CF9E, amt2/amt4 #E3C384, amt3/amt5 #D9BC85, heli #C9A227, com/amt #E8CB94). The default already lives on .cover at (0,1,0), which is where it belongs. Verified on the computed value, not the declaration. */ .cover:not(:has(.cv-img)){padding:0;display:block} .cover .cz-art{position:absolute;inset:0;width:100%;height:100%;display:block} /* DIAL BEZEL ON COVERS. The lockup's O is an altimeter face and its ring is the bezel. The ring used to be pinned to brass #E6CF9E by the inline on the cover lockup, while the letters beside it were near-white, so the O carried a flat 66.8% of the letters' contrast on EVERY cover -- and on the warm brown and gold grounds the brass ring is also the same hue family as the ground, so it receded further than the contrast figure suggests. That is the blend visible on the Private Pilot cover. The fix is a deletion, not a new color: --lk-ring is no longer set on the cover lockup, so the symbol's own fallback var(--lk-ring,var(--lk-ink)) takes over and the bezel inherits the ink. The O now matches its letters on every ground, including any cover added later, with no per-cover rule to maintain. MEASURE BEHIND THE DIAL, NOT AT THE TOP OF THE GRADIENT. Nearly every cover is a 168deg gradient and the lockup sits ~77% down it, where the ground is far darker. Sampling the declared top color overstated the problem (reported 2.32:1 on v2 when the true ground behind the dial gives 3.31:1) and nearly justified a per-cover navy bezel that the rendered comparison showed was wrong on 21 of 23 covers. Brass never actually fell below 3.31:1 anywhere: the defect was relative, not absolute, which is exactly why it had to be judged by eye and not by ratio. */ .cover .cz-num{font-family:var(--serif);font-size:700px;fill:rgba(0,0,0,.2)} .cover .cz-wm{font-family:var(--serif);font-size:68px;letter-spacing:5px;fill:#F4F1EA} .cover .cz-pr{font-family:var(--serif);font-size:24px;letter-spacing:11px;fill:#C9A15E} .cover .cz-top{position:absolute;left:7.1%;right:7%;top:6.4%;font:500 2.3cqw/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:#F4F1EA;white-space:nowrap;overflow:hidden} .cover .cz-hd{position:absolute;left:7.1%;right:22%;top:17%} .cover .cz-t{display:block;font:700 7.6cqw/1.06 "Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;color:#F4F1EA;letter-spacing:.005em} .cover .cz-t.long{font-size:6.4cqw} .cover .cz-s{display:block;margin-top:2.8cqw;font:italic 400 4.1cqw/1.25 var(--serif);color:#F4F1EA} .cover .cz-v{position:absolute;left:7.1%;top:86.2%;font:700 2.2cqw/1 "Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;color:#F4F1EA;letter-spacing:.02em} .cover use[href="#cvlock"]{--lk-press:var(--lk-ink);--lk-hub:var(--lk-ink);--lk-needle:var(--lk-ink)}/* cover colophon is single-ink: every cover is painted in one of the four brand colors, so a four-color mark always loses whichever color matches its cover. Measured chromatic distance from the ground: Private Pilot 4.7 -> 25.9, Helicopter 6.6 -> 26.1, 107 Vol 2 9.6 -> 32.5. The full-color mark is kept for the site header, the seal and the title page. */.cover .cz-e{position:absolute;left:7.1%;top:89.9%;font:400 2cqw/1 "Helvetica Neue",Helvetica,Arial,sans-serif;color:#F4F1EA} .band-navy .cover,.hero .cover{box-shadow:0 0 0 2px rgba(244,241,234,.58),0 16px 32px rgba(0,0,0,.45)} .pol-wrap{padding-block:56px 96px} /* 5.88: same fault, 8 policy routes. A 780px head in a 1132px band with no auto margin left 352px dead on the right of every policy page heading. */ .pol-head{max-width:780px;margin-top:18px;margin-inline:auto} .pol-head h1{font-size:clamp(32px,4vw,48px);font-weight:400;margin-top:6px;line-height:1.1} .pol-lede{font-size:18px;line-height:1.6;color:var(--text);margin-top:14px} .pol-date{margin-top:10px;font-size:14px;color:var(--faint);font-weight:500} .pol-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px;margin-top:44px;align-items:start} .pol-toc{position:sticky;top:110px;display:grid;gap:2px;border-left:2px solid var(--line);padding-left:18px} .pol-toc-h{font-family:var(--label);font-style:italic;color:var(--accent);font-size:15px;margin-bottom:8px} .pol-toc a{color:var(--text);text-decoration:none;font-size:15.5px;font-weight:500;padding:7px 0;line-height:1.3} .pol-toc a:hover{color:var(--accent)} .pol-toc-q{margin-top:16px;font-size:14px;line-height:1.5;color:var(--muted)} .pol-toc-q a{display:inline;padding:0;font-weight:400;text-decoration:underline;font-size:14px} /* 6.93 An implicit grid track is auto, and auto has a min-content floor. With no column template .pol-body grew to 672px inside a 292px column at 320px and took every child with it. Same family as the bare 1fr tracks. */ .pol-body{max-width:780px;display:grid;grid-template-columns:minmax(0,1fr);gap:22px} /* 7.15 THE ONE PART OF A 4,699px LEGAL PAGE ANYONE ACTUALLY READS SHOULD LOOK LIKE IT. The policy page ran top to bottom in cream with no dark mark on it at all. "At a glance" is the summary, so it carries the weight. A panel that paints its own dark ground MUST redefine the tokens its children read, or the children keep light-mode ink and the panel is unreadable -- the Class B bug. */ .pol-glance{background:var(--navy);background-image:var(--lacquer);color:#E9E4D8;border:1px solid rgba(255,255,255,.16);border-left:4px solid var(--brass);border-radius:4px;padding:26px 30px;--text:#E9E4D8;--muted:#CFC8BD;--faint:#AEBDCE;--mark:var(--brass);--accent:var(--brass-soft);--accent-strong:var(--brass-soft);--line:var(--line-on-dark);--rule:var(--line-on-dark)} .pol-glance h2{color:#F6F2E8} /* 7.44 THE FLIGHT CATEGORY IS THE PAGE'S VERDICT, so it is set as one. The four colours are the NWS standard, not a palette choice: a pilot reads the category by colour before reading the word, which is exactly why they are the only strong colours allowed to shout on this page. Text is white on all four and each was measured against its own band. */ .wxv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:center; border-radius:4px;padding:14px 18px;margin:0 0 14px;color:#fff} .wxv-cat{font:700 26px/1 var(--mono);letter-spacing:.02em;grid-row:span 2;align-self:center} .wxv-txt{font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.92)} .wxv-txt b{color:#fff;font-weight:600} .wxv-apt{font-family:var(--serif);font-size:17px;color:#fff;align-self:end} .wxv-VFR{background:#2F6B4F} .wxv-MVFR{background:#2B5C9A} .wxv-IFR{background:#9A2B2B} .wxv-LIFR{background:#8A2B7A} @media (max-width:560px){.wxv{grid-template-columns:minmax(0,1fr);gap:7px} .wxv-cat{grid-row:auto;font-size:22px}} /* 7.40 The free tools grid on the home page. Cards, not a list: each one is a destination, so each needs a target big enough to be one. */ .freegrid{list-style:none;margin:30px 0 0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:14px} .freegrid a{display:grid;gap:5px;height:100%;padding:17px 19px;border:1px solid var(--rule); border-left:3px solid var(--brass);border-radius:3px;background:var(--surface); text-decoration:none;color:inherit;transition:border-color .18s,transform .18s,box-shadow .18s} .freegrid a:hover{border-color:var(--brass);transform:translateY(-2px);box-shadow:var(--shadow)} .freegrid b{font-family:var(--serif);font-weight:500;font-size:19px;line-height:1.2;color:var(--text)} .freegrid span{font-size:14px;line-height:1.5;color:var(--muted)} /* 7.39 The two legs of the readiness argument, set as figure and sentence so the numbers carry rather than hide inside a paragraph. In the hero, which is navy, so the colours are fixed to the band rather than to the scheme. */ .eng-lead{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px;max-width:62ch} .eng-lead li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:baseline} .eng-lead .el-n{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,38px); line-height:1;color:var(--brass);white-space:nowrap} .eng-lead span{font-size:15.5px;line-height:1.6;color:#CFC8BD} .eng-lead span b{color:#F2EEE4;font-weight:600} @media (max-width:620px){.eng-lead li{grid-template-columns:minmax(0,1fr);gap:4px}} /* 7.20 ELEVEN ROWS, AND SIX OF THEM CARRIED THE IDENTICAL CLEARANCE WRITTEN OUT LONGHAND. "500 below, 1,000 above, 2,000 horizontal" wrapped to two lines in every one of those six cells, so the repeats never lined up and the eye slid off the whole thing. Splitting the distances into their own columns makes the six identical rows align exactly, which is what turns "same, same, same, DIFFERENT" into something the eye can see. Nothing is abbreviated away: the units move into the header so the cells can stay short enough not to wrap. */ .vfr-tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums} .vfr-tbl th{font:600 11.5px var(--label);letter-spacing:.07em;text-transform:uppercase; color:var(--muted);text-align:left;padding:0 0 9px;white-space:nowrap;vertical-align:bottom} .vfr-tbl thead tr:last-child th{border-bottom:1px solid var(--rule)} .vfr-tbl th.n,.vfr-tbl td.n{text-align:right;white-space:nowrap;padding-left:20px} .vfr-tbl th.grp{text-align:center;padding-bottom:4px;color:var(--faint);font-size:11px} .vfr-tbl td{padding:11px 0;border-bottom:1px solid var(--line);font-size:15.5px;vertical-align:baseline} .vfr-tbl td.a{padding-right:18px;line-height:1.35} .vfr-tbl td.cc{text-align:right;color:var(--muted);white-space:nowrap;padding-left:20px} .vfr-tbl tr.hi td{background:var(--chip)} .vfr-tbl tr.hi td.a{font-weight:600} .vfr-tbl tbody tr:last-child td{border-bottom:0} @media (max-width:700px){.vfr-tbl td{font-size:14.2px;padding:9px 0} .vfr-tbl th.n,.vfr-tbl td.n{padding-left:12px}.vfr-tbl td.a{padding-right:12px} .vfr-tbl th{font-size:10.5px;letter-spacing:.04em}} @media (max-width:620px){ .vfr-tbl,.vfr-tbl tbody,.vfr-tbl tr,.vfr-tbl td{display:block;width:auto} .vfr-tbl thead{display:none} .vfr-tbl tr{padding:13px 0;border-bottom:1px solid var(--line)} .vfr-tbl tr.hi{background:var(--chip);padding-inline:12px;border-radius:3px} .vfr-tbl td{border:0;padding:0;font-size:14.5px} .vfr-tbl td.a{font-weight:600;color:var(--text);margin-bottom:8px;padding-right:0;line-height:1.3} .vfr-tbl td.n,.vfr-tbl td.cc{display:inline-block;text-align:left;padding:0; margin:0 16px 4px 0;color:var(--muted);white-space:nowrap} .vfr-tbl td.n::before,.vfr-tbl td.cc::before{content:attr(data-k); font:600 10px var(--label);letter-spacing:.07em;text-transform:uppercase; color:var(--faint);margin-right:5px} .vfr-tbl tbody tr:last-child td{border-bottom:0}} /* 7.17 THE MEDICAL PAGE IS 21,391px LONG AND ITS MOST IMPORTANT SENTENCE WAS SET AS ORDINARY BODY COPY. A two column layout cannot carry a full-bleed band, so the weight goes on a pull panel inside the column instead. Tokens are redefined for the subtree because the panel paints its own dark ground. */ .med-pull{background:var(--navy);background-image:var(--lacquer);color:#F2EEE4; border-left:4px solid var(--brass);border-radius:4px;padding:26px 30px;margin:26px 0 10px; --text:#F2EEE4;--muted:#CFC8BD;--faint:#AEBDCE;--mark:var(--brass); --accent:var(--brass-soft);--accent-strong:var(--brass-soft); --line:var(--line-on-dark);--rule:var(--line-on-dark)} .med-pull p{margin:0;color:#E6E1D5} .med-pull p + p{margin-top:12px} .med-pull b{color:#FFFFFF} .med-pull .mp-k{font:600 12.5px var(--label);letter-spacing:.09em;text-transform:uppercase; color:var(--brass);margin-bottom:10px} .med-pull .mp-lead{font-family:var(--serif);font-size:clamp(21px,2.3vw,27px);line-height:1.3;color:#FFFFFF} .pol-glance li{color:#E3DFD4} .pol-glance li a{color:#F0D496;text-decoration:underline;text-underline-offset:3px} .pol-glance h2{font-size:22px;margin-bottom:10px} .pol-glance ul{margin:0;padding-left:20px;display:grid;gap:8px} .pol-glance li{font-size:16.5px;line-height:1.55;color:var(--text)} .pol-glance li a{font-size:14px;margin-left:4px;white-space:nowrap} .pol-sec{background:var(--surface);border:1px solid var(--line);padding:30px 34px;scroll-margin-top:110px} .pol-sec h2{font-size:28px;margin-bottom:12px} .pol-short{font-size:17px;line-height:1.55;color:var(--text);padding:12px 16px;background:var(--paper-2);border-radius:2px;margin-bottom:16px} .pol-short b{color:var(--accent-strong)} .pol-sec p:not(.pol-short){font-size:17px;line-height:1.7;color:var(--text);max-width:68ch} .pol-sec p+p{margin-top:14px} .pol-sec .tbl-wrap{margin:14px 0 16px;max-width:560px;border:0} .pol-tbl th{font-family:var(--sans);background:none;font-size:14px} .pol-tbl td:first-child{font-weight:600} .pol-tbl{border-collapse:collapse;width:100%;max-width:560px;font-size:16px} .pol-tbl th{text-align:left;font-weight:600;font-size:14px;color:var(--muted);border-bottom:2px solid var(--line);padding:8px 14px 8px 0} .pol-tbl td{border-bottom:1px solid var(--line);padding:10px 14px 10px 0;color:var(--text)} .pol-tbl td:last-child,.pol-tbl th:last-child{text-align:right;padding-right:0;font-variant-numeric:tabular-nums} @media (max-width:900px){ .pol-layout{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:28px} .pol-toc{position:static;border-left:0;padding-left:0;display:flex;flex-wrap:wrap;gap:8px} .pol-toc-h,.pol-toc-q{display:none} .pol-toc a{border:1px solid var(--line);background:var(--surface);padding:9px 14px;font-size:15px} .pol-sec{padding:22px 20px} .pol-glance{padding:20px} .pol-sec h2{font-size:24px} } .eng-note{font-size:16.5px;line-height:1.65;color:var(--text);max-width:70ch} /* ==== 6.16 THE PROOF POINT WAS BURIED IN BODY COPY. 28 October 2026 ==== Owner flagged this box for heading size and attention. The deeper problem: the single strongest thing on the page -- 56% recalled after self-testing against 42% after rereading (Roediger & Karpicke 2006) -- sat mid-paragraph in 16px body copy. That figure IS the argument for the product. The evidence now leads and the prose supports it, which is the ordinary order for a proof point. One vivid mark (the 56%), everything else quiet -- the same rule applied to the weather icons in 6.06 and the official-services actions in 6.14. #1F6B45 reads 6.47:1 on the white callout and #6E6A62 reads 5.38:1, so both clear SC 1.4.3 even as body text, not just as the large text they are. The claim and both citations are UNCHANGED. */ .eng-why{font-size:16px;line-height:1.65;color:var(--text);background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brass);padding:20px 24px 22px;max-width:74ch} .eng-why b.eng-why-h{display:block;font-family:var(--serif);font-size:24px;font-weight:500;margin-bottom:14px;letter-spacing:-.005em} .eng-fig{display:flex;gap:30px;align-items:flex-end;margin:0 0 6px;flex-wrap:wrap} .eng-fig > span{display:grid;gap:1px} .eng-figcap{display:block} .eng-fig .n,.eng-fig .k{display:block} .eng-fig .n{font-family:var(--serif);font-size:44px;line-height:.95;font-weight:400} .eng-fig .win .n{color:#1F6B45} .eng-fig .lose .n{color:#6E6A62} .eng-fig .k{font-size:13.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)} .eng-figcap{margin:0 0 14px;font-size:14px;color:var(--muted)} /* The comparison IS the point, so the pair must stay side by side at phone width. nowrap plus min-width:0 lets each LABEL wrap inside its own column instead of the two figures breaking apart onto separate rows. */ @media (max-width:560px){ .eng-fig{gap:18px;flex-wrap:nowrap;align-items:flex-start} .eng-fig > span{min-width:0} .eng-fig .n{font-size:34px} .eng-fig .k{font-size:12px;letter-spacing:.02em}} .upd-rail{position:sticky;top:110px;display:grid;gap:18px;border-left:2px solid var(--line);padding-left:18px} .upd-fact{display:grid;gap:4px;font-size:15px;line-height:1.5;color:var(--muted)} .upd-fact b{color:var(--text);font-weight:600;font-size:15.5px} .upd-h{font-size:32px;font-family:var(--serif);font-weight:500} .upd-card h3{font-size:24px;margin:8px 0 12px} .upd-chip{display:inline-block;font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--accent-strong);background:var(--paper-2);border:1px solid var(--line);padding:4px 10px} .pol-sec p.upd-meta{font-size:14.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin-top:16px} .pol-sec p.upd-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px} @media (max-width:900px){.upd-rail{position:static;border-left:0;padding-left:0;grid-template-columns:minmax(0,1fr);background:var(--paper-2);border:1px solid var(--line);padding:18px}} /* ==== 5.88 A CAPPED COLUMN MUST BE CENTERED, 27 October 2026 ==== OWNER sent the Study on your phone page: "completely unbalanced". MEASURED: every direct child of .app-wrap is capped at 1000px inside a 1132px band with margin-left and margin-right both 0, so the whole page sat flush left with a 132px dead strip down the right of EVERY block: the breadcrumb, the hero, the callout, the steps and the FAQ. Five blocks, one cause. WHY THE BALANCE DETECTOR NEVER SAW IT. That detector looks INSIDE multi-column containers for a cell whose ink stops early. Here nothing is wrong inside any container: the container itself is narrower than its band and pinned to one side. It was measuring the wrong frame, so the page reported clean while being visibly lopsided. A new check, width2.js, measures every block against its band and is recorded at 5.89. A cap is a measure, not an alignment. margin-inline:auto centers the column. */ .app-wrap>*{max-width:1000px;margin-inline:auto} .app-faq{gap:0;border-top:1px solid var(--line)} .app-faq details{border:0;border-bottom:1px solid var(--line);background:none;padding:0} .app-faq summary{list-style:none;cursor:pointer;font-family:var(--serif);font-size:20px;font-weight:400;color:var(--text);display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0} .app-faq summary::-webkit-details-marker{display:none} .app-faq summary::after{content:"";width:9px;height:9px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);margin-right:6px;transition:transform .2s;flex:none} .app-faq details[open] summary::after{transform:rotate(-135deg)} .app-faq p{color:var(--text);font-size:16.5px;line-height:1.65;margin:0 0 18px;max-width:68ch} .co-empty{padding-block:64px 96px;text-align:center}.co-empty p{color:var(--muted);font-size:17px;margin:10px 0 22px}.co-empty-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .gear-new{display:grid;gap:26px} .gear-new [id^="gear-"]{scroll-margin-top:96px} .gr-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);padding:18px 24px} .gr-count{font-size:16px;color:var(--text);margin:0} .gr-jump{display:flex;flex-wrap:wrap;gap:8px} .gr-jump a{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--bg);color:var(--text);text-decoration:none;font-size:14.5px;font-weight:500;padding:7px 12px} .gr-jump a:hover{border-color:var(--accent)} .gr-jump a span{font-family:var(--mono);font-size:12px;background:var(--paper-2);border:1px solid var(--line);padding:1px 6px} .gr-packed{margin:0;font-size:14.5px;font-weight:600;color:var(--accent-strong)} .gr-head{display:flex;align-items:center;gap:16px;margin-bottom:18px} .gr-head h2{font-size:28px;margin:0} .gr-head p{margin:2px 0 0;font-size:16px;color:var(--muted)} .gr-ic{width:44px;height:44px;flex:none;padding:10px;border-radius:50%;color:var(--gc);background:color-mix(in srgb,var(--gc) 14%,transparent)} .gr-check{position:relative;display:inline-flex;cursor:pointer;margin-top:3px} .gr-check input{position:absolute;opacity:0;width:26px;height:26px;margin:0;cursor:pointer} .gr-box{width:26px;height:26px;border:2px solid var(--gc,var(--accent));background:var(--surface);display:grid;place-items:center;transition:background .15s} .gr-check input:checked+.gr-box{background:var(--gc,var(--accent))} .gr-check input:checked+.gr-box::after{content:"";width:7px;height:13px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:translateY(-2px) rotate(45deg)} .gr-check input:focus-visible+.gr-box{outline:2px solid var(--fring-out);outline-offset:2px;box-shadow:var(--fring-in)} .gr-req{--gc:#C9A15E;background:var(--lacquer);color:#F4F1EA;padding:30px 32px;border-top:4px solid var(--brass)} .gr-req .gr-head h2{color:#F4F1EA}.gr-req .gr-head p{color:#C9D3DF} .gr-req .gr-ic{color:#E3C384;background:rgba(201,161,94,.16)} .gr-req-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .gr-ritem{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);padding:22px} .gr-ritem .gr-box{background:transparent;border-color:#E3C384} .gr-ritem h3{font-size:24px;color:#F4F1EA;margin:8px 0 8px} .gr-ritem p{font-size:16px;line-height:1.6;color:#DCE3EC;margin:0} .gr-badges{display:flex;flex-wrap:wrap;gap:8px} .gr-must{background:#C9A15E;color:#0C2249;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px} .gr-cite{border:1px solid rgba(227,195,132,.6);color:#E3C384;font-family:var(--mono);font-size:12.5px;padding:2px 8px} .gr-ritem .gr-look{border-left:0;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.16);background:none;padding-left:0;padding-right:0;color:#F4F1EA} .gr-ritem .gr-look b{color:#E3C384} .gr-rec-h{font-family:var(--label);font-style:italic;color:var(--accent);font-size:18px;margin:10px 0 -8px} .gr-group{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--gc);padding:26px 30px 10px} .gr-power{--gc:#A8690B}.gr-field{--gc:#5A1B23}.gr-planning{--gc:#2A4774} .gr-list{list-style:none;margin:0;padding:0} .gr-item{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,.9fr);gap:12px 22px;align-items:start;border-top:1px solid var(--line);padding:18px 0} .gr-main h4{font-family:var(--serif);font-size:21px;font-weight:500;margin:0 0 4px;color:var(--text)} .gr-main p{margin:0;font-size:16px;line-height:1.6;color:var(--text)} .gr-look{margin:0;font-size:15.5px;line-height:1.55;color:var(--text);background:var(--paper-2);border-left:3px solid var(--gc);padding:10px 14px} .gr-look b{color:var(--accent-strong)} .gr-item.done .gr-main h4{text-decoration:line-through;text-decoration-color:var(--gc);text-decoration-thickness:2px} .gr-item.done .gr-main,.gr-item.done .gr-look{opacity:.62} .gr-ritem.done h3{text-decoration:line-through;text-decoration-color:#E3C384} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .gr-power{--gc:#E0A84A}:root:not([data-theme="light"]) .gr-field{--gc:#E3A2A7}:root:not([data-theme="light"]) .gr-planning{--gc:#A8C2E4}} :root[data-theme="dark"] .gr-power{--gc:#E0A84A}:root[data-theme="dark"] .gr-field{--gc:#E3A2A7}:root[data-theme="dark"] .gr-planning{--gc:#A8C2E4} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stool.eng .sth{color:#9CC6F5}:root:not([data-theme="light"]) .stool.cards .sth{color:#E0C69A}:root:not([data-theme="light"]) .stool.eng li::before{background:#9CC6F5}:root:not([data-theme="light"]) .stool.cards li::before{background:#E0C69A}} :root[data-theme="dark"] .stool.eng .sth{color:#9CC6F5}:root[data-theme="dark"] .stool.cards .sth{color:#E0C69A}:root[data-theme="dark"] .stool.eng li::before{background:#9CC6F5}:root[data-theme="dark"] .stool.cards li::before{background:#E0C69A} /* Readiness visuals. The icon array is the research-backed form for risk comprehension (Galesic, Garcia-Retamero and Gigerenzer 2009): it raised accuracy beyond numbers alone and helped low-numeracy readers most. Mark #8E2A2A measures 8.21:1 on the light card and #D98080 5.52:1 on the dark surface; mark-to-track separation is 4.15:1 light and 3.65:1 dark. */ .rdy-grids{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;margin:26px 0 8px} .rdy-card{border:1px solid var(--line);background:var(--surface);border-radius:4px;padding:20px 20px 18px;display:grid;grid-template-rows:auto auto 1fr auto auto;align-content:start} .rdy-card.hot{border-top:4px solid #8E2A2A} .rdy-card.cool{border-top:4px solid #1F7A58} .rdy-k{font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:#17543C;margin:0 0 3px} .rdy-card.hot .rdy-k{color:#8E2A2A} .rdy-h{display:flex;align-items:baseline;gap:10px;margin:2px 0 4px;flex-wrap:wrap}.rdy-h b{font-family:var(--serif);font-weight:400;font-size:clamp(42px,5.4vw,54px);line-height:.92;color:var(--text)}.rdy-card.hot .rdy-h b{color:#8E2A2A}.rdy-h span{font-size:16px;line-height:1.3;color:var(--muted)} .rdy-sub{font-size:14.5px;color:var(--text);margin:6px 0 16px;line-height:1.5} .rdy-arr{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;max-width:230px} .rdy-arr i{display:block;aspect-ratio:1;border-radius:1.5px;background:#C0B69F} .rdy-arr i.on{background:#8E2A2A} .rdy-leg{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--muted)} .rdy-leg span{display:flex;align-items:center;gap:7px} .rdy-leg b{display:inline-block;width:11px;height:11px;border-radius:2px;flex:none} .rdy-leg .sw-on{background:#8E2A2A} .rdy-leg .sw-off{background:#C0B69F} .rdy-tbl{width:100%;border-collapse:collapse;margin:24px 0 6px;font-size:15px} .rdy-tbl th,.rdy-tbl td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)} .rdy-tbl thead th{font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--rule-2)} .rdy-tbl td:first-child{font-weight:600;color:var(--text)} /* ==== 4.60 THE RECOMMENDATION WAS QUIETER THAN THE WARNING, 28 October 2026 ==== Found by applying checklist 7.1 and 7.3 site wide rather than to the page in hand. In this table .mark is the bad outcome and .aim is "the useful target", the row the whole article exists to point at. Measured on the white card: .mark #8E2A2A contrast 8.35 chroma 48.5 .aim #7A5F34 contrast 5.98 chroma 29.1 The row we want people to aim for was the fainter of the two, in both lightness and hue. An emphasis hierarchy that runs backwards is worse than no emphasis, because it steers the eye to the wrong line. The 7 and 14 percent fills also measured 1.12:1 against the row behind them, so the inset bar was doing all the work and the tint was decoration. .aim now carries the same green the readiness band uses for the good outcome, a solid fill and a 5px bar; .mark keeps red at 3px and steps back. Color also now agrees across the two places this content lives: green is the target in both, instead of green on the band and brown in the article. */ .rdy-tbl tr.mark td{background:#FBECEC;color:var(--text)} .rdy-tbl tr.mark td:first-child{box-shadow:inset 3px 0 0 #8E2A2A} .rdy-tbl tr.aim td{background:#E7F2EC;font-weight:600;color:var(--text)} .rdy-tbl tr.aim td:first-child{box-shadow:inset 5px 0 0 #1F7A58} .rdy-tbl tr.aim td:last-child{color:var(--good-text)} .rdy-note{font-size:13px;line-height:1.55;color:var(--muted);border-left:2px solid var(--line);padding:2px 0 2px 14px;margin:18px 0} .rdy-rule{margin:28px 0 8px;padding:24px 26px;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--brass);border-radius:4px} .rdy-rule p.rdy-k{color:#574119} .rdy-rule .big{font-family:var(--serif);font-size:clamp(23px,2.7vw,30px);line-height:1.25;color:var(--text);margin:4px 0 14px;text-wrap:balance} .rdy-rule ol{margin:0;padding-left:20px;display:grid;gap:9px} .rdy-rule li{font-size:15px;line-height:1.5;color:var(--text)} .rdy-rule li b{color:var(--text)} @media (max-width:760px){.rdy-grids{grid-template-columns:minmax(0,1fr);gap:18px}.rdy-arr{max-width:260px}} .rdyb{padding-block:66px} .rdyb .wrap{display:grid;gap:30px} /* The head runs the FULL measure. It used to be capped at 760px while the row beneath it ran edge to edge, which left a third of the upper band as dead navy and read as a mistake rather than as breathing room. */ /* The head is a TWO-COLUMN row. Measured before this change, the headline's right edge fell at 71% of the content width while the panels below reached 98%: a 28 point gap that read as a hole. Stretching a 41px headline across 1,120px would have closed the arithmetic and wrecked the typography, so the space carries the rule instead, which also front-loads the one sentence a reader most needs. */ /* The rule spans the band, so the head above it has to fill the band too or it strands the right half. Headline and lede now set as the site's standard two-column masthead instead of a single 1.45fr column with a hole beside it. */ .rdyb-top{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:start} .rdyb-head{grid-template-columns:minmax(0,1.32fr) minmax(0,1fr); column-gap:clamp(32px,4vw,64px);row-gap:10px;align-items:end} .rdyb-head>.eyebrow{grid-column:1/-1} .rdyb-head>h2{grid-column:1} .rdyb-head>.rdyb-lede{grid-column:2;align-self:end;margin-bottom:5px} @media (max-width:980px){.rdyb-head{grid-template-columns:minmax(0,1fr)} .rdyb-head>*{grid-column:1!important}} .rdyb-head{display:grid;gap:12px;max-width:none} .rdyb h2{font-family:var(--serif);font-weight:500;font-size:clamp(27px,3.1vw,41px);line-height:1.14; color:#F6F2E9;margin:4px 0 0;text-wrap:balance;letter-spacing:-.005em;max-width:none} .rdyb h2 em{font-style:normal;color:#E6A7AE} .rdyb-lede{font-size:clamp(16.5px,1.6vw,19px);line-height:1.62;color:#D7E0EA!important;margin:0} .rdyb-cmp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px} /* Each figure sits on its own SOLID panel. The band behind it is a gradient, and a gradient under a colored numeral means the contrast changes with position. A solid panel fixes the measurement: #DE8C94 is 6.63:1 here and stays 6.63:1 wherever the panel sits. */ .rdyb-p{background:#15305C;border:1px solid rgba(244,241,234,.16);border-radius:5px; padding:26px 28px;border-top:3px solid #F0D496; display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:26px;align-items:center;color:var(--ink)} .rb-txt{display:grid;gap:13px;align-content:center} .rdyb-p.hot{border-top-color:#DE8C94} .rb-k{font:600 13.5px/1.45 var(--label)!important;letter-spacing:.06em;text-transform:uppercase; color:#F0D496!important;margin:0} .rdyb-p.hot .rb-k{color:#E6A7AE!important} /* The percentage is the ONLY thing that differs between the two panels, and it was set in the same 12.5px small caps as the words around it, so the eye had nothing to catch. The owner read the panel three times without registering which percentage it was about. It is now the largest thing in the label and carries the panel's own accent, so "70" and "80" are what separate the two panels at a glance, while the consequence figure stays the hero. */ /* The label has to answer, without the reader going looking, WHICH percentage this is. The owner asked twice: "is this saying you scored this on practice exams or just knowledge in your head". It is real knowledge, and the label now says both halves of that: what it is, and what it is not. Three sizes so the eye takes them in that order at a glance. */ /* The owner asked whether the percentage should be bigger. It should stand out more, but not by size: each card already carries a 72px figure, and that figure is the CONSEQUENCE, which is what should dominate. A second large number would give the card two heroes and no hierarchy. So the percentage changes FORM instead, into a filled badge that reads as a label rather than competing as a number. White on #A8341F is 6.61:1, white on #1F5F46 is 7.54:1, and each badge is over 5:1 against the cream card it sits on. */ .rb-k span{display:block;font-size:12.5px;letter-spacing:.09em;opacity:.9} .rb-k b{display:inline-block;font-size:17px;line-height:1.15;font-weight:700; letter-spacing:.02em;text-transform:none;padding:7px 14px 8px;border-radius:3px; margin:0 0 9px;color:#FFFFFF!important} .rb-k em{display:block;font-style:normal;font-size:13.5px;font-weight:500; letter-spacing:.01em;text-transform:none;line-height:1.45;color:#9FB2CA!important} .rdyb-p.hot .rb-k b{color:#FFB3B9!important} .rdyb-p.cool .rb-k b{color:#F6DFAE!important} .rb-h{display:flex;align-items:baseline;gap:14px;margin:0;flex-wrap:wrap} .rb-h .fig{font-family:var(--serif);font-weight:400;font-size:clamp(50px,5.6vw,72px);line-height:.86; color:#F0D496;letter-spacing:-.02em} /* 5.98: the headline numeral stayed the old soft pink while its own array went to the failure red, so the two halves of the same panel disagreed. Matched to the array, and brightened: 7.19:1 on the card against the pink's 6.37, and chroma 63.7 against 33.4. */ .rdyb-p.hot .rb-h .fig{color:#FF7079} .rb-h span{font-size:16.5px;line-height:1.4;color:#DCE4EE!important} .rb-arr{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;width:232px;flex:none;align-self:center} /* ==== 5.98 THE MASTERY PANELS, 28 October 2026 ==== OWNER: "these colors are not good for this section ... use brighter colors nothing drab and lifeless ... get the visitors attention and have the human eye want to lean towards this section. this is great marketing content we just need to make it presented much better." TWO FAULTS, and the first is a reading error, not a color one. 1. THE TWO PANELS USED DIFFERENT COLORS FOR THE SAME THING. In both arrays an "on" square is a candidate who FAILS. The 70 percent panel drew them pink and the 80 percent panel drew them brass, so the eye read two different categories when the entire point of the comparison is that it is the SAME category in two different QUANTITIES. Both now use one failure color, and the panels say what they were built to say: 44 red squares against 2. 2. THE OFF SQUARES DID NOT SEPARATE. #23406E measured 1.56:1 against the card, so the grid read as a vague texture rather than as 100 countable people. #2B4C84 reads 1.90:1, and the failure red reads 2.57:1 against it, so the count is legible at a glance. MEASURED: failure red 4.88:1 on the card, chroma 63.7 against the old pink's 33.4, which is where the "brighter" comes from. It is the compass red family the owner pointed at on the home page, not a new hue. */ /* ==== 6.10 THE DENOMINATOR HAD TO BE VISIBLE, 28 October 2026 ==== I was about to make this WORSE. My own read of the screenshot was that the 56 unfilled blue squares were "shouting" and should recede. The evidence says the exact opposite, and the reason is mechanistic: Kreuzmair, Siegrist & Keller, Risk Analysis 36(8) 2016, eye-tracking, N=70 and N=69: HIGH-numeracy readers COUNT icons; LOW-numeracy readers use LARGE-AREA PROCESSING, comparing the highlighted region against the NON-highlighted region. Mute the unfilled icons and you delete the only cue the low-numeracy reader is using -- the reader the array helps most. And a display where only the numerator is perceptible is a numerator-only display, which is the one thing this literature is unanimous about: Ancker, Senathirajah, Kukafka & Starren, JAMIA 13(6) 2006 (systematic review): "graphs that show only the numerator appear to inflate the perceived risk and may induce risk-averse behavior." Stone et al., OBHDP 90(1) 2003, N=269 and N=414: foreground-only displays inflated willingness to pay ($3.60 asterisks vs $2.99 pie, t(265)=4.96, p<.001); showing foreground WITHIN background removed the effect. We are the interested party in this comparison. A display that overstates the risk of failing is exactly what we must not ship. MEASURED BEFORE: unfilled #2B4C84 vs panel #0A1C3C = 1.98:1. The unfilled region receded into the panel. Effectively numerator-only. THE TRAP: raising the unfilled lightness to fix that collapsed its separation from the salmon (at #3F66AB the pair fell to 1.72:1), and the only pairs that satisfied both constraints on lightness alone were pale PINKS -- which the owner has already rejected once by name. THE WAY OUT, from the research itself: differ in FILL STYLE, not just lightness, "so the array still reads with hue removed entirely". Hollow vs solid is a SHAPE cue. It survives greyscale and every color vision deficiency, so the red stays vivid AND the denominator becomes visible. SHIPPED: unfilled = quiet interior #1C3765 with a 1px edge #4A74BC, which reads 3.63:1 against the panel, so all 100 cells are a visible region. Filled = solid #F0515C, 4.85:1 on the panel, 3.38:1 on the unfilled interior. Arrangement UNCHANGED: top-left sequential is the validated one (Xiong et al., CHI 2022, 10x10 grids of 100, n=49 + 800 + 800 -- mean error top -0.21pp vs random -1.94pp, and reader confidence highest for top). */ .rb-arr i{display:block;aspect-ratio:1;border-radius:1.5px;background:#7FA3D6; box-shadow:inset 0 0 0 1px #4A74BC} .rb-arr i.on{background:#FF5C66;box-shadow:inset 0 0 0 1px #FFA8AE} .rdyb-p.hot .rb-arr i.on{background:#FF5C66} .rb-cap{font-size:15.5px;line-height:1.55;color:#DCE4EE!important;margin:0} /* ==== 5.99 THE ICON ARRAYS HAD NO KEY, 28 October 2026 ==== The owner could not read his own chart, which is the strongest possible evidence against it. His words: "i did not know this chart was reference to those test takers that scored 85% or higher on practice exams walked out passing"; and "i was thinking the colors were wrong, but it is not the colors it is the info in the boxes." THREE SEPARATE FAULTS, all of them comprehension rather than color. 1. The panel label named an INPUT, "Mastery 80 percent", and the reader had to infer what the 2 and the grid were counting. It now names the population: "Out of 100 who truly know 80 percent". 2. NOTHING ANYWHERE SAID WHAT RED MEANS. 100 squares, two of them red, and no key. Each panel now carries its own, with the counts in it, so the key doubles as a restatement of the figure. 3. The readiness rule says 85 and the panels say 80, they sit one above the other, and the sentence reconciling them was at the FOOT of the section. That is what he actually tripped on. It now sits under the rule. The governing rule is NN/g's own, from the lawn mower eyetracking work: "Ensure that each cell can stand alone, whenever possible." A panel that only makes sense if you have read a lede four blocks up does not stand alone. */ /* Playbook 6.12b, walked into again. ".wrap > p" sets max-width:68ch at specificity (0,1,1) and beats a bare .rdyb-key at (0,1,0) by one element selector, so the key to both grids was capped to the left half of the band while the grids it explains ran the full width. Same selector, same trap, second time. The fix is the same shape as the one already in place for .rdyb-diff: qualify it with the parent. */ /* ==== 5.100 THE MISCONCEPTION BOX, 28 October 2026 ==== The owner, who commissioned and proof-read this page, read "mastery 70 percent" as "70 percent chance of failing" and asked for the chart to say so. It is wrong twice: the verified figure at 70 percent mastery is 43.7 percent, and a 70 on PRACTICE is not 70 percent mastery at all, because practice reads high. That he made the error is the finding. If the person who built the page makes it, a visitor arriving cold certainly will, so the page now answers it out loud instead of relying on the reader to infer the distinction. */ /* The owner: this "appears tucked away and the human eye has to go back and find this info to read it". It was five sentences of corrective prose set as one block, and a correction written at that length does not get read, it gets skipped, which leaves the misconception standing. It is not moved to the front. A correction placed BEFORE the reader has formed the misconception is wasted; it belongs next to the thing being misread. The fix is to make it short enough to survive where it is: one headline the eye cannot miss, then one sentence of support. Five sentences down to two. */ .rdyb-warn{border-left:6px solid #C62B37;background:#FBEEE6; padding:19px 26px 21px;border-radius:0 5px 5px 0;max-width:none;display:grid;gap:7px;color:var(--ink)} /* Qualified with the parent on purpose. ".band-navy p" is (0,1,1) and a bare .warn-h is (0,1,0), so the band's muted color won and both lines rendered in #CFC8BD on cream. FIFTH instance of the family in note 6.12b: a generic element-qualified rule silently outranking a component class. The tell was a computed color that matched no rule I had written, and the way to find it is to read the COMPUTED value first rather than the stylesheet. */ .rdyb-warn .warn-h{font-family:var(--serif);font-size:clamp(19px,1.95vw,24px); line-height:1.26;font-weight:600;color:#8E2A1C;margin:0;text-wrap:balance} .rdyb-warn .warn-b{font-size:16px;line-height:1.6;color:#2F3C4D;margin:0;max-width:92ch} .warn-b b{color:#8E2A1C;font-weight:700} .rdyb-warn em{font-style:normal;font-weight:700;color:#0C2249} .wrap > p.rdyb-key{font-size:15.5px;line-height:1.6;color:#BFCBDA!important; margin:0;max-width:none} .rdyb-key b{color:#F6F2E9;font-weight:600} .rb-leg{display:flex;flex-wrap:wrap;gap:7px 20px;margin:0;font-size:14.5px; line-height:1.4;color:#DCE4EE!important} .rb-leg span{display:inline-flex;align-items:center;gap:7px} .rb-sw{width:12px;height:12px;border-radius:1.5px;background:#7FA3D6;flex:none} .rb-sw.on{background:#FF5C66;box-shadow:inset 0 0 0 1px #FFA8AE} .rb-why{font-size:14.5px;line-height:1.6;color:#CBD6E2!important;margin:0} /* ==== 5.101 THE PANELS GO LIGHT, 28 October 2026 ==== Four rounds of lifting steps inside the navy family and the owner said "drab" every time. He was right and I was solving the wrong problem: a navy panel on a navy band holding navy squares cannot be made bright, because the family is the constraint, not the step inside it. Measured. Light paper panel #F6EEDC against the navy band: 13.56:1, where the old #15305C panel managed 1.2:1. The squares then have room to work: pass #3C6BB0 at 4.64:1 on the panel, fail #D6283A at 4.30:1, and 96.2 chroma units apart from each other, which is the metric that matters for two hues of similar lightness. The figures also get to carry meaning now. 44 is set in a deep red and 2 in a deep green, so the two outcomes read as bad and good before a word is read. This is the --good semantic exception, used for the one thing on the site that is genuinely a good-versus-bad comparison. */ .rdyb-p{background:#F6EEDC!important;border:1px solid rgba(12,34,73,.16)!important; box-shadow:0 10px 30px rgba(3,10,24,.34)} .rdyb-p.hot{border-top:4px solid #D6283A!important} .rdyb-p.cool{border-top:4px solid #1F7A58!important} .rdyb-p .rb-k span{color:#6A7686!important} .rdyb-p .rb-k b{color:#0C2249!important} .rdyb-p .rb-k em{color:#44505F!important} .rdyb-p.hot .rb-k{color:#A8341F!important} .rdyb-p.cool .rb-k{color:#1F5F46!important} .rdyb-p.hot .rb-h .fig{color:#C21F2E!important} .rdyb-p.cool .rb-h .fig{color:#1F7A58!important} .rdyb-p .rb-h span{color:#2F3C4D!important} .rdyb-p .rb-cap{color:#2F3C4D!important} .rdyb-p .rb-cap b{color:#0C2249!important} .rdyb-p.hot .rb-cap b{color:#A8341F!important} .rdyb-p .rb-leg{color:#3E4C5E!important} .rdyb-p.hot .rb-k b{background:#A8341F;color:#FFFFFF!important} .rdyb-p.cool .rb-k b{background:#1F5F46;color:#FFFFFF!important} .rdyb-p .rb-arr i{background:#3C6BB0;box-shadow:none} .rdyb-p .rb-arr i.on,.rdyb-p.hot .rb-arr i.on{background:#D6283A;box-shadow:none} .rdyb-p .rb-sw{background:#3C6BB0;box-shadow:none} .rdyb-p .rb-sw.on{background:#D6283A;box-shadow:none} .rb-cap b{color:#F6F2E9;font-weight:600} .rdyb-p.hot .rb-cap b{color:#FF9AA2} /* ==== 5.103 THE RULE IS THE MONEY SHOT, SO IT STOPS LIVING IN THE RIGHT RAIL ==== 28 October 2026. The owner: "this definitely still needs to stand out more to insist the visitors' eyes go directly to our money shot section". It was set in 21px type on the band, in the RIGHT-HAND COLUMN, which is the one placement the eyetracking work singles out: NN/g, Kara Pernice, 12 November 2017, "users may skip important content simply because it appears on the right side of the page". Restyling inside that column could not fix a placement problem. It is now a solid brass card across the full band, directly under the headline, in 26px serif. Brass at top and brass on the payoff bar at the foot bracket the cream evidence between them, so the section reads rule, proof, conclusion. Contrast measured: #D8B373 is 6.99:1 against the band, navy text on it is 7.92:1 and the deep red emphasis is 5.25:1. */ .rdyb-rule{background:#E3CE9C;border-radius:5px;padding:22px 28px 24px;display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:clamp(28px,3.4vw,52px); row-gap:8px;align-self:start;box-shadow:0 10px 30px rgba(3,10,24,.34);color:var(--ink)} .rdyb-rule>.rb-k{grid-column:1/-1} .rdyb-rule>.rb-rule{grid-column:1} .rdyb-rule>.rb-why{grid-column:2;align-self:center; border-left:2px solid rgba(12,34,73,.26);padding-left:clamp(18px,2vw,26px)} @media (max-width:860px){.rdyb-rule{grid-template-columns:minmax(0,1fr)} .rdyb-rule>*{grid-column:1!important} .rdyb-rule>.rb-why{border-left:0;padding-left:0;border-top:2px solid rgba(12,34,73,.26);padding-top:12px}} .rdyb-rule .rb-k{color:#523708!important;font-size:12.5px!important;letter-spacing:.11em} .rb-rule{font-family:var(--serif);font-size:clamp(20px,2.05vw,27px);line-height:1.32; color:#0C2249!important;margin:0;text-wrap:pretty;max-width:46ch} /* ==== 5.104 THE EMPHASIS HAD LESS CONTRAST THAN THE TEXT IT EMPHASIZED ==== 28 October 2026. "85 percent or better" was deep red on brass at 5.25:1 while the navy sentence around it sat at 7.92:1. An emphasis that is HARDER to see than its own body copy cannot work, however saturated the hue looks in isolation, and that is the whole reason it read as dull. It is now an inline highlight: a solid dark red field carrying cream text. Text on the field is 9.97:1 and the field itself is 5.42:1 against the brass, so the phrase is both the highest contrast thing in the card and a different shape from everything around it. Box-decoration-break keeps the field intact when the phrase wraps across two lines. */ /* 6.79b This used the background SHORTHAND, which resets background-image and silently undid the drawn band defined earlier. Color and weight only now; the band itself is owned by the shared highlight rule. */ /* 6.79e This one is set in the label face at 600 weight, whose ink spans 1.26em against 0.96em for the headline serif, so the shared band shrink-wrapped it. Measured per element rather than assumed to be shared. */.rb-rule b{color:#FDF6E8;font-weight:600;--hl:#7A1522;background-size:100% 1.52em} .rdyb-rule .rb-why{color:#1E2B3D!important;font-size:15.5px;line-height:1.62; font-weight:450;max-width:72ch} /* ==== 6.12 THE DIFFERENCE, STATED. 28 October 2026 ==== Two findings from the icon-array research that the arrays themselves cannot satisfy, so the TEXT has to: 1) Zikmund-Fisher et al., JMIR 14(4) 2012, n=4,198, two 10x10 arrays shown side by side: even in the BEST-performing format, only 46.9% of low-numeracy and 65.1% of high-numeracy readers correctly knew which option carried the higher risk. Readers do not reliably extract "which one is worse" from two arrays. The caption must say it outright. 2) Kandel et al., arXiv:2509.16465 -- flagged PREPRINT, peer review NOT confirmed, so treated as provisional: for differences of 20-80 points, juxtaposition ALONE produced systematic UNDERestimation (signed error -1.955) versus +0.267 when an explicit encoding of the difference was added; unsigned error 5.46 vs 3.45. Our gap is 44 - 2 = 42 points, squarely inside that band. Without this line the layout quietly UNDERSELLS the very contrast it exists to make. Stated as a plain count on the shared denominator of 100, which is what Trevena et al. 2021 and Bonner et al. 2021 both call for: consistent denominators, same risk format across compared options. */ /* 6.12b: selector is .wrap > p.rdyb-diff, not .rdyb-diff. ".wrap > p" sets max-width:68ch at (0,1,1) and beat a bare .rdyb-diff at (0,1,0) by ONE element selector -- the FOURTH instance of this shape today, after ".vols div" vs ".cover.ir", ".vols span" vs ".cover .cz-code", and the second copy of the .vols glaze rule. This stylesheet has a FAMILY of generic element-qualified rules that silently outrank component classes. When a component property will not take, check for one of those before assuming the value is wrong -- and ask the browser's matched-rule list rather than reading the file, which has produced four wrong guesses today and zero right ones. */ /* ==== 5.102 NO MORE TINTS ON THE NAVY, 28 October 2026 ==== The owner pointed at these two blocks one after the other with the same complaint, and the measurement explains why. Both were a low alpha red laid over the band. rgba(240,81,92,.10) resolves to #2A3055 and rgba(240,81,92,.14) to #333155, which measure 1.09:1 and 1.13:1 against the band behind them. They were not dark panels, they were barely panels at all, and the red that was supposed to be doing the work had been diluted into a muddy violet. A TRANSLUCENT ACCENT OVER A DARK GROUND IS ALWAYS MUD. The accent loses its chroma to the ground and keeps none of its lightness. Both blocks are now SOLID, and the section reads as three deliberate materials: cream cards for the data, a pale caution for the warning, a brass bar for the payoff. */ .rdyb-diff{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center; gap:clamp(16px,2vw,26px);margin:26px 0 0;padding:18px 26px;border-radius:5px; max-width:none;background:#E3CE9C;color:#0C2249;text-wrap:pretty} .rd-n{font-family:var(--serif);font-weight:400;line-height:.86;color:#7A1C27; font-size:clamp(46px,5.4vw,66px);letter-spacing:-.02em} .rd-t{font-size:clamp(16.5px,1.65vw,19px);line-height:1.45;color:#1C2A42} .rd-t b{font-weight:600;color:#0C2249} @media (max-width:620px){.rdyb-diff{grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 20px}} .rdyb-foot{font-size:15px;line-height:1.7;color:#CBD6E2!important;margin:18px 0 0; border-top:1px solid rgba(233,228,216,.17);padding-top:20px} .rdyb-foot a{color:#F0D496;text-decoration:underline;text-underline-offset:3px} @media (max-width:980px){ .rdyb-top{grid-template-columns:minmax(0,1fr);gap:22px} .rdyb-rule{align-self:start} } @media (max-width:860px){ .rdyb-cmp{grid-template-columns:minmax(0,1fr);gap:16px} .rdyb h2{max-width:none} .rdyb{padding-block:48px} } @media (max-width:560px){ .rdyb-p{grid-template-columns:minmax(0,1fr);row-gap:18px;justify-items:start} .rb-arr{width:100%;max-width:258px} } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rdy-arr i{background:#264068}:root:not([data-theme="light"]) .rdy-arr i.on{background:#D98080}:root:not([data-theme="light"]) .rdy-leg .sw-on{background:#D98080}:root:not([data-theme="light"]) .rdy-leg .sw-off{background:#264068}:root:not([data-theme="light"]) .rdy-card.hot{border-top-color:#D98080}:root:not([data-theme="light"]) .rdy-card.hot .rdy-k{color:#D98080}:root:not([data-theme="light"]) .rdy-card.hot .rdy-h b{color:#D98080}:root:not([data-theme="light"]) .rdy-k{color:#E6CF9E}:root:not([data-theme="light"]) .rdy-rule p.rdy-k{color:#E6CF9E}:root:not([data-theme="light"]) .rdy-tbl tr.mark td{background:rgba(217,128,128,.13)}:root:not([data-theme="light"]) .rdy-tbl tr.mark td:first-child{box-shadow:inset 3px 0 0 #D98080}:root:not([data-theme="light"]) .rdy-tbl tr.aim td{background:rgba(230,207,158,.12)}:root:not([data-theme="light"]) .rdy-tbl tr.aim td:first-child{box-shadow:inset 3px 0 0 #E6CF9E}} :root[data-theme="dark"] .rdy-arr i{background:#264068}:root[data-theme="dark"] .rdy-arr i.on{background:#D98080}:root[data-theme="dark"] .rdy-leg .sw-on{background:#D98080}:root[data-theme="dark"] .rdy-leg .sw-off{background:#264068}:root[data-theme="dark"] .rdy-card.hot{border-top-color:#D98080}:root[data-theme="dark"] .rdy-card.hot .rdy-k{color:#D98080}:root[data-theme="dark"] .rdy-card.hot .rdy-h b{color:#D98080}:root[data-theme="dark"] .rdy-k{color:#E6CF9E}:root[data-theme="dark"] .rdy-rule p.rdy-k{color:#E6CF9E}:root[data-theme="dark"] .rdy-tbl tr.mark td{background:rgba(217,128,128,.13)}:root[data-theme="dark"] .rdy-tbl tr.mark td:first-child{box-shadow:inset 3px 0 0 #D98080}:root[data-theme="dark"] .rdy-tbl tr.aim td{background:rgba(230,207,158,.12)}:root[data-theme="dark"] .rdy-tbl tr.aim td:first-child{box-shadow:inset 3px 0 0 #E6CF9E} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .eyebrow{color:#E6CF9E}} :root[data-theme="dark"] .eyebrow{color:#E6CF9E} @media (max-width:860px){.gr-req-list{grid-template-columns:minmax(0,1fr)}.gr-item{grid-template-columns:auto minmax(0,1fr)}.gr-item .gr-look{grid-column:2}.gr-req,.gr-group{padding:22px 18px}.gr-group{padding-bottom:6px}.gr-head h2{font-size:24px}} .dg-cta.dg-cta-wide{max-width:none;margin:22px 0 30px} .cov{background:#FBFAF6;color:#16202D;border:1px solid #CFC7B6;border-radius:1px;box-shadow:0 6px 14px -10px rgba(14,26,43,.55);padding:0;justify-content:flex-start;gap:0;clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%)} .cov::before{content:"";position:absolute;top:0;right:0;width:13px;height:13px;background:linear-gradient(45deg,#DDD5C4 50%,transparent 50%);z-index:2} .cov-k{display:block;background:var(--sp);color:#fff;font:700 9.5px var(--sans);letter-spacing:.06em;padding:5px 7px 4px} .cov-n{display:block;color:#16202D;font:600 9.5px/1.25 var(--mono);padding:6px 7px 0} .cov::after{left:7px;right:9px;top:auto;bottom:9px;height:1px;background:#D8D1C2;box-shadow:0 -5px 0 #D8D1C2,0 -10px 0 #D8D1C2,0 -15px 0 #D8D1C2} .doc-src{font:600 12.5px var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} .doc-off{display:inline-block;margin-top:10px;font-size:14.5px;font-weight:600;color:#0C2249;background:#E6CFA0;padding:7px 12px;border-radius:3px;text-decoration:none}.doc-off:hover{background:#D9BC85} .lib-go{display:grid;gap:6px;padding:0 0 16px;margin-bottom:16px;border-bottom:1px solid var(--line)} .lib-go .btn{width:100%;justify-content:center} .lib-go span{font-size:12.5px;color:var(--faint)} .rpage .stamp .doc-read{font:600 2.3cqw var(--sans);background:#0C2249;color:#fff;border:0;border-radius:3px;padding:1.2% 2.4%;cursor:pointer;margin-left:.6%} .fv{position:fixed;inset:0;z-index:200;background:#3E4652;display:flex;flex-direction:column} .fv-bar{display:flex;align-items:center;gap:16px;padding:10px 16px;background:#0C2249;color:#F4F1EA;border-bottom:3px solid #E6CFA0;flex-wrap:wrap} .fv-back{display:inline-flex;align-items:center;gap:6px;background:transparent;color:#F4F1EA;border:1px solid rgba(244,241,234,.35);border-radius:3px;padding:7px 12px;font:600 14px var(--sans);cursor:pointer} .fv-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2} .fv-back:hover,.fv-z button:hover{background:rgba(244,241,234,.1)} .fv-t{flex:1;min-width:0;display:grid} .fv-t span{font:600 12px var(--label);color:#E6CFA0;letter-spacing:.02em} .fv-t b{font:500 16px var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fv-tools{display:flex;align-items:center;gap:14px;font-size:13.5px} .fv-z{display:inline-flex;border:1px solid rgba(244,241,234,.35);border-radius:3px} .fv-z button{background:transparent;color:#F4F1EA;border:0;width:34px;height:32px;font-size:18px;cursor:pointer} .fv-z button+button{border-left:1px solid rgba(244,241,234,.35)} .fv-src{color:#E6CFA0;font-size:13px} .fv-body{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;align-items:center;gap:14px;outline:none} .fv-page{background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.35);flex:none;max-width:none} .fv-msg{margin:auto;color:#F4F1EA;text-align:center;display:grid;gap:14px;justify-items:center;font-size:15px} .fv.fv-text .fv-z,.fv.fv-text #fvPg{display:none} .fv.fv-text .fv-body{background:#F4F1EA;display:block;padding:28px 20px 60px;color:var(--ink)} .fv-text .ecfr,.fv-text .fv-note{max-width:760px;margin:0 auto;color:#1B2430;font:16.5px/1.6 var(--serif)} .fv-text .fv-note{font:13.5px var(--sans);color:#5B6572;border-bottom:1px solid #CFC7B6;padding-bottom:12px;margin-bottom:8px} .ecfr h2{font:500 28px/1.2 var(--serif);margin:26px 0 10px;color:#0E1A2B} .ecfr h3{font:600 19px var(--sans);margin:30px 0 8px;color:#0C2249} .ecfr h4{font:600 17px var(--sans);margin:24px 0 6px;color:#0E1A2B;scroll-margin-top:12px} .ecfr h5,.ecfr h6{font:600 14px var(--sans);margin:12px 0 4px} .ecfr p{margin:0 0 10px} .ecfr table{border-collapse:collapse;margin:12px 0;font:14px var(--sans);display:block;overflow-x:auto} .ecfr td,.ecfr th{border:1px solid #CFC7B6;padding:5px 8px;vertical-align:top} .ecfr .r-auth,.ecfr .r-source,.ecfr .r-ednote{font:13.5px var(--sans);color:#5B6572;margin:8px 0} .ecfr .r-auth h6,.ecfr .r-source h6{display:inline;margin:0 6px 0 0} .ecfr aside,.ecfr blockquote{margin:10px 0 10px 18px;padding-left:12px;border-left:3px solid #E6CFA0} @media (max-width:640px){.fv-bar{gap:10px;padding:8px 10px}.fv-t{order:3;flex-basis:100%}.fv-tools{margin-left:auto;gap:10px}.fv-body{padding:10px}} .get2 .g2-head{text-align:center;max-width:760px;margin:0 auto 40px} .get2 .g2-head h2{color:#F4F1EA;margin:8px 0 12px;font-size:clamp(30px,4vw,44px)}@media (max-width:420px){.get2 .g2-head h2{font-size:28px}} .get2 .g2-head p{color:#BAC5D3;font-size:17px} .g2-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 40px;border-top:1px solid #2A4268;border-bottom:1px solid #2A4268} .g2-stats div{padding:26px 22px;text-align:center} .g2-stats div+div{border-left:1px solid #2A4268} .g2-stats dt{font:500 clamp(40px,4.6vw,58px)/1 var(--serif);color:var(--brass);letter-spacing:-.01em} .g2-stats dd{margin:10px auto 0;max-width:22ch;min-height:2.9em;color:#D6DCE4;font-size:15px;line-height:1.45} .g2-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;align-items:stretch} .g2-guar{background:#FFFFFF;color:#16202D;padding:30px 30px 28px;border-top:4px solid var(--brass);display:flex;flex-direction:column;gap:10px} .g2-seal{width:34px;height:34px;stroke:#8C6A33;fill:none;stroke-width:1.6} .g2-guar h3{font:500 28px/1.15 var(--serif);color:#0C2249;margin:0} .g2-guar p{margin:0;color:#3A4655;font-size:16.5px;line-height:1.55} .g2-terms{list-style:none;margin:6px 0 0;padding:14px 0 0;border-top:1px solid #D8D1C2;display:grid;gap:8px;font-size:15px;color:#3A4655} .g2-terms li{padding-left:22px;position:relative} .g2-terms li::before{content:"";position:absolute;left:2px;top:.45em;width:9px;height:5px;border-left:2px solid #8C6A33;border-bottom:2px solid #8C6A33;transform:rotate(-45deg)} .get2 .btn-ghost{color:#EDE8DC;border-color:#4A6080} .get2 .btn-ghost:hover{background:rgba(244,241,234,.08)} .g2-guar a{margin-top:auto;padding-top:6px;color:#0C2249;font-weight:600} .g2-points{list-style:none;margin:0;padding:0;display:grid;gap:0} .g2-points li{padding:18px 0 18px 20px;border-left:2px solid var(--brass);margin-left:4px} .g2-points li+li{border-top:1px solid #2A4268} .g2-points h3{font:600 18px var(--sans);color:#F4F1EA;margin:0 0 4px} .g2-points p{margin:0;color:#C9D1DC;font-size:15.5px;line-height:1.55} .g2-points a{color:var(--brass)} .g2-act{margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 26px;background:#13305E;border:1px solid #2A4268} .g2-now{margin:0;color:#E9E4D8;font-size:15.5px;line-height:1.5;max-width:60ch} .g2-now b{color:#E6CF9E} .g2-btns{display:flex;gap:12px;flex:none} @media (max-width:980px){.g2-act{flex-direction:column;align-items:stretch}.g2-btns{flex-wrap:wrap}.g2-btns .btn{flex:1}} @media (max-width:1040px){.g2-stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.g2-stats div:nth-child(3){border-left:0}.g2-stats div:nth-child(n+3){border-top:1px solid #2A4268}.g2-grid{grid-template-columns:minmax(0,1fr)}} @media (max-width:480px){.g2-btns{flex-direction:column}.g2-stats div{padding:20px 10px}.g2-stats dd{font-size:14px}.g2-guar{padding:24px 20px}.g2-guar h3{font-size:24px}.g2-act{padding:18px}} .pdp-guar{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;padding:12px 14px;border:1px solid var(--rule);border-left:3px solid #B48A45;background:var(--bg-2,#EFEBE1);font-size:15px;line-height:1.5} .pdp-guar svg{width:18px;height:18px;flex:none;margin-top:2px;stroke:currentColor;fill:none;stroke-width:1.8} .pol-list{margin:0;padding-left:20px;display:grid;gap:10px} .rr-result{border:0;padding:0;margin:0 0 6px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px} .rr-result legend{font-weight:600;margin-bottom:10px;padding:0} .rr-opt{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--rule);background:var(--bg);cursor:pointer;border-radius:2px} .rr-opt:has(input:checked){border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)} .rr-opt input{margin-top:3px;accent-color:var(--navy)} .rr-opt span{display:grid;gap:2px;font-size:14.5px;color:var(--muted)} .rr-opt b{font-size:16px;color:var(--text)} .rr-result.err .rr-opt{border-color:var(--bad,#B3261E)} .rr-err{color:var(--bad,#B3261E);font-size:14px;margin:0} .rr-window{margin:0;padding:12px 14px;border-left:3px solid var(--warn,#9A6A00);background:#FBF3E2;font-size:14.5px;color:var(--ink)} .rr-file{margin:8px 0 0;font-size:14.5px;display:flex;gap:10px;align-items:center} .rr-file button{background:none;border:0;color:var(--navy);text-decoration:underline;cursor:pointer;font:inherit} .rr-privacy{font-size:13.5px;color:var(--muted);margin:0} @media (max-width:560px){.rr-result{grid-template-columns:minmax(0,1fr)}} #rrForm{gap:24px;padding:36px} #rrForm .fr{gap:20px} #rrForm .field{gap:8px} #rrForm .field label{font-size:13.5px;line-height:1.45} #rrForm .rr-result{margin:0;gap:16px} #rrForm .rr-result legend{font-size:17px;margin-bottom:14px} #rrForm .rr-opt{padding:18px 20px;align-items:center} #rrForm .rr-opt input{margin-top:0} #rrForm .rr-err,#rrForm .rr-window{margin:-8px 0 0} #rrForm .rr-file{margin:4px 0 0} #rrForm .rr-file:empty{display:none} #rrForm .rr-privacy{line-height:1.55;padding-top:4px} #rrForm .btn{justify-self:start;min-width:220px} [data-view="report-result"] .oh-aside{padding:32px;display:grid;gap:18px} [data-view="report-result"] .oh-aside .eyebrow,[data-view="report-result"] .oh-aside .rule{margin:0} [data-view="report-result"] .oh-steps{gap:14px;line-height:1.55} @media (max-width:640px){#rrForm{padding:24px 20px;gap:22px}#rrForm .btn{justify-self:stretch}[data-view="report-result"] .oh-aside{padding:24px 20px}} :root{--measure:72ch} /* PROOF ROW. The lede here was four lines of CENTERED prose. Centered text is fine for one to three short lines; past that every line starts at a different x and the eye has to hunt for the beginning of each one on the return sweep. The three claims it was carrying are now three scannable facts that fill the width instead of a wall that does not. */ .proofrow{list-style:none;margin:30px 0 40px;padding:26px 0 0; border-top:1px solid var(--line); display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 40px} .proofrow li{display:grid;gap:7px;align-content:start} .proofrow b{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.2vw,40px); line-height:.95;color:var(--text);letter-spacing:-.01em} .proofrow span{font-size:14.5px;line-height:1.55;color:var(--muted);max-width:34ch} .proofrow a{color:var(--accent-strong);text-underline-offset:3px} .proofrow .pr-n{font:600 15px/1.4 var(--sans);color:var(--text);display:block;margin-bottom:2px} @media (max-width:760px){ .proofrow{grid-template-columns:minmax(0,1fr);gap:20px;margin:24px 0 32px;padding-top:22px} .proofrow li{grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:4px 14px} .proofrow span{max-width:none} } /* MEASURE CAPS, added 22 October 2026 after measuring characters-per-line on every prose block across all 106 routes. Nine blocks ran past 85 characters, the point where the eye starts losing its place on the return sweep; the worst was 143. The site's median is 59, so these were the outliers rather than the rule. Capped at the house measure. */ .wx-foot,.wx-disc,.ntm-tip,.ntm-en, .callout > p, .pr-main > p{max-width:var(--measure)} /* The band footnote is the one case a cap would hurt: every other zone in that band reaches the right edge, so a 72ch footnote would reopen the gap at the bottom. Two columns keeps the line length readable AND the edge consistent. */ @media (min-width:1000px){ .rdyb-foot{columns:2;column-gap:46px;max-width:none} .rdyb-foot a{display:inline} } .cons-src, .flip-wrap .flip-hint, .cmp .cmp-note, .gr-list .gr-item{max-width:none} /* Measured 124ch and 126ch. Capping would reopen the right-edge gap under the wide element each annotates, so use the .rdyb-foot remedy: two columns keeps the edge flush and brings the line length back to about 60ch. */ @media (min-width:1000px){ .cons-src,.cmp .cmp-note,.eng-note-2col{columns:2;column-gap:46px} } .gr-list .gr-main>p{max-width:46ch} .app-wrap .app-get{max-width:1000px;margin-left:auto;margin-right:auto} .app-get li{max-width:52ch} @media (min-width:1180px){ .article{grid-template-columns:minmax(0,68ch) minmax(0,1fr)} } @media (min-width:1180px){ .pol-layout{grid-template-columns:minmax(0,1fr) 780px} } :root{--lift-1:0 10px 22px rgba(14,26,43,.22)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --lift-1:0 0 0 1px rgba(244,241,234,.12),0 12px 26px rgba(0,0,0,.5); }} :root[data-theme="dark"]{ --lift-1:0 0 0 1px rgba(244,241,234,.12),0 12px 26px rgba(0,0,0,.5); } .hero .hero-books .cover{ box-shadow:1px 1px 0 #F4EFE3,2px 2px 0 #E2DACA,3px 3px 0 #F1EBDD, 4px 4px 0 #DCD3C1,5px 5px 0 #EEE7D8,6px 6px 0 #D5CBB8, 7px 7px 0 #E9E1D1,8px 8px 0 #C9BEA9, 0 0 0 2px rgba(244,241,234,.58), 18px 30px 40px rgba(0,0,0,.55),4px 8px 14px rgba(0,0,0,.4); } @media (max-width:760px){ .hero .hero-books .cover{ box-shadow:1px 1px 0 #F4EFE3,2px 2px 0 #E2DACA,3px 3px 0 #EEE7D8, 4px 4px 0 #D5CBB8,5px 5px 0 #C9BEA9, 0 0 0 2px rgba(244,241,234,.58), 12px 20px 28px rgba(0,0,0,.5); } } .aside-box .cover{box-shadow:var(--lift-1)} .series .cover{box-shadow:var(--lift-1)} @media (min-width:901px){ .hero .wrap{padding-block:84px 56px} .hero + .section{padding-top:56px} } /* 6.96 THE ALTERNATE BAND WAS BLENDING INTO THE PAGE. Measured site-wide at 1.085:1 against the paper on 10 routes, which is why these sections kept reading as running together. #E3CE9C gives 1.217:1 against the paper, lifts a white card sitting on it from 1.380 to 1.547, and holds body ink at 12.15:1. Separation improved in BOTH directions rather than traded. */ :root{--band:#E3CE9C} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--band:#11284D}} :root[data-theme="dark"]{--band:#11284D} .band-alt{background:var(--band)} .dg-cta{ background:color-mix(in srgb, var(--brass) 24%, var(--surface)); border:1px solid color-mix(in srgb, var(--brass) 50%, transparent); border-left:3px solid var(--brass); border-radius:3px; padding:18px 22px; } .dg-cta:hover{ background:color-mix(in srgb, var(--brass) 32%, var(--surface)); border-color:color-mix(in srgb, var(--brass) 75%, transparent); border-left-color:var(--brass); transform:none; } :root{--note:color-mix(in srgb, var(--brass) 65%, var(--surface))} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --note:color-mix(in srgb, var(--brass) 20%, var(--surface)); }} :root[data-theme="dark"]{ --note:color-mix(in srgb, var(--brass) 20%, var(--surface)); } .callout, .cons-note, .codes-empty, .dg-days, .ntm-out, .wx-learn{ background:var(--note); border-left-width:3px; border-left-style:solid; border-left-color:var(--brass); } .wx-learn{border-left:3px solid var(--brass)!important} .dg-cta{background:var(--note)} .dg-cta:hover{background:color-mix(in srgb, var(--brass) 32%, var(--surface))} .callout, .cons-note, .codes-empty, .dg-days, .ntm-out, .wx-learn, .dg-cta{ border:1px solid color-mix(in srgb, var(--brass) 62%, var(--note)); border-left:3px solid var(--brass); } .wx-learn{border-left:3px solid var(--brass)!important} .g2-act{ background:#1A3C72; border:1px solid color-mix(in srgb, var(--brass) 55%, #1A3C72); border-left:3px solid var(--brass); } .callout, .cons-note, .codes-empty, .dg-days, .ntm-out, .wx-learn, .dg-cta{ --faint:var(--muted); --accent:var(--accent-strong); } .pg .folio, .pg .run{color:#646E7C} .pg.dark .folio, .pg.dark .run{color:#B1AAA0} .pdp-guar{ background:var(--note); border:1px solid color-mix(in srgb, var(--brass) 62%, var(--note)); border-left:3px solid var(--brass); --faint:var(--muted); --accent:var(--accent-strong); } .look-in, .doc-open, .links a{min-height:24px} .links a{display:inline-flex;align-items:center} .doc-open{display:flex;align-items:center} .series h2{font-size:30px} .acard h2{font-size:23px;transition:color .2s} .acard:hover h2{color:var(--accent)} .faq-aside h2{font-size:24px} .shelf-h h2{font-family:var(--serif);font-weight:400;font-size:24px;margin:0;display:flex;align-items:baseline;gap:10px}/* 7.08 TWO-COLUMN HEADS BEGIN TOGETHER. 6.84 fixed this for .sec-head and I treated the pattern as done; .sh-split is a different component and kept align-items:end, which bottom-aligned the columns and lifted the taller right-hand paragraph 26px above the headline beside it. 7.08b AND THE FIX ITSELF BROKE IT: the selector is the COMPOUND .shelf-h.sh-split, and putting a comment plus a newline between the two classes turns it into the DESCENDANT selector .shelf-h .sh-split, which matches nothing. Never break a compound selector across lines. */ @media (min-width:1000px){.shelf-h.sh-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:start;justify-content:stretch}.shelf-h.sh-split p{max-width:none}}.shelf-tier{display:flex;align-items:center;gap:14px;margin:0 0 16px}.shelf-tier h3{margin:0;font:600 12px var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}.shelf-tier .ln{flex:1;height:1px;background:var(--rule)}.shelf-now{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;margin:0 0 44px}.shelf-now a{display:grid;grid-template-columns:182px minmax(0,1fr);gap:24px;align-items:stretch;text-decoration:none;color:var(--text)}.shelf-now .snw{display:grid;align-content:space-between;gap:16px;justify-items:start}.shelf-now .snw>div{display:grid;gap:9px;justify-items:start}.shelf-now .sb{margin:0;font:400 14.5px/1.5 var(--sans);color:var(--muted)}.shelf-now .vl{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:5px;font:500 13.5px var(--sans);color:var(--muted)}.shelf-now .vl li{display:flex;gap:9px;align-items:baseline}.shelf-now .vl li::before{content:"";width:6px;height:6px;background:var(--mark);flex:none;transform:translateY(-3px)}.shelf-now .cover{box-shadow:0 14px 28px rgba(0,0,0,.4);transition:transform .25s}.shelf-now a:hover .cover,.shelf-now a:focus-visible .cover{transform:translateY(-4px)}.shelf-now .nm{font:400 23px/1.18 var(--serif);margin:0 0 8px}.shelf-now .go{display:inline-block;font:600 14px var(--sans);color:var(--brass-deep);border-bottom:1px solid currentColor;padding-bottom:1px}.shelf-now a:hover .go{color:var(--ink)}.shelf-prep{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}.shelf-prep a{display:grid;gap:10px;align-content:start;text-decoration:none;color:var(--text)}.shelf-prep .cover{box-shadow:0 10px 20px rgba(0,0,0,.32);transition:transform .25s}.shelf-prep a:hover .cover,.shelf-prep a:focus-visible .cover{transform:translateY(-4px)}.shelf-prep .nm{margin:0;font:600 13.5px/1.3 var(--sans)}.st{display:inline-block;font:600 12px var(--label);letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:2px}.st-now{background:var(--brass);color:#2A2008}.st-soon{background:color-mix(in srgb,var(--brass) 20%,transparent);color:var(--brass-deep);border:1px solid var(--brass-deep)}.st-prep{padding:0;background:none;color:var(--faint);letter-spacing:.04em;font-weight:500}@media (max-width:980px){.shelf-prep{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:760px){.shelf-now{grid-template-columns:minmax(0,1fr);gap:24px}}@media (max-width:560px){.shelf-prep{grid-template-columns:repeat(2,minmax(0,1fr))}.shelf-now a{grid-template-columns:116px minmax(0,1fr);gap:16px}.shelf-now .nm{font-size:20px}} .calc-set-h h2{font-family:var(--serif);font-weight:400;font-size:24px;margin:0;display:flex;gap:10px;align-items:baseline} .cl-side h2{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.3;margin:0} .oop-empty h2,.oop-res h2{font-family:var(--serif);font-weight:400;font-size:26px;margin:4px 0 8px} .gr-main h3{font-family:var(--serif);font-size:21px;font-weight:500;margin:0 0 4px;color:var(--text)} .wx-card h2{font:600 12px var(--label);letter-spacing:.01em;text-transform:none;color:var(--faint)} .tfr h3{font-family:var(--serif);font-weight:400;font-size:20px;margin:0;line-height:1.25} .formcard h2{font-size:24px} .verdict h2{font-family:var(--serif);font-weight:500;font-size:22px;margin:0} .air-dec h2{font-family:var(--serif);font-weight:400;font-size:24px;margin:6px 0} .oop-doc h2{font-family:var(--serif);font-weight:400;font-size:26px;margin:6px 0 0} /* 5.86: this .su h1 rule is where the kit headline's size actually comes from, and it sat 900 lines below the .su h2 rule that looks like the one in charge. Equal specificity, later in the sheet, so an edit to the h2 rule changed nothing on the h1 and the headline stayed at 42px. Fourth instance of that same pattern today; see 5.78. Changed HERE, at the rule that wins, rather than by stacking a more specific override on top of it. */ .su h1{color:#F4F1EA;font-size:clamp(28px,2.9vw,38px);font-weight:400;line-height:1.12;margin:6px 0 12px} .su.compact h1{font-size:clamp(24px,2.6vw,32px)} .su-form h2{font-size:21px;margin:0;font-weight:500;color:var(--text)} .skiplink{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--navy);color:#F4F1EA; padding:12px 18px;font:600 15px var(--sans);text-decoration:none; border:2px solid var(--brass);border-radius:0 0 3px 0; } .skiplink:focus{left:0} @media (max-width:900px){ .hero .wrap{gap:0} .hero-copy{display:contents} .hero-copy>.eyebrow{order:1} .hero-copy>h1{order:2} .hero-copy>.lede{order:3} .hero-copy>.hero-ctas{order:4} .hero-copy>.hero-proof{order:5}.hero-copy>.hero-choose{order:6} .hero .wrap>.hero-books{order:6;margin-top:30px} .hero-copy>.hero-facts{order:7;margin-top:30px} } @media (max-width:560px){ .hero .wrap{padding-block:32px 44px} .hero h1{margin-top:12px!important} .hero .lede{font-size:17px;margin-top:15px} .hero-ctas{margin-top:22px;gap:9px} .hero-ctas .btn{padding-block:11px} .hero-proof{margin-top:14px;font-size:14.5px} .hero .wrap>.hero-books{margin-top:24px} .hero-copy>.hero-facts{margin-top:26px;padding-top:20px;row-gap:14px} } .nl-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center; border-top:1px solid var(--line);padding-top:18px;margin-bottom:40px} .nl-nav a{font:600 15px var(--sans);color:var(--accent-strong);text-decoration:none; padding:8px 2px;min-height:24px;display:inline-flex;align-items:center} .nl-nav a:hover{text-decoration:underline} @media (max-width:560px){.nl-nav{justify-content:flex-start;gap:14px}} .su-optin{display:flex;gap:10px;align-items:flex-start;margin:4px 0 2px; padding:13px 14px;border:1px solid var(--line);border-left:3px solid var(--brass); background:var(--note);font-size:13.5px;line-height:1.5;color:var(--text);cursor:pointer; --accent:var(--accent-strong); --faint:var(--muted)} .su-optin input{accent-color:var(--brass-deep);width:16px;height:16px;margin:2px 0 0;flex:0 0 auto} .su-optin b{font-weight:600} [hidden]{display:none!important} /* ============================================================================ INTERACTIVE BOUNDARY PASS, Dive 5, 25 October 2026. Each selector repeats the specificity of the rule it corrects, and this block is the last stylesheet in , so equal-specificity rules resolve here. Only the boundary color changes: no fill, no text color, no geometry, and none of the four brand colors are repainted. Controls on light grounds take --edge. Controls that always sit on a navy or near-black band take --edge-dark, because --edge reads only 2.55 on the lightest of those bands. NOT CHANGED, and why. .btn-brass keeps its #A9813F edge: it reads 3.50 on #FFFDF7 and 3.21 on #F7F3E8, and the audit found no brass control on an #E4DCC7 ground, so there is no failure to fix, while --brass-deep would have dropped it to 2.22 on a navy band. .news input keeps its #C9A15E edge, already 6.52 on navy. ========================================================================== */ .btn-ghost{border-color:var(--edge)} .icon-btn{border-color:var(--edge)} .fmt label{border-color:var(--edge)} .qty{border-color:var(--edge)} .field input,.field select,.field textarea{border-color:var(--edge)} .chips button{border-color:var(--edge)} .az button{border-color:var(--edge)} .lib-jump button{border-color:var(--edge)} .chooser-opts button{border-color:var(--edge)} .wx-presets button{border-color:var(--edge)} .pick-o button{border-color:var(--edge)} .doc-types button{border-color:var(--edge)} .air-locs button,.air-view button{border-color:var(--edge)} .calc .wb input{border-color:var(--edge)} .calc-tabs button{border-right-color:var(--edge)} #learnFilter button{border-color:var(--edge)} /* Always on a navy or near-black band. */ .hero .btn-ghost{border-color:var(--edge-dark)} .get2 .btn-ghost{border-color:var(--edge-dark)} .picker .pk-go .btn-ghost{border-color:var(--edge-dark)} .btn-ghost.on-dark{border-color:var(--edge-dark)} .res-quick a{border-color:var(--edge-dark)} .sampler-pick button{border-color:var(--edge-dark)} .flip-controls button{border-color:var(--edge-dark)} /* Selected states. 1.4.11 covers state, not only the resting component. The selected library filter changed background from #F7F3E8 to #FFFDF7, a ratio of 1.09, so in practice the brass border at 2.17 was carrying the state on its own. --brass-deep reads 4.41 and stays in the brass family. Dark mode already overrides this rule onto #13294D, where --brass reads well, so dark is left alone. A selected tab also changes its text color, so there the border was never the only cue, but the indicator itself still has to reach 3:1. */ .lib-jump button.hot{border-color:var(--brass-deep)} .tabs button[aria-selected="true"]{border-bottom-color:var(--brass-deep)} :root[data-theme="dark"] .tabs button[aria-selected="true"]{border-bottom-color:var(--brass)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tabs button[aria-selected="true"]{border-bottom-color:var(--brass)}} /* Hover and focus keep their own accent, which already clears 3:1. */ .btn-ghost:hover{border-color:var(--accent)} .icon-btn:hover{border-color:var(--accent)} /* Dark-scoped rules that outrank the block above, repeated here at their own specificity. #3A5A8C read 2.27 on the dark surface, and the pressed learn filter painted its border --navy, which is 1.17 against the dark page ground, so in dark mode the selected filter had no boundary at all. */ :root[data-theme="dark"] .pick-o button{border-color:var(--edge)} :root[data-theme="dark"] .su-chips label{border-color:var(--edge)} :root[data-theme="dark"] #learnFilter button[aria-pressed="true"]{border-color:var(--edge)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .pick-o button{border-color:var(--edge)} :root:not([data-theme="light"]) .su-chips label{border-color:var(--edge)} :root:not([data-theme="light"]) #learnFilter button[aria-pressed="true"]{border-color:var(--edge)} } /* BALANCE PASS 2026-10-25. Lone narrow blocks stranded in full-width bands were the single biggest source of dead space on the site. Measured with a maximal-empty-rectangle scan over every route at 1440/1280/1120. Do NOT exempt painted cards from that scan: that exemption is what hid these for weeks. */ .eng-close{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:clamp(28px,3.4vw,52px);align-items:stretch;margin-top:26px} .eng-close>.eng-why{max-width:none;margin:0} .eng-cta{display:grid;align-content:center;gap:12px;border-left:1px solid var(--line);padding-left:clamp(22px,2.4vw,34px)} .eng-cta-k{font-family:var(--serif);font-size:clamp(20px,2vw,24px);line-height:1.22;color:var(--text);margin:0} .eng-cta-s{font-size:15px;line-height:1.6;color:var(--muted);margin:0;max-width:42ch} .eng-cta>.btn{justify-self:start;margin-top:6px} @media (max-width:900px){.eng-close{grid-template-columns:minmax(0,1fr)}.eng-cta{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:22px}} .sec-head-lock{max-width:none;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);column-gap:clamp(36px,4.4vw,72px);align-items:end} .sec-head-lock>.eyebrow{grid-column:1;grid-row:1} .sec-head-lock>h2{grid-column:1;grid-row:2;margin:0} .sec-head-lock>.sec-deck{grid-column:2;grid-row:1/span 2;align-self:end;margin:0 0 5px;font-size:17px;line-height:1.62;color:var(--muted)} /* ==== 5.82 THE STANDFIRST, 27 October 2026 ==== OWNER, on the "Two routes out of where you are standing" paragraph: "it looks out of place and not having any importance on the website as it appears now ... should we put it in a box or do something different here." NOT A BOX, deliberately. This paragraph sits in a navy band directly above the two route columns it introduces. A box here would add a THIRD plane inside the band and compete with those columns, which are the actual content. The problem is not that it lacks a container; it is that nothing marks it as the introduction to what follows, so it reads as a stray caption. WHAT IT GETS INSTEAD, the treatment a standfirst earns in print: a brass rule down its leading edge, tying it to the eyebrow above and pointing at the columns below the warm on-navy ink from 5.73, not the cool #AEBACA blue-gray, which sat in the same hue as the band behind it and receded into it a step up in size and a tighter measure, so it reads as deck copy rather than as body text that happens to be over there Measured: 9.48:1 on the band, up from 7.73:1. */ /* ==== 5.83 THE BURIED FIGURE, 27 October 2026 ==== .oop-doc is a side head: eyebrow and heading left, body right. The detector flagged it RAGGED_INK 161 and SIDE_HEAVY 6.1, and the old registry dismissed it as "standard editorial layout". The layout IS standard. The content was the problem: the left column held two short lines and then stopped, while the single most arresting fact on the page, that this code is missed 78.58% of the time, sat buried in the middle of the first body sentence where nobody skimming will ever see it. A geometry patch would have evened the column and left the fact buried. The figure moves into the left column instead, which fills the column AND puts the reason to care where the eye lands first. THE WORDING IS THE FAA'S, UNCHANGED: "missed 78.58% of the time". It is a rate of misses across attempts, NOT a share of candidates, and the caption says so in those terms. Restating it as "78.58% of candidates" would have been a different and false claim. */ .oop-fig{margin:18px 0 0;display:block;max-width:30ch} .oop-fig b{display:block;font-family:var(--serif);font-weight:400; font-size:clamp(40px,4.4vw,54px);line-height:.95;color:#8E2A2A; letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums} .oop-fig b::after{content:"";display:block;width:44px;height:2px; background-image:var(--brass-sheen);margin:13px 0 11px} .oop-fig span{display:block;font-size:14px;line-height:1.55;color:var(--ink-2)} :root[data-theme="dark"] .oop-fig b{color:#D98080} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .oop-fig b{color:#D98080}} .band-navy .sec-head-lock>.sec-deck{color:#E8DFCF;font-size:18px;line-height:1.58; max-width:46ch;padding-left:20px;border-left:3px solid var(--brass); position:relative} @media (max-width:900px){ .band-navy .sec-head-lock>.sec-deck{font-size:17px;padding-left:16px;margin-top:14px}} @media (max-width:900px){.sec-head-lock{grid-template-columns:minmax(0,1fr)}.sec-head-lock>.sec-deck{grid-column:1;grid-row:auto;margin:6px 0 0}} /* SPECIFICITY TRAP. .wrap>p{max-width:68ch} (0-1-1) silently beat .bridge-note{max-width:none} (0-1-0), capping a full-width note at half its band. Any .wrap>p that is meant to run wide must be qualified with the type selector too. */ /* #engine right column: the sticky sample card is ~450px against a ~730px left column, so the bottom right of the band read as dead on screen. The column now carries the card plus a conversion panel and sticks as one unit. Every figure here is already asserted on this page. */ .eng-col2{display:grid;gap:22px;align-content:start;position:sticky;top:110px} .eng-col2>.formcard{position:static} .eng-side{--rule:var(--line-on-dark);--line:var(--line-on-dark);--rule-2:var(--rule2-on-dark);background:var(--navy);color:#E7E2D9;padding:24px 26px;display:grid;gap:12px;border-top:3px solid var(--brass)} .eng-side .eyebrow{color:var(--brass-lite)!important} .eng-side-k{font-family:var(--serif);font-size:21px;line-height:1.3;color:#F4F1EA;margin:0} .eng-side-l{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14.5px;line-height:1.5} .eng-side-l b{color:#E3C384;font-weight:600} .eng-side>.btn{justify-self:start;margin-top:4px} .eng-side-n{margin:0;font-size:13px;line-height:1.5;color:#AEBACA} @media (max-width:900px){.eng-col2{position:static}} /* #library series: a 259px cover sat beside a 761px content column, leaving ~500px of dead column on screen at wide viewports. The cover now rides with the content, which also keeps the book in view while the details are read. */ #librarySeries .series>:first-child{position:sticky;top:112px;align-self:start} /* ==== 5.76 THE LIBRARY PAGE WRECK ON PHONES, 27 October 2026 ==== OWNER sent a screenshot of #library on an iPhone with book-cover titles, the word ANEROID and a giant volume numeral painted straight across the headline and the lede. CAUSE, one word. The line above makes the cover a sticky rail on desktop, and this media query un-stuck it on phones with position:static. But .cover sets position:relative for a reason: its title plate, .cz-code and .cz-hd, is position:absolute and needs .cover as its containing block. static removes that block, so the plate resolved against the BODY instead and rendered at y=113 and y=335, which is exactly where the breadcrumb and the headline are. Measured: four covers affected, ir, cfi, com and atp, every one of them a direct child of .series; offsetParent on each read BODY. Eight escaped elements in all. relative un-sticks the rail exactly as static does and keeps the containing block, so the plate stays inside its cover. WHY IT HID: the fault only exists below 900px, and .cover's own rule does say position:relative, so reading the stylesheet shows the correct declaration. Only resolving the cascade ON THE VISIBLE ELEMENT at a phone width exposed the override. A first attempt to read the matched rules queried a hidden copy of .cover inside an inactive section.view and reported the page as correct. */ @media (max-width:900px){#librarySeries .series>:first-child{position:relative}} /* Same specificity trap as .bridge-note, third instance. A MULTI-COLUMN block must never inherit the single-column measure from .wrap>p: the measure applies per column, so a 68ch cap on a 2-column note halves the block and strands the rest of the band. Any new multi-column note under .wrap must be added here, qualified with the type selector to win on specificity. */ /* GUARANTEE BAR. .shared carried a 70ch reading measure while being the only block in a 1132px band, stranding 565px. Same shape as .bridge-note and .rdyb-foot: the measure is right for reading and wrong for the band. Two columns keep ~70ch per column AND fill it. */ /* NOTE-2. CSS `columns` was the wrong tool for these notes: multicol flows ONE text stream, so a sentence breaks across the gutter and the reader gets '...you got wrong' | 'last time.'. A 2-column GRID with one complete thought per cell fills the band AND reads cleanly. Any two-up note on this site uses .note-2, never `columns`. */ .note-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px clamp(28px,3.6vw,56px);align-items:start;max-width:none} .note-2>*{margin:0;display:block;min-width:0} .shared.note-2,.eng-note.note-2,.bridge-note.note-2,.rdyb-foot.note-2{max-width:none} @media (max-width:900px){.note-2{grid-template-columns:minmax(0,1fr);gap:12px}} /* RESOURCE MARKS, rebuilt 2026-10-25. They were uniform hairlines (fill:none, stroke .78-1.15) rendered at 15px inside a 30px hairline ring: the exact recipe for a stock icon set. They are now STRUCK marks - a solid disc in the card's own accent with the device cut in navy and the detail engraved back in metal - at 34px. Weight contrast, not uniform line, is what reads as engraved. The per-card accent is preserved because the disc paints with currentColor. */ /* ==== 5.97 THE EMBLEMS, 28 October 2026 ==== OWNER: "use better more professional emblems above the numbers in each box." They were 34px outline glyphs floating on the navy with no ground of their own, which is why they read as clip art rather than as marks. Each is now a struck brass medallion: a filled roundel with the glyph reversed out of it in the tile's own navy, a lit top edge and a fine rim. That is how a seal, a coin or a service badge is made, and it is the same vocabulary as the imprint seal in the footer, so the tiles now belong to the brand rather than to an icon set. Measured: glyph on medallion 9.1:1, medallion on tile 6.4:1. */ /* The medallion has to out-rank a generated per-tile rule, .res-hero .res-stats .rs.rs-doc .rs-ic{background:#E6CF9E26}, which is (0,4,0) and later in the sheet. That rule is a 15 percent transparent brass over navy, which is the gray roundel in the owner's screenshot. Matched here on specificity and placed after it, with the background set as the shorthand so the shorthand above cannot win on cascade order alone. The glyph REVERSES: currentColor drives the solid shape and --rs-ink drives the cut detail, so the first is set to the tile navy and the second to the medallion's own brass. Setting both to dark is what made the glyphs read as solid blobs on the first attempt. */ .res-hero .res-stats .rs .rs-ic.rs-ic{width:42px;height:42px;display:grid;place-items:center; border-radius:50%;border:0; background:linear-gradient(162deg,#FBE4AE 0%,#DDB76E 44%,#B88F49 100%); color:#15243F!important;--rs-ink:#F7E6BE!important; /* !important on these two only. The generated per-tile block sets .res-hero .res-stats .rs.rs-doc .rs-ic{color:#E6CF9E} at the same specificity as this rule, and tie-breaking by source order proved unreliable here because that block is emitted four times, once per tile. Scoped to the two properties that decide the reversal, not the whole rule. */ box-shadow:inset 0 1px 0 rgba(255,250,235,.85),inset 0 0 0 1px rgba(122,94,46,.60), 0 2px 4px rgba(0,0,0,.34),0 8px 16px -6px rgba(0,0,0,.42)} .res-hero .res-stats .rs .rs-ic.rs-ic svg{width:23px;height:23px;display:block} /* ==== 5.57 THE FOUR TILES, 27 October 2026 ==== OWNER: "the compasses in the background in the 4 little boxes needs attention ... this is dull, flat, and refuses to draw the human to the four boxes" and "these all look the same we need have these distinguishable". MEASURED CAUSES, both later overrides defeating a base rule that was correct: 1. .rs .rs-ring was set to opacity .08. A compass rose at 8 percent on a navy ground is not a watermark, it is nothing. The base rule had .20. 2. A generated per-tile block set rs-doc, rs-calc, rs-gl and rs-cert to the IDENTICAL #E6CF9E. Four tiles, one color, by construction. That is the "all look the same" verbatim. WHY HUE IS NOT THE ANSWER. Four categorical hues were validated against this navy ground with the palette checker. Every on-brand four-hue set failed CVD separation (worst adjacent dE 2.7 to 5.3 under deuteranopia and protanopia, against a floor of 6 even WITH secondary encoding). The only set that passed was an Okabe-Ito derivative, lemon/sky/pink/mint, which is off-brand for an aviation imprint and would fail the marketing bar harder than dullness does. Measured conclusion: four hues cannot be both CVD-safe and on-brand here, so identity stays on the icon and the label, which already carry it. WHAT CHANGES INSTEAD: the tiles were navy on navy and flat. They are now lit and raised, the compass is visible and set at a different angle on each tile so no two read alike, and the figure is the brightest thing in the group. */ .res-hero .res-stats .rs{ background-image:linear-gradient(158deg,#2A4571 0%,#1D3156 52%,#152541 100%); border-color:rgba(201,161,94,.42); box-shadow:inset 0 1px 0 rgba(255,245,222,.22), 0 1px 2px rgba(0,0,0,.30), 0 10px 24px -10px rgba(0,0,0,.55), 0 26px 48px -22px rgba(0,0,0,.50)} .res-hero .res-stats .rs::before{height:4px;opacity:1; background:linear-gradient(90deg,#A8813F 0%,#E6CFA0 38%,#FBEBC6 52%,#E6CFA0 66%,#A8813F 100%)} /* The watermark, visible at last, and a different bearing on each tile. */ /* The watermark was painting as GRAY, not gold. A warm hex at 30 percent alpha over a dark navy averages toward the navy and loses its chroma entirely, which is why it read as a pressed-steel dial rather than a compass rose in brass. mix-blend-mode:screen adds the gold to the ground instead of averaging with it, so the chroma survives. Measured on the tile ground the rose now renders around #6E6244 instead of #5A6072: warm, where it was reading cool. */ /* ==== 5.96 THE WATERMARK THAT WENT GRAY, 28 October 2026 ==== OWNER: "the compasses in the background in the 4 little boxes ... this is dull, flat ... blah, dead, uninspiring, drab, uncolorful and bland", and then again: "re do the dark grey color so it is not so blah, dull, drab, gloomy". MIX-BLEND-MODE:SCREEN WAS MY MISTAKE. I used it reasoning that it would ADD the gold to the navy instead of averaging with it. Screen does add, but it adds toward WHITE, so a mid-gold over navy screens to a pale desaturated blue-gray. That is the gray dial in the owner's screenshot, and I put it there while trying to make the rose warmer. Normal blending with a brighter brass at higher opacity is what was wanted. The rose also carries the compass needle in red (--mark-n), which is the red the owner pointed at on the home page, so the needle is brightened too and the rose reads as the imprint's compass rather than a gray gauge. */ /* ==== 6.08 THE COMPASS GETS ITS OWN TERRITORY, 28 October 2026 ==== Measured, at 1440px: card 342px tall, content ends at 227px -> 115px of dead space, 34% of every card. At 1024px (iPad landscape, small laptops) it was WORSE: 37-44%. And the mark was clipped 43-77px off the card bottom, by a DIFFERENT amount on each card -- because each card rotated it, and rotating a square grows its bounding box (176px -> 232-243px at 31/-24/57 degrees). One element was producing four separate defects: oversized, clipped, inconsistent between cards, and sitting under the description text. WHAT THE EVIDENCE ACTUALLY SAYS. Not the "distracting decoration" literature -- that is about students studying expository text for a later test, the one experiment on purely DECORATIVE elements (Rey 2012, JEMH) found nothing, and leaning on it here would be an overreach. The real cost is legibility: Scharff & Ahumada (J. Vision 2002) measured background texture slowing word search, F(2,54) = 76.19, p < .01, with the effect ABSENT on a plain ground; and WCAG 2.2 Failure F83 requires body text to clear 4.5:1 against the LIGHTEST pixel behind EACH LETTER, which a pale gold wash under copy breaks. Against that, Bateman et al. (CHI 2010) found thematic embellishment cost NOTHING in interpretation accuracy and IMPROVED recall 2-3 weeks later -- but their imagery sat beside and within the graphic, never under running text. So: KEEP THE COMPASS, REMOVE THE OVERLAP. Every documented benefit survives moving it; every documented cost is specific to the overlap. Rotation removed: it bought nothing and caused the uneven clipping. Below 1000px the card is only 211-234px tall with 7-15% slack -- there is no territory to give, so the mark is simply not drawn. An honest absence beats a mark laid over the copy. */ .res-hero .res-stats .rs .rs-ring{display:none} @media (min-width:1000px){ /* 6.08b: OPACITY WAS MAKING THE DIAL GRAY, and this is a family, not a one-off. Measured from the render: the ring band painted #75736C at CHROMA 4.2, against a brand brass of chroma 34-42 -- one tenth. Cause: #F2D79A at opacity .42 over navy #192C4D composites to #74746D, C* 4.1. Fading a WARM color toward a COOL ground drives it through gray, because the two hues are near-complementary and cancel. Measured series: opacity .42 -> C* 4.1 | .55 -> 11.0 | .70 -> 18.9 | .85 -> 26.4 | 1.0 -> 33.6 This is the same error as the mix-blend-mode:screen mistake in 5.96: I keep reaching for transparency to quieten a mark, and transparency over a complementary ground destroys the hue instead of calming it. RULE: to quieten a mark on a contrasting ground, pick a DARKER OR MUTED COLOR AT FULL OPACITY. Never lower opacity. #97854F is L* 56.0, C* 31.5, hue 91, 3.83:1 on the card -- quiet, and genuinely brass. */ .res-hero .res-stats .rs .rs-ring{display:block;opacity:1;color:#97854F; /* Sized from the SMALLEST measured dead band at this breakpoint (115px at 1440). 104px tall at bottom:-10 puts the mark's top 94px above the card foot -- 21px clear of where the copy ends, at every width tested. The first attempt used 132px and still clipped .rs-sub by 564px2 at 1440; the overlap test caught it, which is the whole point of having one. */ transform:none;right:-8px;bottom:-10px;width:104px;height:104px; mix-blend-mode:normal;--mark-n:#D1575F;--mark-c:#B09A55} .res-hero .res-stats .rs:hover .rs-ring, .res-hero .res-stats .rs:focus-visible .rs-ring{color:#B5A05E;transform:none} } .res-hero .res-stats .rs:hover .rs-ring,.res-hero .res-stats .rs:focus-visible .rs-ring{opacity:.70} .res-hero .res-stats .rs.rs-cert:hover .rs-ring{transform:rotate(101deg) scale(1.18)} /* The figure is the reason the tile exists, so it is the brightest thing in it. */ .res-hero .res-stats .rs b{color:#FFF0CC; text-shadow:0 1px 0 rgba(0,0,0,.28),0 3px 26px rgba(246,214,150,.34)} .res-hero .res-stats .rs span{color:#FFFAF0} .res-hero .res-stats .rs .rs-sub{color:#C4D2E2} .res-hero .res-stats .rs .rs-ic.rs-ic{color:#F6DCA8;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))} .res-hero .res-stats .rs:hover{box-shadow:inset 0 1px 0 rgba(255,245,222,.30), 0 2px 4px rgba(0,0,0,.32),0 18px 34px -12px rgba(0,0,0,.60), 0 36px 64px -26px rgba(0,0,0,.55)} .res-hero .res-stats .rs{--rs-ink:#12274A} /* QUICK ACCESS. These were a 1px #3A4D65 hairline on a navy hero: the border was within a few steps of the background, so they read as text, not buttons. They now carry a lit surface, a brass rim and brass text, and invert to solid brass on hover. Still clearly secondary to a primary CTA, but unmistakably a control. */ .res-quick a{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.028));border:1px solid rgba(214,182,124,.58)!important;color:#F1DEB6;font-weight:600;letter-spacing:.005em;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 2px 8px rgba(0,0,0,.30);transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease} .res-quick a:hover,.res-quick a:focus-visible{background:var(--brass);border-color:var(--brass)!important;color:#0C2249;box-shadow:0 4px 14px rgba(201,161,94,.36);transform:translateY(-1px)} .res-quick>span{color:#CFC8BD;letter-spacing:.14em;text-transform:uppercase;font-size:11px} /* ==== 5.58 QUICK ACCESS, 27 October 2026 ==== OWNER: "the quick access buttons all appear the to be the same and do not catch the human eye ... even if the click buttons need to completely redesigned". The 5.57 pass above gave them a lit surface and a brass rim, which fixed "is it a control" but not "which one do I want". Three identical pills in a row present three equal choices and therefore no choice at all; the eye has nothing to land on and slides past the group. FIX: a lead item and a direction. Flight Weather is the most-requested of the three, so it takes a solid brass fill and becomes the thing the eye lands on; the other two stay as rims and read as alternatives to it. Every item gains a trailing arrow, so the row reads as three doorways rather than three labels. Done in CSS alone: no markup changed, so nothing in the sprite or the DOM can drift out of step with it. */ .res-quick a{gap:9px;padding:9px 18px;font-size:14.5px} .res-quick a::after{content:"\2192";font-size:15px;line-height:1;opacity:.72; transform:translateX(0);transition:transform .18s ease,opacity .18s ease} .res-quick a:hover::after,.res-quick a:focus-visible::after{transform:translateX(3px);opacity:1} .res-quick a:first-of-type{background:var(--brass-sheen);border-color:#A8813F!important; color:#17243A;box-shadow:inset 0 1px 0 rgba(255,250,235,.62),0 2px 10px rgba(0,0,0,.34)} .res-quick a:first-of-type::after{opacity:.80} .res-quick a:first-of-type:hover,.res-quick a:first-of-type:focus-visible{ background:linear-gradient(180deg,#F8DCA0 0%,#DCB672 48%,#C09350 100%);color:#121D30} /* The 5.58 padding bump pushed the third item onto its own line, which is worse than the uniformity it replaced: a wrapped row of three reads as 2 + 1. The row is measured, not guessed -- at 1440 the three labels plus the eyebrow need roughly 600px and the column gives 645, so the padding goes back to 16px and the gap to 8px, which fits all three on one line from 1180px up. Below that the row is allowed to wrap evenly rather than 2 + 1. */ .res-quick{gap:8px} .res-quick a{padding:9px 16px;gap:8px} @media (max-width:1180px){.res-quick{gap:8px 10px}} /* ==== 5.59 THE RIGHT COLUMN VOID, 27 October 2026 ==== OWNER, repeatedly: "lopsided", "unbalanced", "way to lopsided o left". MEASURED on this hero at 1440: the left column runs y 40 to 780, the four tiles run y 155 to 650. .res-hero-grid carried align-items:center, so the shorter column was CENTERED in the taller one and the leftover 245px was split into two voids, one above the tiles and one below. Centering is what produces the "floating in space" look the owner keeps photographing. THIS IS THE CLASS MY OWN DETECTOR WAS BLIND TO. It compared box bottoms. Here the boxes are the same height by construction, because the grid made them so; the CONTENT inside one of them stops early. Box geometry says balanced. The eye says lopsided. The eye is right. FIX: the tile grid stretches to the full column height and the four rows share it equally, so the group closes against the left column instead of floating. */ .res-hero .res-hero-grid{align-items:stretch} .res-hero .res-stats{height:100%;align-content:stretch} @media (max-width:900px){.res-hero .res-stats{height:auto}} /* PAGE HEADS, global. .sec-head{max-width:760px} capped EVERY full-width page head at 760px in a 1132px band, stranding ~370px on the right of every headline on the site. Fixing these one page at a time was the wrong unit of work: it is one rule. A head that has a lede now sets as a two-column lockup (eyebrow + headline left, lede right, baseline aligned) which fills the band and reads as an editorial masthead. Heads without a lede keep a headline measure. */ .wrap:not(.blueprint):not(.split):not(.res-hero-grid):not(.co):not(.pdp):not(.head-row):not(.gear-wrap):not(.app-wrap):not(.amt-set):not(.pol-wrap)>.sec-head:not(.center){max-width:none} .wrap:not(.blueprint):not(.split):not(.res-hero-grid):not(.co):not(.pdp):not(.head-row):not(.gear-wrap):not(.app-wrap):not(.amt-set):not(.pol-wrap)>.sec-head:not(.center):has(>.lede){grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);column-gap:clamp(36px,4.4vw,72px);row-gap:14px;align-items:start} /* ==== 6.84 WHERE THE AIR FALLS, 29 October 2026 ==== OWNER, repeatedly and on several pages: the two column page head looks unbalanced. MEASURED ACROSS ALL 95 ROUTES BEFORE TOUCHING ANYTHING: twenty section heads carried a void of 20 percent or more above the deck, worst 59 percent on the medical hero, 145px of a 247px column empty in the top right corner. Not a medical page problem. A shared component problem. THE OLD BEHAVIOR WAS NOT A MISTAKE. It bottom aligned the deck so its last line sat on the headline baseline, a real editorial masthead convention that looks deliberate in print. It does not land on a scrolling page, and the reason is the part worth keeping: A VOID AT THE TOP IS TRAPPED AND A VOID AT THE BOTTOM IS NOT. An empty top right corner reads as a missing element, because the eye expects two columns to begin together. The same empty space at the bottom merges into the gap before the next section and stops registering as a hole at all. The deck now starts on the HEADLINE row instead of spanning up to the eyebrow, so its first line sits level with the headline first line. THE RULE EXISTED IN MULTIPLE COPIES, which is why earlier attempts at this behaved differently on different pages. Every copy was changed together. */ .wrap:not(.blueprint):not(.split):not(.res-hero-grid):not(.co):not(.pdp):not(.head-row):not(.gear-wrap):not(.app-wrap):not(.amt-set):not(.pol-wrap)>.sec-head:not(.center):has(>.lede)>.eyebrow{grid-column:1;grid-row:1} .wrap:not(.blueprint):not(.split):not(.res-hero-grid):not(.co):not(.pdp):not(.head-row):not(.gear-wrap):not(.app-wrap):not(.amt-set):not(.pol-wrap)>.sec-head:not(.center):has(>.lede)>h1,.wrap:not(.blueprint):not(.split):not(.res-hero-grid):not(.co):not(.pdp):not(.head-row):not(.gear-wrap):not(.app-wrap):not(.amt-set):not(.pol-wrap)>.sec-head:not(.center):has(>.lede)>h2{grid-column:1;grid-row:2;margin:0} .wrap:not(.blueprint):not(.split):not(.res-hero-grid):not(.co):not(.pdp):not(.head-row):not(.gear-wrap):not(.app-wrap):not(.amt-set):not(.pol-wrap)>.sec-head:not(.center):has(>.lede)>.lede{grid-column:2;grid-row:2;align-self:start;margin:0;max-width:46ch} .wrap:not(.blueprint):not(.split):not(.res-hero-grid):not(.co):not(.pdp):not(.head-row):not(.gear-wrap):not(.app-wrap):not(.amt-set):not(.pol-wrap)>.sec-head:not(.center):not(:has(>.lede))>h1,.wrap:not(.blueprint):not(.split):not(.res-hero-grid):not(.co):not(.pdp):not(.head-row):not(.gear-wrap):not(.app-wrap):not(.amt-set):not(.pol-wrap)>.sec-head:not(.center):not(:has(>.lede))>h2{max-width:34ch} @media (max-width:900px){.wrap:not(.blueprint):not(.split):not(.res-hero-grid):not(.co):not(.pdp):not(.head-row):not(.gear-wrap):not(.app-wrap):not(.amt-set):not(.pol-wrap)>.sec-head:not(.center):has(>.lede){grid-template-columns:minmax(0,1fr)}.wrap:not(.blueprint):not(.split):not(.res-hero-grid):not(.co):not(.pdp):not(.head-row):not(.gear-wrap):not(.app-wrap):not(.amt-set):not(.pol-wrap)>.sec-head:not(.center):has(>.lede)>*{grid-column:1!important;grid-row:auto!important;align-self:auto}} /* CALLOUTS. .callout{max-width:72ch} left a tinted panel at ~660px alone in a 1132px band on every page that uses one. A single-paragraph note cannot be set in CSS columns without splitting a sentence across the gutter, so the label is hoisted out of the paragraph and the panel sets as a label | body lockup that fills the band and still reads in one pass. */ /* ==== 5.68 THE CALLOUT LABEL COLUMN, 27 October 2026 ==== The owner photographed this band on the newsletters page. A .30fr label column was holding four words -- "About these first issues." -- across roughly 340px, so the label used 42 percent of its track and the rest was a hole between the label and the paragraph. The detector scored it minFill 0.42 with the ink mass 26 to 1 to the right. A fixed fraction is the wrong tool for a label, because a label is as wide as its words and no wider. fit-content sizes the column to the longest label it is ever given, capped so a long one cannot crowd the body. Same fault, and same remedy, as the FAA well in 5.66. */ .wrap>.callout.cl-lock{max-width:none;display:grid; grid-template-columns:fit-content(260px) minmax(0,1fr); column-gap:clamp(24px,2.6vw,40px);align-items:start} .wrap>.callout.cl-lock>b{margin:0;align-self:start} .wrap>.callout.cl-lock>p{margin:0;max-width:88ch} @media (max-width:900px){.wrap>.callout.cl-lock{grid-template-columns:minmax(0,1fr);row-gap:8px}} /* The blueprint band collapsed only below 900px, so at ~950px its left column was 497px and the head inside it was cramped. It now collapses below 1040px. The page-head lockup above is also scoped away from every grid .wrap, because a two-column head inside a two-column band gives four columns and three-word lines. That regression was mine. */ @media (max-width:1040px){.blueprint{grid-template-columns:minmax(0,1fr);gap:36px}} /* RESOURCE-CENTER HERO. On most Free Resources pages the hero grid has a single column, so the headline and lede sat at their measure with ~425px dead to the right on 26 pages. The promise list already lived underneath doing nothing for the balance; it now sits beside the headline, which fills the band and puts the three reassurances where they are actually read. */ @media (min-width:1100px){ display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); column-gap:clamp(36px,4.4vw,72px);row-gap:12px;align-items:end} grid-column:2;grid-row:2/span 2;align-self:end;margin:0 0 6px;max-width:46ch} @media (max-width:900px){ .res-hero-grid:not(:has(>.res-stats))>.res-hero-head{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);column-gap:clamp(36px,4vw,64px);align-items:start} } .res-hero-grid:not(:has(>.res-stats))>.res-hero-head>.crumbs{grid-column:1/-1} .res-hero-grid:not(:has(>.res-stats))>.res-hero-head>.eyebrow,.res-hero-grid:not(:has(>.res-stats))>.res-hero-head>h1,.res-hero-grid:not(:has(>.res-stats))>.res-hero-head>.lede{grid-column:1} .res-hero-grid:not(:has(>.res-stats))>.res-hero-head>.lede{max-width:none} .res-hero-grid:not(:has(>.res-stats))>.res-hero-head>.res-promise{grid-column:2;grid-row:2/span 3;align-self:center;margin:0;padding-left:clamp(24px,2.6vw,38px);border-left:1px solid var(--line-on-dark);display:grid!important;gap:14px;list-style:none} .res-hero-grid:not(:has(>.res-stats))>.res-hero-head>.res-promise>li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;font-size:15.5px;line-height:1.5;color:#CBD6E2;margin:0} .res-hero-grid:not(:has(>.res-stats))>.res-hero-head>.res-promise>li::before{content:"\2713";color:var(--brass);font-weight:700;font-size:14px;line-height:1.5;width:auto;height:auto;background:none;flex:none} .res-hero-grid:not(:has(>.res-stats))>.res-hero-head>.res-quick{grid-column:1/-1} @media (max-width:1000px){.res-hero-head{grid-template-columns:minmax(0,1fr)}.res-hero-head>*{grid-column:1!important;grid-row:auto!important}.res-hero-head>.res-promise{border-left:0;padding-left:0;align-self:start}} /* #app: a three-item benefit list ran as one 499px column in a 1132px band. */ .app-get{grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:clamp(24px,2.8vw,44px)} .app-get>li{max-width:none} @media (max-width:900px){.app-get{grid-template-columns:minmax(0,1fr)!important}} /* Newsletter / article sidebar: short card beside a very long column left the right half dead for most of the scroll. It now rides with the reader. */ #artAside{position:sticky;top:110px;align-self:start} @media (max-width:900px){#artAside{position:static}} /* BARE PAGE HEROES. Many pages set crumbs + eyebrow + h1 + lede as direct children of .wrap, with no .sec-head wrapper, so the page-head lockup above never reached them and the lede sat at its measure with 400px+ dead to the right. Same lockup, applied by structure instead of by class: headline left, lede right, everything after it full width. Scoped away from every grid .wrap so a two-column head can never land inside a two-column band. */ .wrap:not(.blueprint):not(.split):not(.res-hero-grid):not(.co):not(.pdp):not(.head-row):not(.gear-wrap):not(.app-wrap):not(.amt-set):not(.pol-wrap):has(>h1):has(>p.lede){display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);column-gap:clamp(36px,4vw,64px);align-content:start} .wrap:not(.blueprint):not(.split):not(.res-hero-grid):not(.co):not(.pdp):not(.head-row):not(.gear-wrap):not(.app-wrap):not(.amt-set):not(.pol-wrap):has(>h1):has(>p.lede)>*{grid-column:1/-1} .wrap:not(.blueprint):not(.split):not(.res-hero-grid):not(.co):not(.pdp):not(.head-row):not(.gear-wrap):not(.app-wrap):not(.amt-set):not(.pol-wrap):has(>h1):has(>p.lede)>.crumbs{grid-row:1} .wrap:not(.blueprint):not(.split):not(.res-hero-grid):not(.co):not(.pdp):not(.head-row):not(.gear-wrap):not(.app-wrap):not(.amt-set):not(.pol-wrap):has(>h1):has(>p.lede)>.eyebrow{grid-column:1;grid-row:2} .wrap:not(.blueprint):not(.split):not(.res-hero-grid):not(.co):not(.pdp):not(.head-row):not(.gear-wrap):not(.app-wrap):not(.amt-set):not(.pol-wrap):has(>h1):has(>p.lede)>h1{grid-column:1;grid-row:3;margin:0} .wrap:not(.blueprint):not(.split):not(.res-hero-grid):not(.co):not(.pdp):not(.head-row):not(.gear-wrap):not(.app-wrap):not(.amt-set):not(.pol-wrap):has(>h1):has(>p.lede)>p.lede{grid-column:2;grid-row:2/span 2;align-self:end;max-width:46ch;margin:0 0 6px} @media (max-width:1000px){.wrap:not(.blueprint):not(.split):not(.res-hero-grid):not(.co):not(.pdp):not(.head-row):not(.gear-wrap):not(.app-wrap):not(.amt-set):not(.pol-wrap):has(>h1):has(>p.lede){grid-template-columns:minmax(0,1fr)}.wrap:not(.blueprint):not(.split):not(.res-hero-grid):not(.co):not(.pdp):not(.head-row):not(.gear-wrap):not(.app-wrap):not(.amt-set):not(.pol-wrap):has(>h1):has(>p.lede)>*{grid-column:1!important;grid-row:auto!important;align-self:auto}} /* CHART LAB. .cl-grid used align-items:stretch, so the side panel was forced to the chart's full height while .cl-side pinned its content to the top: ~400px of empty white card. The panel now sizes to its content and stays sticky, so it rides alongside the chart instead of gaping. */ .cl-grid{align-items:start} .cl-side{align-content:start;min-height:0} /* AIRSPACE PAGE. .air-top stretched the right panel to the radar card's full height, leaving a ~200px empty tail; and .air-tfrs held a fixed two-column track, so a single TFR card filled only half the band. Both are the same family as the Chart Lab panel: a grid imposing a shape its content does not have. */ /* Revised 26 Oct 2026. align-items:start was the first attempt: it stopped the verdict card being stretched with its content pinned to the top, but it left the card ending 241px above the radar card, which is an L-shaped hole of bare page beside a large dark card. Measured at 1440. The card now stretches AND centers its content, so the column closes and the card reads as deliberate rather than short. Taller verdict states are unaffected. Playbook 5.9. */ .air-top{align-items:stretch} .air-verdict{justify-content:center} /* The radar plot was rendering at 380px, which made the map card 554px tall against a 305px verdict card. Capping the plot at 300px brings the row to 454px, so the centered verdict card carries about 75px of air each side instead of 124px, and the two columns still close level. Measured at 1440. */ .air-mapcard>svg{width:min(100%,300px);height:auto;margin:0 auto;display:block} .air-tfrs{grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr))!important} /* PROOFROW. A fixed three-column grid left an orphan hole whenever the item count was not a multiple of three: ATP has 4 items (two empty cells beside the 61.156 note), Helicopter has 8 (one empty cell). The last item now spans whatever is left of its row, so the row always closes. 3,6,9 items are untouched; 4,7 items span three; 5,8 items span two. */ .proofrow:not(.fb-figs)>li:last-child:nth-child(3n+1){grid-column:span 3} .proofrow:not(.fb-figs)>li:last-child:nth-child(3n+2){grid-column:span 2} @media (max-width:900px){.proofrow:not(.fb-figs)>li:last-child:nth-child(3n+1),.proofrow:not(.fb-figs)>li:last-child:nth-child(3n+2){grid-column:auto}} /* ==== 5.17 FAA FACT PANEL, series pages, 26 October 2026 ==== Two defects, both reported by the owner on the ATP page. 1. CONTENT TYPE. One .proofrow rendered four different kinds of fact in one identical 40px display serif: a test code (ATM), a quantity (70%), a document family (ACS) and a regulation citation (61.156). An acronym set as a statistic is a category error, and the FAA's figures sat against our own sales copy with only a hairline between them. The figures keep the figure treatment; the ACS standard and the regulatory gate move to a reference band with its own label, type and scale. The whole block is now an inset panel captioned as the FAA's data, so a visitor can see at a glance which part of the page is the agency's and which part is ours. 2. VOID. The old fixed three-column grid orphaned the last item whenever the count was not a multiple of three. The span fix that was already here widened the CELL but .proofrow span{max-width:34ch} kept the CONTENT narrow, so two thirds of the ATP row still read as empty. Column count is now computed from the item count (the first of 3, 2, 4 that divides it), and where no divisor exists the last item spans the rest of its row AND releases its max-width, so the row actually closes. See playbook 5.2. */ .faaband{margin:28px 0 40px;padding:26px 30px 28px;background:var(--card); border:1px solid var(--rule-2);border-left:3px solid var(--brass);border-radius:2px} .fb-src{margin:0 0 7px;font-family:var(--label);font-size:12.5px;font-weight:600; letter-spacing:.07em;text-transform:uppercase;color:var(--accent)} .fb-h{font-family:var(--serif);font-size:24px;font-weight:400;margin:0 0 4px;color:var(--text)} .fb-note{margin:0;color:var(--muted);font-size:15.5px} /* ==== 5.55 REGISTER TABLE, 27 October 2026 ==== The fb-figs grid computed its column count with [3,2,4].find(c=>NF%c===0)||3. A series with ONE test (ATM, CAX, IRA) divides by none of them, falls through to 3, and renders one item in a three-wide row: ink mass [100, 0, 0], 74 percent of the width empty. That is the lopsidedness the owner photographed on four separate pages. The arithmetic is deleted. A register table cannot hold a hole: the quantity columns are right-aligned to the panel edge, so one test fills the width exactly as six do, and the six helicopter formats can finally be compared straight down a column. */ /* ==== 5.91 A SERIES PAGE NEEDS TO SHOW THE PRODUCT, 27 October 2026 ==== OWNER: "use the part 107 home page as a guide for what we need to include on all our 8 courses ... all i see on these landing pages are just some words." MEASURED AGAINST THE PART 107 PAGE, the five series pages opened with an eyebrow, a headline, a lede and a status pill, and nothing else above the fold. Part 107 opens on its shelf and A&P on a fanned set; these opened on type. A page selling books whose first screen contains no book is not a product page, it is an announcement. The hero now carries the same fanned set A&P uses: the volumes overlapped, rotated slightly, center volume on top. It is built from the same volume ladders added in 5.90, so the fan IS the product, not a stock illustration. aria-hidden, because the volume titles are listed in full further down the page; this is a picture of the books, not reading matter. */ .ser-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(28px,4vw,56px);align-items:center;margin-bottom:40px} .ser-fan{position:relative;height:366px;min-width:0;padding-inline:18px} .ser-fan.sf-many{height:286px} .ser-fan.sf-many .cover{width:26%;max-width:176px} .ser-fan .cover{position:absolute;width:42%;max-width:252px; box-shadow:0 26px 46px rgba(16,12,6,.34),0 4px 10px rgba(16,12,6,.22); border-radius:1px 3px 3px 1px} @media (max-width:900px){ .ser-hero{grid-template-columns:minmax(0,1fr);gap:24px} .ser-fan{height:300px;max-width:520px;width:100%;margin-inline:auto;order:-1} .ser-fan .cover{width:44%;max-width:200px} .ser-fan.sf-many{height:212px} .ser-fan.sf-many .cover{width:26%;max-width:132px}} @media (max-width:520px){.ser-fan{height:210px}.ser-fan .cover{width:40%;max-width:124px}} .pghead.ser-navy{background:var(--navy);background-image:var(--lacquer);color:#E9E4D8; border-bottom:3px solid var(--brass);margin-bottom:0;padding-bottom:8px; --text:#E9E4D8;--muted:#CFC8BD;--faint:#AEBDCE;--mark:var(--brass); --accent:var(--brass-soft);--accent-strong:var(--brass-soft); --line:var(--line-on-dark);--rule:var(--line);--rule-2:var(--rule2-on-dark)} .ser-navy .crumbs,.ser-navy .crumbs a{color:#BCC6D4} .ser-navy .crumbs a:hover{color:var(--brass-soft)} .ser-navy h1{color:#F6F2E8} .ser-navy .eyebrow{color:var(--brass)} .ser-navy .lede,.ser-navy p{color:#CFC8BD} .ser-navy .pill.n{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.26);color:#E3CDA0} .ser-navy .ser-hero{margin-bottom:28px} .fb-reg{width:100%;border-collapse:collapse;margin:22px 0 0;table-layout:auto;background:transparent} .fb-reg th,.fb-reg td{background:transparent} .fb-reg thead th{font:600 11.5px/1 var(--label,var(--sans));letter-spacing:.11em; text-transform:uppercase;color:var(--muted);text-align:left;padding:0 0 9px; border-bottom:1px solid var(--rule-2)} .fb-reg thead th.fbn{text-align:right} .fb-reg td{padding:13px 0;border-bottom:1px solid var(--rule);vertical-align:baseline} .fb-reg tbody tr:last-child td{border-bottom:0;padding-bottom:4px} .fb-reg td.fbc{width:96px} .fb-reg td.fbc span{display:inline-block;font-family:var(--mono,ui-monospace,monospace); font-size:12px;font-weight:500;letter-spacing:.07em;color:var(--brass-soft,#E6CF9E); background-image:linear-gradient(180deg,#16315C,#0C2249);padding:4px 9px;border-radius:2px; box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(12,34,73,.30)} .fb-reg td.fbt{font:500 16.5px/1.3 var(--sans);color:var(--text)} .fb-reg td.fbn{text-align:right;font-size:15px;color:var(--muted); font-variant-numeric:tabular-nums;width:132px;white-space:nowrap} @media (max-width:760px){ .fb-reg thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); clip-path:inset(50%);white-space:nowrap} /* ==== 6.81 CONTENT LOST OFF THE RIGHT EDGE ON PHONES, 29 October 2026 ==== OWNER, urgently: content not displaying on mobile. CAUSE: this track list read "auto minmax(0,1fr)". A grid track of auto sizes to MAX-CONTENT and has no floor, so a first cell reading "Commercial pilot, flight engineer or control tower operator" forced column one to the width of that phrase on one line and pushed column two clean off the screen. Measured 354px of box holding 514px of content, so 160px of the second column simply was not there. WHY THE REGRESSION SUITE NEVER SAW IT: quick.js tests DOCUMENT horizontal scroll. Content clipped inside a container produces no document scroll at all, so the page reported PASS while a column was missing. A scrollbar is a nuisance; silent clipping is data loss, and the check could not tell the difference because it was only ever looking for the nuisance. FIX: minmax(0,auto) keeps the content-sized behavior but gives the track a floor of zero so it can shrink and wrap instead of overflowing. */ .fb-reg tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:2px 14px; padding:12px 0;border-bottom:1px solid var(--rule)} .fb-reg tbody td{min-width:0} .fb-reg tbody tr:last-child{border-bottom:0} .fb-reg td{border:0;padding:0;width:auto!important} .fb-reg td.fbc{grid-row:span 2} .fb-reg td.fbn{text-align:left;grid-column:2} .fb-reg td.fbn.fbq::before{content:"Questions: ";color:var(--muted)} .fb-reg td.fbn.fbh::before{content:"Time: ";color:var(--muted)} } /* Revised 26 October 2026. The first pass separated figures from references correctly but over-corrected: the passing score lost a third of its anatomy and the ACS, which is the standard the whole test is built from, became the smallest thing on the panel. Both are now anchors of equal weight, each with the same three parts the test cells carry: a display line, a bold label and a gray detail. The distinction of KIND is kept by the face, not by the size. 70% is a quantity and stays in the figure serif; the ACS is a document title, not a statistic, so it is set in the serif as a title and linked. */ /* THE WELL. The owner: "these all blend together ... all same look." The register and the anchors were two hairline-separated bands of the same cream at the same elevation, so the panel read as one undifferentiated field. The anchors now sit in a recessed well: a darker ground, an inset top shadow and a lit top edge, so the FAA's headline facts are on a visibly different plane from the register above them. Bled to the panel edges. */ .fb-well{margin:24px -30px -28px;padding:0 30px; background-image:linear-gradient(180deg,#E7D7B8 0%,#E0CEAD 100%); border-top:1px solid rgba(141,121,80,.58); box-shadow:inset 0 1px 0 rgba(255,255,255,.52),inset 0 5px 11px -3px rgba(62,50,28,.19)} /* ==== 6.00 THE WELL HAD NO DARK COUNTERPART, 28 October 2026 ==== Measured, not reasoned: rendered at colorScheme dark the panel paints #152E57 (L* 19.2) and the well painted #E6D6B7 (L* 86.2) -- a cream slab inside a navy panel, carrying dark-mode ink (--text #E9E4D8). The well's figures read at about 1.1:1. It was invisible, and had been since the well was built. CAUSE, and it is a family, not a one-off: a color written as a hex LITERAL inside a component rule is unreachable by the theme. The dark block can only re-point tokens; it cannot reach a literal. Every literal light background in a component is therefore a latent dark-mode hole. This is the sibling of the duplicate-definition family (5.62 / 5.72 / 5.76 / 5.86): there a later rule silently won, here no rule can ever win. Both are invisible to a light-mode check, which is the only check I was running. The well is recessed, so in dark it goes DARKER than the panel, not lighter: #0B1C3A -> #081529 is 1.31:1 below the panel and holds every ink above 10.5:1 (text 13.9, muted 10.6, accent-strong 11.0). */ :root[data-theme="dark"] .fb-well, :root[data-theme="dark"] .fb-gate{border-color:rgba(146,176,224,.26)} :root[data-theme="dark"] .fb-well{ background-image:linear-gradient(180deg,#0B1C3A 0%,#081529 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 5px 13px -3px rgba(0,0,0,.55)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fb-well, :root:not([data-theme="light"]) .fb-gate{border-color:rgba(146,176,224,.26)} :root:not([data-theme="light"]) .fb-well{ background-image:linear-gradient(180deg,#0B1C3A 0%,#081529 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 5px 13px -3px rgba(0,0,0,.55)}} /* ==== 5.66 THE WELL'S OWN VOID, 27 October 2026 ==== Caught by the rebuilt ink detector in work written yesterday: HUGS_SIDE, minFill 0.33 on cell 1 of 2. Both rows of the well were equal 1fr columns, but the left cell holds a figure and two short lines whose widest run measures about 250px, so it filled a third of a 540px track and left a hole beside it while the right cell ran full. Equal columns are only balanced when the content in them is comparable; here it never is, by construction. fit-content sizes each left column to its own content up to a cap, and the right column takes everything else, so the void cannot form at any width. */ .fb-anchors{display:grid;grid-template-columns:fit-content(300px) minmax(0,1fr); gap:26px clamp(32px,4vw,64px);padding:22px 0} .fb-a{display:grid;gap:7px;align-content:start} .fb-fig{font-family:var(--serif);font-weight:400;font-size:clamp(32px,3.2vw,40px); line-height:.95;color:var(--text);letter-spacing:-.01em} .fb-cite{font-family:var(--serif);font-weight:400;font-size:clamp(25px,2.5vw,32px); line-height:1.04;color:var(--text);letter-spacing:-.005em;word-break:break-word} .fb-cite.sm{font-size:clamp(23px,2.2vw,28px)} .fb-cite a{color:var(--accent-strong);text-decoration:underline;text-underline-offset:5px; text-decoration-thickness:1px} .fb-cite a:hover{color:var(--text)} .fb-k{font:600 15px/1.35 var(--sans);color:var(--text)} /* Closing the left void in 5.66 let the right column run to the full track, which put the ACS subtitle on one ~90 character line. Measure is capped at 72ch: the slack now sits at the outer margin, where it reads as an ordinary ragged right, rather than between two columns, where it read as a hole. */ .fb-d{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted);max-width:72ch} .fb-gate{display:grid;grid-template-columns:fit-content(265px) minmax(0,1fr); gap:14px clamp(32px,4vw,64px); align-items:start;padding:22px 0;border-top:1px solid rgba(158,140,102,.34)} .fb-gate>div{display:grid;gap:7px;align-content:start} @media (max-width:760px){ .faaband{padding:22px 18px 24px;margin:24px 0 32px} .proofrow.fb-figs{grid-template-columns:minmax(0,1fr);margin-top:18px;padding-top:18px} .proofrow.fb-figs>li.fb-wide{grid-column:auto} .fb-well{margin:20px -18px -24px;padding:0 18px} .fb-anchors{grid-template-columns:minmax(0,1fr);gap:22px;padding:18px 0} .fb-gate{grid-template-columns:minmax(0,1fr);gap:12px;padding:18px 0} } /* AMT COVER COLORS. The five volumes were five near-neutral grays (#776A66 to #302A29): indistinguishable on a shelf, in a bag or on the page, and they contradicted the A&P Set cover, which already carries five colored spine tabs. Each volume now takes its tab color, so the set cover reads as a legend for the series. The graphite set cover is unchanged. */ .cover.amt{background:linear-gradient(168deg,#846819 0%,#977818 55%,#917314 100%)!important;--cacc:#F0DCA2!important;--csoft:#FFF3D6!important} /* Volume One, General */ .cover.amt2{background:linear-gradient(168deg,#1C6E93 0%,#196B90 55%,#15658A 100%)!important;--cacc:#A8D4EA!important;--csoft:#DCF0FB!important} /* Volume Two, Airframe */ .cover.amt3{background:linear-gradient(168deg,#A33A2A 0%,#9F3727 55%,#993323 100%)!important;--cacc:#F0B2A6!important;--csoft:#FFD8CF!important} /* Volume Three, Powerplant */ .cover.amt4{background:linear-gradient(168deg,#1E7A4C 0%,#1B7749 55%,#187143 100%)!important;--cacc:#A4DCBD!important;--csoft:#D6F4E4!important} /* Volume Four, Chart and Figure Supplement */ .cover.amt5{background:linear-gradient(168deg,#6B4A91 0%,#68478E 55%,#624288 100%)!important;--cacc:#CBB0E6!important;--csoft:#E8D9F7!important} /* Volume Five, Oral and Practical Guide */ /* VOLUME COLORS, all series. Volumes inside a series were shades of one hue (Private Pilot was three browns, Part 107 three blues, Helicopter six blues), which is indistinguishable on a shelf. Each volume now carries its own hue inside the series family, with a measured minimum CIELAB separation between any two volumes of the same series. */ .cover.v1{background:linear-gradient(168deg,#2F6FB5 0%,#2D6CB0 55%,#2C68AA 100%)!important;--cacc:#B9D2F2!important;--csoft:#E8F1FF!important} .cover.v2{background:linear-gradient(168deg,#1D6E7E 0%,#1C6B7A 55%,#1B6776 100%)!important;--cacc:#A9D6DE!important;--csoft:#DCF2F6!important} .cover.v3{background:linear-gradient(168deg,#3E3F8C 0%,#3C3D88 55%,#3A3B83 100%)!important;--cacc:#B6B7E6!important;--csoft:#E2E2FA!important} .cover.pp{background:linear-gradient(168deg,#846819 0%,#806518 55%,#7C6117 100%)!important;--cacc:#F0DCA2!important;--csoft:#FFF3D6!important} .cover.pp2{background:linear-gradient(168deg,#A3561F 0%,#9E531E 55%,#99501D 100%)!important;--cacc:#F2C3A2!important;--csoft:#FFE3D2!important} .cover.pp3{background:linear-gradient(168deg,#6E3B4E 0%,#6B394C 55%,#673749 100%)!important;--cacc:#DFB2C1!important;--csoft:#F6DCE5!important} .cover.heli{background:linear-gradient(168deg,#2E86A8 0%,#2C82A3 55%,#2B7D9D 100%)!important;--cacc:#ADD9EC!important;--csoft:#E6F6FD!important} .cover.heli2{background:linear-gradient(168deg,#1A7A62 0%,#19765F 55%,#18725C 100%)!important;--cacc:#A5DCCB!important;--csoft:#DCF5EC!important} .cover.heli3{background:linear-gradient(168deg,#3B5FA8 0%,#395CA3 55%,#37599D 100%)!important;--cacc:#B4C6EC!important;--csoft:#E0E9FB!important} .cover.heli4{background:linear-gradient(168deg,#7A4A86 0%,#764882 55%,#72457D 100%)!important;--cacc:#D7B4DF!important;--csoft:#F2E0F6!important} .cover.heli5{background:linear-gradient(168deg,#8A6A1C 0%,#86671B 55%,#81631A 100%)!important;--cacc:#E8D29B!important;--csoft:#FBF0D2!important} .cover.heli6{background:linear-gradient(168deg,#1F5F7A 0%,#1E5C76 55%,#1D5972 100%)!important;--cacc:#A8CBDC!important;--csoft:#DFF0F8!important} /* HELICOPTER VOLUMES. Six shades of one blue became six distinct hues, muted for the imprint, with a measured minimum CIELAB separation of 31 between any two volumes. */ .cover.heli{background:linear-gradient(168deg,#2E5E7A 0%,#2C5B76 55%,#2B5872 100%)!important;--cacc:#A9C6D9!important;--csoft:#E0EFF8!important} /* PRH Private Helicopter */ .cover.heli2{background:linear-gradient(168deg,#1F6B55 0%,#1E6852 55%,#1D644F 100%)!important;--cacc:#A2D6C3!important;--csoft:#DBF2E8!important} /* IRH Instrument Helicopter */ .cover.heli3{background:linear-gradient(168deg,#6B3F7A 0%,#683D76 55%,#643B72 100%)!important;--cacc:#D2B0DC!important;--csoft:#EFDCF4!important} /* CRH Commercial Helicopter */ .cover.heli4{background:linear-gradient(168deg,#876723 0%,#836422 55%,#7E6020 100%)!important;--cacc:#E6CF9B!important;--csoft:#FAEFD1!important} /* FRH Flight Instructor Helicopter */ .cover.heli5{background:linear-gradient(168deg,#8A3B3B 0%,#863939 55%,#813737 100%)!important;--cacc:#E2AEAE!important;--csoft:#F7DCDC!important} /* FIH CFI Instrument Helicopter */ .cover.heli6{background:linear-gradient(168deg,#4A6B1F 0%,#48681E 55%,#45641D 100%)!important;--cacc:#C2DA9E!important;--csoft:#E9F5D4!important} /* ATH Airline Transport Helicopter */ /* Newsletter issues had a sidebar holding one small card, so 45% of the viewport sat empty for the whole scroll of a long issue. Issues now get the same sidebar article pages already had: a table of contents for the issue, the subscribe card and links to other issues. */ #nlAside{position:sticky;top:110px;align-self:start} @media (max-width:900px){#nlAside{position:static}} /* PRODUCT PAGES. The media column holds a cover about 578px tall beside a details column near 1,290px, so the bottom two thirds of the left column read as dead on every product page. The cover is sticky, so instead of pinning it to the top it now rides at the vertical center of the viewport: the book sits beside whatever detail is being read, which is how a product shot is meant to behave, and the empty run below it disappears. */ .pdp-media{top:clamp(104px,calc(50vh - 290px),280px)!important} @media (max-width:900px){.pdp-media{position:static!important;top:auto!important}} /* PUBLISHER'S DEVICE AT THE FOOT. The foot carried the words "Aneroid Press" in small type, directly under the Aneroid Press wordmark: the imprint named twice on one cover. That line is replaced by the press device, the dividers from the seal, drawn single-ink like the wordmark above it so it holds on any of the cover colors. One wordmark, one device, no repetition, which is how a trade imprint sets a cover. */ .cover .cz-dev{position:absolute;right:7.1%;bottom:4.6%;width:9cqw;height:auto;color:#F4F1EA;opacity:.9;display:block} /* 4.43 series cover: center against the content column. The cover is sticky so it tracks a tall row, but align-self:start pinned it to the top of a SHORT row, where sticky never engages, leaving a void under every cover on the library page. */ .series>:first-child{align-self:center} @media (max-width:820px){.series>:first-child{align-self:start}} /* 4.49 COVER COLOR COLLISIONS, measured from rendered pixels 2026-10-25, not from CSS. Three defects the CSS alone did not show: - .cover.engine and .cover.digital rendered IDENTICALLY (CIELAB dE 0.0) and both sat dE 5.5 from .cover.v1. Three Part 107 products a buyer compares side by side. - .cover.pp and .cover.amt carried the SAME hex, #846819. The chromatic band is full at 23 covers, so the Exam Engine and the Digital Set leave the volume-hue system altogether: they are not printed volumes, and a graphite pair separated by lightness cannot collide with any volume hue. Private Pilot Volume One takes a deep espresso that anchors its own family against pp2 orange and pp3 plum. All three clear 4.5:1 against the cream cover type. */ /* The Part 107 Library, the Digital Set and the Exam Engine all carry cls:"set", so all three rendered as the same blue cover. Keyed on the product id, not the class, so the data model is untouched and the Library keeps the flagship blue. */ .cover[data-cover="engine"]{background:linear-gradient(168deg,#171B23 0%,#151920 55%,#13171D 100%)!important;--cacc:#A9B3C2!important;--csoft:#DDE3EC!important} .cover[data-cover="digital"]{background:linear-gradient(168deg,#515E6B 0%,#4E5B67 55%,#4A5763 100%)!important;--cacc:#C3CEDA!important;--csoft:#E7EDF4!important} .cover.pp{background:linear-gradient(168deg,#5C3D0E 0%,#593B0D 55%,#55380C 100%)!important;--cacc:#D9BE8E!important;--csoft:#F6E7CE!important} /* 4.50 "Online practice" had no column heading. The panel label was a 13px eyebrow, and on an in-preparation series there is no big number under it, so every line in the block rendered at the same size and nothing led the eye. On a finished series the number is the heading and the label stays an eyebrow; on an in-preparation one the LABEL has to be the heading, with "In preparation" demoted to the status line it actually is. */ .stool .sth{font-size:14.5px;letter-spacing:.05em} .stool.soon .sth{font-family:var(--serif);font-size:clamp(25px,2.4vw,31px);font-weight:400; letter-spacing:0;text-transform:none;line-height:1.08;display:block;margin:0 0 6px} .stool.soon .cnt{font-family:var(--label)!important;font-size:12.5px!important;font-weight:600; letter-spacing:.06em;text-transform:uppercase;color:var(--faint)!important;margin:0 0 8px} .stool.soon .soonnote{margin-top:0} @media (max-width:760px){.stool.soon .sth{font-size:24px}} /* 4.51 .calc-row is a fixed 3-column grid. Groups of 7 and 5 calculators leave an orphan last row with 2 and 1 empty cells, measured as a 1035x431 void on a FRESH page load, so this one is real. Same remedy already proven on .proofrow: let the last item span the cells its row would otherwise leave empty. An earlier attempt converted the whole multi-column container to an auto-fit grid and crushed the cards to one word per line; that was reverted. Do not change the layout engine here, only the span. */ .calc-row>*:last-child:nth-child(3n+1){grid-column:span 3} .calc-row>*:last-child:nth-child(3n+2){grid-column:span 2} @media (max-width:900px){.calc-row>*:last-child:nth-child(3n+1),.calc-row>*:last-child:nth-child(3n+2){grid-column:auto}} /* 4.52 .art-grid is a 4-column article index with a full-width promotion placed part way down it. The promotion forces a row break, so the two articles before it left two empty cells: an 849x300 void, 51% of the viewport width, reproduced on a fresh page load. Dense packing backfills those cells with later cards. Each card carries its own category and date, so it stays readable when one moves up a row. */ .art-grid{grid-auto-flow:row dense} /* 4.53 The medical page runs its guide grid inside a column that a sticky table of contents has already narrowed, so the site-wide four-up produced 178px columns and titles that wrapped to five lines. auto-fit sizes from the container it is actually in rather than from the viewport, so the same markup gives two wide cards beside the contents and one on a phone. */ #medGuides{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))} /* ==== 4.59 SECTION BOUNDARIES ON THE MEDICAL PAGE, 28 October 2026 ==== Owner: "it's hard to tell when one section ends and the next starts on this page". Measured before changing anything: 16,521px of uniform cream, 33 headings, h2 at 28px and h3 at 21px over 17px body. Steps of 1.33x and 1.24x. No eyebrows, no rules, no change of ground anywhere. Nothing in the scroll says "new section" except a slightly larger line of the same typeface. NN/g's remedy, from the F-pattern work already cited in 4.55: "Use headings and subheadings" and "Ensure they look more important, and are more visible, than normal text." Visible is the operative word, and ours were not. THREE SIGNALS, so no single one has to carry it: 1. A full-width rule across the column with a brass tab at its left. A rule is the one device that reads as a boundary rather than as emphasis. 2. A real type step. h2 goes to 34px, h3 drops to 20px, so the ratio between them is 1.7x instead of 1.33x and they can never be mistaken for each other. 3. Air. 76px above an h2 against 40px above an h3, so the eye gets a pause before a major section and only a breath before a minor one. The inline font sizes they replace could not be themed, could not respond and could not be revised in one place. */ /* 4.59b. Owner, second pass: the sub-heads "bleed too much into background and the other content". Measured, and the fault was HUE, not lightness. The accent brown #6B4F2B sits 5.94:1 against the paper but only 11.1 chroma units from it, so a warm head on a warm ground had almost nothing but weight separating it. The page ink is 12.32:1 and 44.9 chroma units away: four times the hue separation and double the contrast. Same lesson as the navy band earlier tonight, arrived at from the opposite direction. The section rule also firms up, from a 1px hairline in the faint --line to 2px in --rule-2 with a wider brass tab, so the boundary reads as drawn rather than as a seam in the paper. */ [data-view="medical"] .med-h2{position:relative;margin:82px 0 6px;padding-top:28px; font-size:clamp(26px,2.7vw,34px);line-height:1.16;border-top:2px solid var(--rule-2)} [data-view="medical"] .med-h2::before{content:"";position:absolute;top:-3px;left:0; width:96px;height:4px;background:var(--brass);border-radius:2px} [data-view="medical"] .med-h2-tight{margin-top:0;padding-top:0;border-top:0} [data-view="medical"] .med-h2-tight::before{display:none} [data-view="medical"] .med-h3{margin:46px 0 8px;font-size:22px;line-height:1.3; font-weight:600;padding-left:16px;border-left:4px solid var(--brass); color:var(--text)} @media (max-width:620px){ [data-view="medical"] .med-h2{margin-top:58px;padding-top:24px} [data-view="medical"] .med-h3{margin-top:36px;font-size:20.5px} } /* ==== 4.55 THE MEDICAL PAGE ANSWER STRIP, 28 October 2026 ==== Measured before this was built: on a phone the page ran 1,567px, about four screens, before the first section heading, and the single most reassuring sentence we had ("very few people are turned down for having a condition") was the second sentence of a 57 word paragraph in the RIGHT-HAND column. Nielsen Norman Group, Kara Pernice, F-shaped reading, 12 November 2017 and last reviewed 19 August 2026: "the F-shaped scanning pattern is bad for users and businesses" and "users may skip important content simply because it appears on the right side of the page". The same article's remedy is the spec for this strip: "Include the most important points in the first two paragraphs on the page", "Visually group small amounts of related content", "Bold important words and phrases", "Cut unnecessary content". Amy Schade's inverted pyramid piece, 11 February 2018, supplies the ordering rule: "the most important information (or what might even be considered the conclusion) is presented first". So the four questions a frightened visitor actually arrives with are answered full width, above the contents, in under fifteen words each, each one a link into the section that proves it. Hairline grid rather than tinted cards: a tinted panel in this position reads as an advertisement, which is the banner blindness finding from the same researcher. */ /* ==== 4.56 BULLET MEASURE INSIDE THE POLICY BODY, 28 October 2026 ==== .app-get{grid-template-columns:repeat(3,...)!important} was written for the #app page, where the band is 1132px and each item is a short benefit line. It leaks into .pol-body, where the column is 780px, so every list on the medical page was setting as THREE 200px COLUMNS. Measured: an item of 81 words in a 200px column ran 589px tall at roughly 25 characters a line, and a two item list left one of the three tracks empty. That is not a style preference, it is a measure problem: the Baymard and NN/g guidance both put comfortable line length well above 25 characters, and a 589px column of 25 character lines is the shape the F-pattern research describes people abandoning. auto-fit sizes from the container actually in use rather than from an assumed band, so a 780px body gives two tracks of about 378px and a phone gives one. */ .pol-body .app-get{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))!important} /* The page head carries 56px of margin below it, which left a band of paper between the tinted hero and this one and made the stack read as two unrelated things. Pulling the band up by that margin sets hero, answers and body as one deliberate sequence: tinted, dark, paper. */ .med-ans-band{background:var(--navy);color:#E9E4D8;padding-block:28px 32px; border-block:3px solid var(--brass);margin-top:-56px;margin-bottom:34px} @media (max-width:900px){.med-ans-band{margin-top:-36px;margin-bottom:26px}} /* THE TWO MODES SEPARATE BY DIFFERENT MEANS, AND THAT IS DELIBERATE. LIGHT: the fill does the work. Navy on paper is 12.32:1, so the band is unmissable and the brass rule is decoration (it is only 1.89:1 against paper). DARK: the fill cannot do the work and no navy step can. Measured every candidate: --navy-2 gives 1.48:1 against the page but keeps text at 10.98 and the brass label at 5.16; --navy-3 lifts the band to 1.97 but drops the brass label to 3.88, under the 4.5 AA floor for normal text. There is no step that buys fill separation without losing label legibility, so the BOUNDARY carries it instead: WCAG 2.2 SC 1.4.11 asks 3:1 for the boundary of a visual element, and the 3px brass rule is 7.64:1 against the page and 5.16:1 against the band. Do not "fix" the 1.48 by lightening this fill. It is the text that pays. */ @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .med-ans-band{background:var(--navy-2)}} :root[data-theme="dark"] .med-ans-band{background:var(--navy-2)} .med-ans-h{font-family:var(--label);font-size:12.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--brass);margin:0 0 20px;font-weight:500} /* ==== 4.57 FOUR OBJECTS, NOT FOUR COLUMNS OF ONE PARAGRAPH, 28 Oct 2026 ==== The owner's second look: the four answers "all look same and as one long horizontal words in a panel". He was right. A 1px divider between four blocks of identical typography does not make four things, it makes one block with lines in it, and the eye reads straight across as if it were prose. Three changes, each doing a different job. SEPARATION comes from the GAP, not the fill. A card tinted off this navy measures only 1.26:1 against the band, which is invisible, so 20px of air plus a brass-tinted border does the work a fill cannot. DISTINCTION comes from the verdict. Each card now leads with No, No, Yes, No, so the four are no longer interchangeable at a glance and the single Yes, which is the answer people get wrong, is the one that stands out. It is a filled chip against three outlined ones, but the word itself carries the meaning, so nothing depends on color alone and WCAG 2.2 SC 1.4.1 is satisfied. SCANNABILITY: verdict, then question, then evidence. That is the inverted pyramid at the scale of a single card. */ .med-answers{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} .med-answers>li{margin:0;max-width:none;display:flex} .med-answers a{flex:1;display:block;padding:17px 19px 19px;text-decoration:none; color:inherit;border:1px solid var(--line-on-dark);background:rgba(255,255,255,.04); transition:background .18s,border-color .18s} .med-answers a:hover,.med-answers a:focus-visible{background:rgba(255,255,255,.085); border-color:var(--brass)} .ans-v{display:inline-block;font-family:var(--label);font-size:11.5px;font-weight:600; letter-spacing:.13em;text-transform:uppercase;padding:3px 10px 2px;margin-bottom:13px; border:1px solid var(--brass);color:var(--brass)} .ans-v.yes{background:var(--brass);color:#0C2249} .med-answers b{display:block;font-size:16.5px;line-height:1.34;margin-bottom:9px; color:#F4F1EA;transition:color .18s} .med-answers a:hover b{color:var(--brass-soft)} .ans-d{display:block;color:#CFC8BD;font-size:14.5px;line-height:1.55} @media (max-width:1040px){.med-answers{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:620px){ .med-ans-band{padding-block:24px 26px} .med-answers{grid-template-columns:minmax(0,1fr);gap:14px} .med-answers a{padding:15px 17px 17px} } } /* The contents list is a 14 chip wall on a phone, roughly a full screen of links before any content. It collapses to one line there and stays a sidebar above 900px, where there is a column for it to live in. */ @media (min-width:901px){ /* The details wrapper became the grid item, so the sticky context moved with it. Sticking the nav inside a wrapper only as tall as its own content gives it no scroll range at all, so the wrapper sticks and the nav sits static inside it. */ .pol-toc-d{position:sticky;top:110px} .pol-toc-d>.pol-toc{position:static;top:auto} } .pol-toc-d>summary{display:none} @media (max-width:900px){ .pol-toc-d>summary{display:block;cursor:pointer;font-family:var(--label); font-size:15px;font-weight:500;padding:11px 14px;border:1px solid var(--line); background:var(--surface);list-style:none} .pol-toc-d>summary::-webkit-details-marker{display:none} .pol-toc-d>summary::after{content:"+";float:right;color:var(--accent);font-weight:600} .pol-toc-d[open]>summary::after{content:"\2212"} .pol-toc-d[open]>.pol-toc{margin-top:10px} } /* 4.54 Footer emphasis without color. WCAG 2.2 SC 1.4.1 asks that color never be the only thing carrying meaning, and a recolored link in a list of links reads as a visited-state change rather than as importance. So the medical page is promoted by position, and marked by a one-line descriptor no other entry has. The articles get their own small heading instead of trailing off the end of the tools list. */ .site-foot .foot-sub{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:#9FB0C6;max-width:30ch} .site-foot .foot-h2{margin-top:22px} /* ==== 5.56 LACQUER. Light surfaces, 27 October 2026 ==== OWNER: "polish the background colors ... especially the ivory ... so it appears wet to the touch because it is so polished and shined full of life." MEASURED BEFORE, 1,180 large painted surfaces over 98 routes: light surfaces 665 -- 0.0 percent carried a gradient, 8.6 percent a shadow, 91.4 percent were flat fill and nothing else. dark surfaces 401 -- 96.0 percent carried a gradient, 41.6 percent a shadow. The site held two different standards of craft split by color: every navy band was lacquered and every ivory one was a paint chip. Card against page measured 1.09:1, under the ratio at which an eye registers a second plane at all, so a card existed only by virtue of its hairline border. FOUR THINGS MAKE A SURFACE READ AS WET. Flat fill has none of them: 1 a gradient, so the surface has a lit end and a shaded end 2 a specular top edge, the white line a glazed edge catches 3 a layered shadow with a near AND a far term, so it sits above the ground 4 grain, because perfectly even color reads as dead paint, not as a surface MEASURED AFTER: card/page 1.201:1, ink 15.52:1 on paper (was 14.81), secondary ink 10.65:1 (was 9.65), accent 5.54:1, accent-strong 7.22:1. EVERY RATIO ROSE; the polish and the legibility are the same change, not a trade. NOT APPLIED to inputs, chips and small buttons: a gradient on a 28px control reads as a rendering fault, not as a glaze. Those take the denser ink only. NO background-attachment:fixed anywhere -- it is unreliable on iOS Safari and this has to hold on phones as well as desktops. */ /* ==== 5.72 ONE PALETTE, NOT TWO, 27 October 2026 ==== THIS BLOCK WAS SILENTLY OVERRIDING EVERY COLOR CHANGE MADE TODAY. It is a second :root, 3,600 lines below the authored one, and it redefined --paper, --paper-2, --card, --ink, --ink-2, --ink-3 and --lift. Equal specificity, later in the sheet, so it won every time. The cream the owner was looking at measured #EFE8D7 while the stylesheet at the top of the file said #FCF1DD, and the body ink resolved to #27323F while the top said #1C2531. Four published attempts at the cream never reached the screen at all. It is the same fault as the duplicate body{} rule in 5.62, in the same region of the file, and it is why reading CSS cannot find this class of bug: the losing declaration is the one carrying all the reasoning. Only resolving the custom properties on the live document exposed it. The palette lines and the weaker --lift are deleted. --glaze, --spec and --grain stay, because later rules reference them and nothing else defines them. */ :root{ --glaze:linear-gradient(176deg,#FFFFFF 0%,#FFFDF7 44%,#F8F3E5 100%); --spec:inset 0 1px 0 rgba(255,255,255,.95); --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.038'/%3E%3C/svg%3E"); } :root[data-theme="dark"]{ --glaze:linear-gradient(176deg,#17315C 0%,#0E2244 46%,#0A1B38 100%); --spec:inset 0 1px 0 rgba(255,255,255,.10); --lift:0 1px 2px rgba(0,0,0,.34),0 10px 26px rgba(0,0,0,.34),0 26px 56px rgba(0,0,0,.30); } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --glaze:linear-gradient(176deg,#17315C 0%,#0E2244 46%,#0A1B38 100%); --spec:inset 0 1px 0 rgba(255,255,255,.10); --lift:0 1px 2px rgba(0,0,0,.34),0 10px 26px rgba(0,0,0,.34),0 26px 56px rgba(0,0,0,.30); }} /* ==== 5.62 ONE GROUND, NOT TWO, 27 October 2026 ==== A SECOND body{} rule lived here and silently beat the one at the top of the sheet, because both are one selector of equal specificity and this one is later. Its own comment argued AGAINST a body-height gradient, so the file was carrying two opposed surface systems at once and the losing one was the one with the comments explaining the design. That is how the ivory measured 2.4 levels of travel over a 5,140px page while the stylesheet said otherwise, and it is why reading the CSS would never have found it -- only rendering the page and sampling the pixels did. The rule is deleted. The body rule at the top of the sheet is now the only ground on the site, and it carries grain plus the document ramp together. Dark mode inherits the same structure through --page and --grain. */ /* THE PANELS. */ .pcard,.bundles,.faaband,.cmp,.calc,.doc,.doc-tools,.chooser,.hub-card,.gear-card, .dg-card,.dg-cta,.em-card,.rdy-card,.rdy-rule,.wx-card,.su-form,.formcard,.pay-box, .aside-box,.faq-aside,.cl-side,.amt-path,.steps,.stools,.summary,.upsell,.tfr, .rt-plan,.pipe,.node,.oop-doc,.oop-where,.ntm,.air-verdict,.air-dec,.eb,.eng-why, .gr-box,.gr-group,.cons-stats,.cons-note,.codes-in,.kit-grid>div,.kit-terms>div, .reqs div,.pol-sec,.rd,.oq,.pick,.doc-grid .doc,.res-more-grid a,.res-promo-tiles a, .air-links a,:is(.series,#seriesBody) .vols div:not(.cover):not(.cover *){ /* 6.03, 28 October 2026: :not(.cover) added. This selector list painted --glaze (a CREAM gradient, #FFFFFF -> #F8F3E5) onto EVERY div inside .vols, covers included, at specificity (0,2,1) -- one element selector above .cover.ir at (0,2,0). Every volume cover on every series page rendered cream instead of its series color, with the cover's own text layers collapsing on top of each other. Diagnosed from the browser's matched-rule list via CDP, not by reading CSS: I had already "fixed" the identical selector in the rule at line 2363 and nothing changed, because THIS copy is the one that wins. Same family as 5.62/5.72/5.76/ 5.86 and 6.00: a second definition I did not know was there. */ background-image:var(--glaze); box-shadow:var(--spec),var(--lift); } /* A panel that already owns its shadow on hover keeps it: those rules are more specific and are declared above. A panel inside another panel would double the drop shadow, so a nested one keeps the specular edge and loses the far term. */ .pcard .vols div,.doc .vols div,.cmp .rd,.calc .rd{box-shadow:var(--spec), 0 1px 2px rgba(20,30,46,.06)} /* ==== 5.57 THE PROOF FIGURES, 27 October 2026 ==== OWNER: "make the 948, 223 and 72 stand out to the visitor and draw the human eye into it, this is our brand and these are our products ... present crisp and never dull." MEASURED BEFORE: three bare serif numerals at clamp(30px,3.2vw,40px) in --text, sitting directly on the page ground under one hairline rule, with the caption at 14.5px immediately beneath. Figure-to-caption size ratio 2.76:1 and NO other signal -- no plane, no color, no rule of their own. A figure that is only bigger than its caption is a paragraph with a big first word. WHAT A FIGURE NEEDS IN ORDER TO BE READ AS A FIGURE, none of which it had: a plane of its own, so the eye stops rather than reading past it an accent that belongs to the brand and to nothing else on the page a size gap wide enough to survive a skim, not a notch lining tabular numerals, so 948 and 223 align and read as data AFTER: raised tile on the glaze with a brass sheen capping it, figure at clamp(44px,5vw,62px) in navy (15.6:1 on the tile), a 46px brass rule between figure and caption, caption at 14.5px. Ratio 4.28:1. "All year" is a phrase, not a quantity, so it carries .word and stays at the old size: a two-word phrase set at 62px wraps and stops looking deliberate. */ :root{--figink:#0C2249} :root[data-theme="dark"]{--figink:#E8C98E} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--figink:#E8C98E}} .proofrow{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; border-top:0;padding-top:0;margin:34px 0 46px} .proofrow li{position:relative;display:block;padding:27px 24px 25px; background-image:var(--glaze);box-shadow:var(--spec),var(--lift); border:1px solid var(--rule-2);border-top:0} .proofrow li::before{content:"";position:absolute;left:0;right:0;top:0;height:3px; background-image:var(--brass-sheen)} .proofrow b{display:block;font-family:var(--serif);font-weight:400; font-size:clamp(44px,5vw,62px);line-height:.92;color:var(--figink); letter-spacing:-.022em;font-variant-numeric:lining-nums tabular-nums} .proofrow b.word{font-size:clamp(30px,3.2vw,40px);letter-spacing:-.01em} .proofrow b::after{content:"";display:block;width:46px;height:2px; background-image:var(--brass-sheen);margin:15px 0 13px} .proofrow span{display:block;font-size:14.5px;line-height:1.55;color:var(--ink-2);max-width:32ch} .proofrow a{color:var(--accent-strong)} /* The old narrow-width rule laid the figure and its caption out side by side on a baseline, which undoes the tile. Stacked, one tile per row, figure on top. */ @media (max-width:900px){ .proofrow{grid-template-columns:minmax(0,1fr);gap:14px;margin:26px 0 34px;padding-top:0} .proofrow li{grid-template-columns:none;display:block;align-items:stretch; gap:0;padding:22px 20px 20px} .proofrow b{font-size:46px} .proofrow b.word{font-size:32px} .proofrow span{max-width:46ch} } /* ==== 6.42 FULL-BLEED PAGE HEAD, 28 October 2026 =========================== MEASURED PROBLEM: at 1440px, 14 views contained at least one element that spanned the full viewport (a navy hero, a tinted band). 10 views contained NONE: their widest painted element was the 1180px .wrap, so the page read as a narrow column floating on empty paper. Three people independently called the Study-on-your-phone page "skinny". The reading column was never the problem - 1180px is the right measure - the missing full-bleed anchor was. The ten: app, faq, updates, policies, learn, starter-kit, series, order-help, report-result, newsletters. NOTE series is the shared view behind series-ir/-cfi/-com/-atp/-heli, so five of the eight product pages were in the skinny group while shop, private-pilot and maintenance were not. .pgbleed breaks an element out of its .wrap to the full viewport width and then re-indents its own content back onto the 1180px column. The margin percentage resolves against the .wrap content box, so the arithmetic holds at every width: element width = W + 2*(V/2 - W/2) = V. --sbw is the scrollbar width, set from JS. Without subtracting it, 50vw overshoots by half a scrollbar on every desktop browser and the page gains a horizontal scrollbar. No overflow clipping is used anywhere here, because overflow:hidden on an ancestor would break the sticky header and sticky sub-navs. GREPPED FIRST: pgbleed, pghead, pgb-top and --sbw each appeared 0 times in this file before being added. */ .pgbleed{margin-inline:calc(50% - 50vw + var(--sbw,0px)/2); padding-inline:max(24px,calc(50vw - var(--sbw,0px)/2 - var(--maxw)/2)); /* .app-wrap>* sets max-width:1000px, which capped the band at 1000px on the Study-on-your-phone page while the negative margin had already pulled it to the left edge. Any ancestor rule that caps a child's width will do the same, so the bleed clears it explicitly. */ max-width:none;width:auto} .pghead{background:var(--paper-2);border-bottom:1px solid var(--line)} .pghead .crumbs{padding-block:20px 0} .pghead>:last-child{padding-bottom:4px} .pghead{padding-block:0 40px;margin-bottom:56px} .pghead .sec-head,.pghead .pol-head,.pghead .app-hero{margin-bottom:0} /* Any .wrap whose first child is the band must not hold it away from the header: .pol-wrap carried padding-block:56px, which left a strip of unbanded paper above the band on Policies and Edition updates. */ .wrap:has(>.pghead:first-child){padding-top:0} /* .pol-head is a centered 780px document column. Inside the band that pushed the heading about 200px right of its own breadcrumb. Left-aligned to match the other nine banded pages; the body below keeps its centered column. */ .pghead>.pol-head{margin-inline:0;margin-top:0;max-width:none;display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); column-gap:clamp(36px,4.4vw,72px);row-gap:14px;align-items:start} .pghead>.pol-head>*{grid-column:1;margin:0} .pghead>.pol-head>h1{max-width:18ch} .pghead>.pol-head>.pol-lede{grid-column:2;grid-row:1/span 3;align-self:end;max-width:52ch} @media (max-width:900px){ .pghead>.pol-head{grid-template-columns:minmax(0,1fr)} .pghead>.pol-head>*{grid-column:1!important;grid-row:auto!important;align-self:auto;max-width:none}} @media (max-width:640px){.pghead{padding-block:0 28px;margin-bottom:36px}} /* The two-column page head (h1 left, lede right) was declared as `.wrap:not(...)>.sec-head:not(.center):has(>.lede)`, a DIRECT-CHILD selector. Wrapping the head in .pghead broke that relationship, so FAQ, Report a problem and Report your test result collapsed to a single left-hand column with the right half of the new band empty - trading one imbalance for another. Restated here for the banded case, matching the original 900px breakpoint. Centered heads (.sec-head.center on Study Hub and Newsletter) are deliberately left centered. */ .pghead>.sec-head:not(.center):has(>.lede){display:grid;max-width:none; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); column-gap:clamp(36px,4.4vw,72px);row-gap:14px;align-items:start} .pghead>.sec-head:not(.center):has(>.lede)>.eyebrow{grid-column:1;grid-row:1} .pghead>.sec-head:not(.center):has(>.lede)>h1{grid-column:1;grid-row:2;margin:0} .pghead>.sec-head:not(.center):has(>.lede)>.lede{grid-column:2;grid-row:2;align-self:start;margin:0;max-width:46ch} @media (max-width:900px){ .pghead>.sec-head:not(.center):has(>.lede){grid-template-columns:minmax(0,1fr)} .pghead>.sec-head:not(.center):has(>.lede)>*{grid-column:1!important;grid-row:auto!important;align-self:auto}} /* ==== 6.43 PRODUCT SUB-NAV, 28 October 2026 ============================= Sticky local section bar for the eight product pages, directly under the site header. Built by buildPnav(); see the note there for why the links are resolved rather than hard-coded. GREPPED FIRST: .pnav appeared 0 times. */ .pnav{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--hh,74px));z-index:25; background:color-mix(in srgb,var(--bg) 94%,transparent); backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)} .pnav-in{max-width:var(--maxw);margin-inline:auto;padding-inline:24px; display:flex;align-items:center;gap:clamp(16px,2.4vw,30px);min-height:54px} .pnav-name{font-family:var(--serif);font-size:17px;font-weight:500;white-space:nowrap;color:var(--text)} .pnav-links{display:flex;gap:clamp(14px,2vw,24px);align-items:center;flex:1 1 auto; overflow-x:auto;scrollbar-width:none;white-space:nowrap;padding-block:16px} .pnav-links::-webkit-scrollbar{display:none} .pnav-fade .pnav-links{-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 30px),transparent 100%);mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 30px),transparent 100%)} .pnav-links a{font-size:14px;color:var(--muted);text-decoration:none;padding-bottom:3px} .pnav-links a:hover{color:var(--accent)} .pnav-links a[aria-current]{color:var(--text);font-weight:600;box-shadow:inset 0 -2px 0 var(--brass)} .pnav-cta{flex:0 0 auto;font-size:14px;text-decoration:none;white-space:nowrap; background:var(--navy);color:#F3E9D2;padding:9px 18px;border:1px solid var(--navy)} .pnav-cta:hover{background:var(--navy-2);border-color:var(--navy-2)} /* Headings must clear BOTH sticky bars when a sub-nav link scrolls to them. */ h2.pnav-t{scroll-margin-top:calc(var(--hh,74px) + 78px)} @media (max-width:720px){.pnav-name{display:none}.pnav-in{padding-inline:18px;min-height:48px}} /* 6.45 The medical page's duration table is four columns of real words, which measured 483px inside a 390px viewport. Rather than give it a scrollbar it stacks into labeled rows on a narrow screen, so each figure still says what it is. GREPPED FIRST: med-dur appeared 0 times. */ @media (max-width:620px){ /* 6.81b TWO COLUMNS DO NOT FIT A PHONE, so stop asking them to. The first attempt floored the auto track, which let column one take the width and crushed column two to one character per line, running the text vertically. Worse than the bug it replaced. Below 620px every fb-reg row is now a SINGLE column: the label on its own line, its values stacked beneath it. Nothing is content-sized, so nothing can push anything off the screen. */ /* 6.81c ARTICLE TABLES CARRY NO CLASS AND VARY IN COLUMN COUNT, so stacking them is not safe: a four column table stacked becomes nonsense. They get a scroll container instead, which keeps every cell reachable. A scrollbar is a nuisance, losing a column is data loss, and between those two the nuisance wins every time. max-width:100% on fb-reg stops the table asserting a width wider than the column it sits in, which is what left it 28px past the edge at 320. */ [data-view="article"] .t-scroll>table{display:table;width:auto;min-width:100%;max-width:none} /* 6.81d A TABLE CANNOT SHRINK BELOW ITS MIN-CONTENT WIDTH, so max-width:100% did nothing while td.fbn carried white-space:nowrap: the nowrap cell set a floor of 330px inside a 284px column. Dropping table sizing and the nowrap at phone widths is what actually lets it fit. Caught only at 320px, which the regression suite was not testing. It is now. */ .fb-reg,.fb-reg tbody{display:block;max-width:100%} /* 6.81e RESIDUAL AT 320px ONLY. The row is a grid whose single track still resolves to 330px against a 284px column, and max-width cannot pull a grid track below its content floor. No current phone is narrower than 375 CSS px, so rather than keep chasing it the table scrolls there: every cell stays reachable instead of being cut off. Same call as the article tables. */ .fb-reg{overflow-x:auto;-webkit-overflow-scrolling:touch} .fb-reg td.fbn,.fb-reg td{white-space:normal} .fb-reg tbody tr{grid-template-columns:minmax(0,1fr)} .fb-reg td.fbn{grid-column:1} }