@font-face{font-family:Newsreader;src:url(/a/font/Newsreader-300-normal.woff2)format("woff2");font-weight:300;font-display:swap} @font-face{font-family:Newsreader;src:url(/a/font/Newsreader-400-normal.woff2)format("woff2");font-weight:400;font-display:swap} @font-face{font-family:Newsreader;src:url(/a/font/Newsreader-500-normal.woff2)format("woff2");font-weight:500;font-display:swap} @font-face{font-family:"Inter Tight";src:url(/a/font/InterTight-300-normal.woff2)format("woff2");font-weight:300;font-display:swap} @font-face{font-family:"Inter Tight";src:url(/a/font/InterTight-400-normal.woff2)format("woff2");font-weight:400;font-display:swap} @font-face{font-family:"Inter Tight";src:url(/a/font/InterTight-500-normal.woff2)format("woff2");font-weight:500;font-display:swap} /* round4c B2: the palette is the APPROVED one (9/11 DESIGN-DECISIONS section 2), not the one that had drifted into the shipped CSS. --muted was #7a7571 and soft is #6B6866; --hair was #CCCCCC and hairline is #E5E0DC. Both are returns to the approval, which is what this ticket is for; both are recorded in the round4c evidence. --muted-sm was a third grey nobody ruled - it now resolves to soft as well, so there is one muted grey. */ :root{--paper:#FBFAF8;--ink:#383636;--muted:#6B6866;--hair:#E5E0DC;--green:#65E782;--muted-sm:#6B6866;--pad:clamp(24px,3vw,40px)} *{box-sizing:border-box} html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden} body{background:var(--paper);color:var(--ink);font-family:"Inter Tight",system-ui,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased} img,video{display:block;max-width:100%} a{color:inherit} :focus-visible{outline:3px solid var(--green);outline-offset:2px} .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:99} .skip:focus{left:8px;top:8px} .hdr{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--hair)} .hdrin{height:80px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--pad)} .brand{display:flex;align-items:center;min-height:44px} .brand img{height:40px;width:auto} .pnav ul{list-style:none;display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);margin:0;padding:0} /* round4c B2 (R-M, 9/11 DESIGN-DECISIONS section 4): the nav is MIXED CASE. site.json has always carried "Work / About / News / Contact"; this rule was uppercasing them in CSS, so the page said WORK while the approval said Work. text-transform:uppercase removed, and the letter-spacing that went with the caps comes back to normal. The current item carries a GREEN UNDERSCORE - the one accent, a rule and not a fill. It is on aria-current, which the one shell already sets per page class, so it cannot be right on /work and missing on /about. */ .pnav a{display:flex;align-items:center;min-height:44px;padding:0 2px;text-decoration:none;font-size:16px;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--ink);border-bottom:2px solid transparent} .pnav a:hover{color:var(--muted)} .pnav a[aria-current]{border-bottom-color:var(--green)} /* round4c B4b: `.vh` (visually hidden) was defined in work.css and mood.css and NOT here, so on Home - which loads home.css, intro.css and hdr.css and no work.css - every element marked visually-hidden rendered as ORDINARY VISIBLE TEXT. Shipped that way on round4b:

Clients and News

was on the page as visible copy, and the wall caret's own label made it five more. Found by LOOKING at the 390 frame, not by a gate - no gate asserts that a hidden thing is hidden. Same declaration as the other two stylesheets, character for character, so the three cannot drift. */ .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .wall{margin:0} .tile{position:relative;margin:0;border-bottom:1px solid var(--hair)} .stage{position:relative;width:100%;aspect-ratio:16/9;background:#0d0d0d;overflow:hidden} .stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* assets-260914 step 0: a loop delivered letterboxed (black bars baked into the frame) is scaled up so the picture fills the tile; .stage already clips (overflow:hidden). Bars are symmetric, so centre origin needs no object-position. Per-piece factor comes from build.mjs LETTERBOX, measured with cropdetect. .full is excluded on purpose -- full view keeps the whole frame, bars and all. */ .stage .loop.lb{transform:scale(var(--lb,1))} .stage .full{display:none;object-fit:contain;background:#000;z-index:3} .tile.open .full{display:block} .tile.open .loop{visibility:hidden} .hit{position:absolute;inset:0;z-index:4;width:100%;height:100%;border:0;padding:0;background:transparent;cursor:pointer;color:transparent;font-size:0} .tile.open .hit{display:none} .mark{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);width:74px;height:74px;border-radius:50%;background:rgba(251,250,248,.9);opacity:0;transition:opacity .22s,transform .22s;pointer-events:none} .mark:after{content:"";position:absolute;left:29px;top:24px;border-left:22px solid var(--ink);border-top:13px solid transparent;border-bottom:13px solid transparent} .tile:hover .mark,.hit:focus-visible+.mark{opacity:1;transform:translate(-50%,-50%) scale(1)} .tile.open .mark{opacity:0} .xclose{position:absolute;z-index:6;top:14px;right:14px;width:44px;height:44px;display:none;align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(251,250,248,.92);color:var(--ink);font:400 20px/1 "Inter Tight",sans-serif;cursor:pointer} .tile.open .xclose{display:flex} /* captions-260913 -- the CC control. 44px like the close, sits next to it (14 + 44 + 8), DOM order matches the visual left-to-right order so tabbing is not a surprise. */ .stage .cc{position:absolute;z-index:6;top:14px;right:66px;width:44px;height:44px;display:none;align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(251,250,248,.92);color:var(--ink);font:600 13px/1 "Inter Tight",sans-serif;letter-spacing:.03em;cursor:pointer} .tile.open .stage .cc{display:flex} /* thom-rulings-260913 (Thom, 01:00Z): the only CC control was the overlay one on the stage, and .stage .cc is display:none until .tile.open -- so the expander bar he opened on the TriHealth tile showed Agency / News / See the work and no CC at all. This one lives in the bar row itself, is always visible when the bar is open, and shares .cc so one click handler and one aria-pressed state drive both. */ .ccbar,.jcc{margin-left:auto;flex:0 0 auto;min-width:44px;height:32px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:0;font:600 12px/1 "Inter Tight",sans-serif;letter-spacing:.08em;color:var(--ink);background:transparent;border:1px solid var(--ink);border-radius:2px;cursor:pointer} .ccbar[aria-pressed="true"],.jcc[aria-pressed="true"]{background:var(--ink);color:var(--paper)} .ccbar:focus-visible,.jcc:focus-visible{outline:3px solid var(--ink);outline-offset:2px} .cc[aria-pressed="true"]{background:var(--ink);color:var(--paper)} /* Caption rendering. Inter Tight 20/24 at desktop, #fff on the ink grey at .85. */ video.full::cue{font-family:"Inter Tight",sans-serif;font-size:20px;line-height:24px;color:#fff;background:rgba(56,54,54,.85)} /* polish-260913 Step 1 (Thom): the white bar between tiles gets TIGHTER, not removed. Caption block vertical padding 18/15 -> 13/10 (-28% / -33%, ~30% either side). */ /* round4c B4 (R-C, R-D). The caption is TWO LINES and that is all of it: client over title. No third line, no "Open the job" arrow, no hairline, no green line, no year - the word "job" is retired from the UI (R-A), so that line is gone rather than reworded. The WHOLE TILE is the link (.wgo wraps stage + caption), so .cap claims no pointer of its own and carries no interactive children. R-D: each line is ONE line. nowrap + ellipsis, and `display:block` rather than the old baseline flex row - the flex row with flex-wrap:wrap is exactly how the client name came to wrap to a second line on round4b while the title truncated beside it. Client and title now carry the same class and the same rule, so they cannot behave differently. */ .cap{display:block;background:var(--paper);padding:13px var(--pad) 10px;cursor:inherit} .capl{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .client{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:22px;line-height:1.2;color:var(--ink)} .ttl{font-family:Newsreader,Georgia,serif;font-weight:300;font-size:22px;line-height:1.2;color:var(--muted)} /* The tile link. One target, one focus ring, and the green OUTLINE is the one accent on the tile - never a fill and never a text colour (9/11 section 2). */ .wgo{display:block;text-decoration:none;color:inherit;outline:0} .wtile .wgo:hover,.wtile .wgo:focus-visible{outline:2px solid var(--green);outline-offset:2px} /* ---- round4c B4b / R-E + R-B: the WF-4 v3.2 wall bar ---- GONE with the rulings, not by preference: .count and .cbar (the "01 / 05" counter, R-B), .seeall ("See all work" is not on the drawing; /work is one click away in the nav and the Featured heading below is itself a link to /work), and the whole .capgo row, which was the wall's three-control line. The R-C tile caption (.cap/.capl/.client/.ttl above) is untouched - it is what every TILE on the site uses, including Home Featured. Grid is the drawing's: one line of text that shrinks, the caret in its own column, and line 2 spanning both columns and revealed only when open. */ .wbar{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 16px;padding:14px var(--pad) 12px;background:var(--paper);border-bottom:1px solid var(--hair);cursor:pointer} .wbar>.wbl{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* R-E: 1px green line under the CLIENT NAME ONLY, nowhere else on the bar, and a hair thinner than v2. The one accent per screen: a rule, never a fill. */ .wbar .cl{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:22px;line-height:1.2;color:var(--ink);border-bottom:1px solid var(--green);padding-bottom:2px} .wbar .ti{font-family:Newsreader,Georgia,serif;font-weight:300;font-size:22px;line-height:1.2;color:var(--muted);margin-left:10px} /* The + is 24px per the drawing but the touch target is not: a 24px control on a phone is under every tap-target rule we hold ourselves to, so the ring is 24px and the hit area is extended to 44px by a pseudo-element. round4c-260917 F13 (R-E): this rule used to read `box-sizing:content-box;padding:10px`, which drew the BORDER -- the ring the reader actually sees as "the circle" -- at 24+20+2 = 46px at EVERY width. `background-clip:content-box` kept the paper FILL at 24px, which is why a 46px ring was mistaken for the ruled 24px small control. The padding is now zero and the 44px pointer target is carried by `::after{inset:-10px}` instead, so the ring is 24px and the phone still gets a 44px tap. Measured 24x24 ring / 44x44 target at both 390 and 1440. */ .wbar .caret{width:24px;height:24px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0;margin:0;position:relative;border:1px solid var(--hair);border-radius:99px;background:var(--paper);color:var(--muted);font:300 16px/1 "Inter Tight",sans-serif;cursor:pointer} .wbar .caret::after{content:"";position:absolute;inset:-10px;border-radius:99px} .wbar .caret:hover{color:var(--ink);border-color:var(--ink)} .wbar .caret:focus-visible{outline:3px solid var(--ink);outline-offset:2px} .wbar[data-open="1"] .caret{color:var(--ink);border-color:var(--ink)} /* Line 2. In the DOM always; shown by the caret. Every away-link ends in an arrow at the same weight and size; CC is pushed to the FAR RIGHT under the minus (R-E: a setting, not a destination) by margin-left:auto. */ /* Shown by default and hidden only under `.js`, the same way .wopts is: with no JS the attribute the open state keys off is never set, so a no-JS reader was getting the bar with NO second line - no "Inside the campaign", no news link, no CC. The old wall put that row on the page unconditionally, so hiding it by default was a silent regression for exactly the readers who can least afford one. */ .wbar .cta{grid-column:1/3;display:flex;align-items:center;gap:28px;min-height:44px;font:400 13px/1.4 "Inter Tight",sans-serif} .js .wbar .cta{display:none} .js .wbar[data-open="1"] .cta{display:flex} .wbar .cta>a,.wbar .cta>button{flex:0 0 auto} .wbar .cta .wlink{font-size:14px;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px} .wbar .cta .wlink:hover{color:var(--green)} .wbar .cta a.news{flex:0 1 auto;min-width:0;display:block;line-height:44px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--hair)} .wbar .cta a.news:hover{border-color:var(--green);color:var(--ink)} /* D6: `.wbar .cta .ccb` removed with the control it positioned - there is no CC in the white bar any more, only the overlay on the frame. */ /* The expanded row: the Home Featured two-across pattern at FULL browser width - same tile size, same hairline grid (WF-4 v3.2). 2x2 at 1440 AND at 390, never 4- or 5-wide, never a fixed-width block. Hidden only when JS is present (html.js, set by home.js): without JS every wall piece stays visible and every option is a real link to its job. */ /* minmax(0,1fr), NOT 1fr: `1fr` is minmax(auto,1fr), so a tile whose one-line nowrap title has a min-content width above its share forces its own column wider and steals from the other. Measured at 390 before the fix: columns came out 205px and 184px - two different tile sizes in a pattern whose whole point is "same tile size as Featured" (WF-4 v3.2). minmax(0) lets the column ignore min-content so the ellipsis does its job (R-D). */ /* round4d-260918 / D3 (R-E v2): the #wopts option grid is deleted, not hidden - the wall is every flagged video stacked, so there is no second rendering of the other loops to style. .wbar[data-open] still drives line 2, one bar at a time, which is D3's "+ opens only its own bar". */ .strip{padding:clamp(56px,8vw,110px) var(--pad) clamp(44px,6vw,80px);max-width:1180px} /* polish-260913 Step 2 (Thom): "three lines that start C C C". The copy is locked, so the fix is layout. Under 1024 the paragraph is pushed off the H1 by a 1.5-line-height gap with a hairline rule sitting in it, so the initials stop reading as a column. */ .strip h1{font-family:Newsreader,Georgia,serif;font-weight:300;font-size:44px;line-height:1.14;letter-spacing:-.01em;margin:0;max-width:17ch} /* round4c B2: 18px, not 19px - WF-3 v2 `.lede{font-size:18px}`. */ .lede{font-size:18px;line-height:1.62;color:var(--ink);max-width:62ch;margin:1.215em 0 0;padding-top:1.215em;border-top:1px solid var(--hair)} /* H4 / C1, one accent per screen. Home was painting SEVEN green lines: the wall bar client * (the one R-E rules), the Featured heading link, "See all work", and four inline links in this * lede. Body-copy links keep a visible underline -- the affordance does not depend on colour, * so this also holds up without it -- and take the accent on hover/focus. N5 names the same * thing on the news post (green link underlines among several accents); that file is B6. */ .lede a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair)} .lede a:hover,.lede a:focus-visible{border-color:var(--green)} .lede a:hover{background:rgba(101,231,130,.16)} .chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 0;padding:0} /* polish-260913 Step 2: at >=1024 the strip is two columns -- H1 left, paragraph right, top-aligned -- so the two blocks sit side by side instead of stacking. The chip row spans both columns underneath. No drop caps, no italics, no new words. */ @media(min-width:1024px){ .strip{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(34px,5vw,74px);align-items:start} /* round4c B2: the 52px override is gone. The approval is 44px at 1440 (WF-3 v2 `h1{font:300 44px/1.1 Newsreader}`, 9/11 s3) and the base rule above already says 44px; this block only needs to place the H1 in the left column. */ .strip h1{grid-column:1;grid-row:1} .lede{grid-column:2;grid-row:1;margin:0;padding-top:0;border-top:0} .chips{grid-column:1/-1;margin-top:clamp(30px,4vw,46px)} /* round4e D27: the explore strip, the filter bar and the active-filter recap are direct grid children of .strip, so without this they auto-placed into the 1fr columns - .wexp took col 1 (434px at 1440) and the opened bar took col 2 (514px). That is why the home search field was a 252px box on a fourth wrapped row while the same component on /work is one row across the full column with the field flush to the right hairline. Spanning all three restores /work's geometry. NOTE: `.strip .chipgrps{grid-column:1/-1}` further down is inert - .chipgrps is a child of .wfilters, never a grid item of .strip - and was the earlier attempt at exactly this fix. */ .strip>.wexp,.strip>.wfilters,.strip>.wrecap{grid-column:1/-1} /* round4e D27, second half: home's column is capped at 1180 (.strip max-width) where /work runs the full 1360, so chips + "+ n" + Filters already fill the row and the field wraps below them. A 252px box alone on a 1020px row is the "not hairline to hairline" defect; the field takes the row it is on, which is the same rule work.css already applies to every page at 390. .strip is home-only markup, so this cannot reach /work. */ .strip .wexp .wsearch{flex:1 1 100%;width:100%} /* Both declarations are needed, and work.css's own 390 block is the precedent: .wsearch is the flex wrapper (it carries the clear button), .wq is the bordered input the reader actually sees, and it has min-width:180px with no width, so widening only the wrapper left a 252px box centred in a 1020px row. Measured, not assumed: wrapper 1020 / input 252 before this line. */ .strip .wexp .wq{width:100%} } /* round4c B2: 11px, not 13px. This is the same chip component as work.css `.chip`, and because `.chips a` (class+type) outranks `.chip` (class), THIS rule is what /work actually rendered - /work loads home.css and work.css both, so setting .chip to 11px alone changed nothing on the page. Same approval: WF-3 v2 chip = 11px caps. */ .chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--hair);border-radius:999px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--ink)} .chips a:hover{border-color:var(--green);background:rgba(101,231,130,.1)} .proof{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:26px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:20px 34px;flex-wrap:wrap} .clients{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-sm);margin:0;max-width:64ch;line-height:2} .proofr{display:flex;align-items:center;gap:26px;flex-wrap:wrap} .proofr a{font-size:13px;letter-spacing:.06em;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair);display:inline-flex;align-items:center;min-height:44px} .proofr a:hover,.proofr a:focus-visible{border-color:var(--green)} .wbenc{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-sm)} /* round4e-260918 D24 (Thom 9/18 7:30 AM ET): the .ph unruled-copy marker and the .phnote * block are removed site-wide. Copy either has a ruled sheet cell or the page does not ship * the string, so there is nothing left for a marker to mark. round4c B6 U1's rule (which had * already repainted .ph from green to ink) goes with it. */ /* Step 4 -- ?snap=1 only; home.js adds body.snap, no other JS. */ body.snap .wall{scroll-snap-type:y proximity} body.snap .tile{scroll-snap-align:start} .ftr{background:var(--ink);color:#F3EBE7;border-top:4px solid var(--green);padding:clamp(46px,6vw,78px) var(--pad) 34px} /* D21 (Thom 9/17 10:55 PM): the two marks render at EQUAL height -- and height means the TIGHT BOUNDING BOX of the ink, not the img element. Matching the boxes (72/74) is what made the WBENC mark read smaller: wbenc-white.png is 310x161 with its ink only in rows 8..143, so 25 of its 161 rows are transparent, while gb-stacked-white-green.png is ink edge to edge (tight box == 433/433). At 74/72 the ink measured 74px vs 61px -- exactly the 148 vs 122 Thom measured at DPR 2, i.e. the wordmark was +21%. So ONE value drives the footer marks: --fmk is the ink height both marks render at. The seal's element grows by 161/136 to put 136 ink rows on that height, and it shifts down by 17/136 (= --fmk/8) of it, because flex-end aligns element bottoms and the seal carries 17 transparent rows under its ink -- without the shift the ink would float 9px high. transform, not margin, so the line box does not grow and nothing else moves. Logo left, seal right. White seal on charcoal. The gap clause of D21 is NOT implemented: "grows ~1.5x the current gap" (36 -> ~54) and "equals the footer's column gutter" (.cols column-gap = 30, i.e. SMALLER than 36) cannot both hold, and the gate asserts neither. Filed as R-Q, status proposed; gap untouched. */ .ftrtop{display:flex;align-items:flex-end;gap:24px 36px;flex-wrap:wrap;margin-bottom:44px;--fmk:74px} .ftrtop .lg{height:var(--fmk);width:auto} .ftrtop .seal{height:calc(var(--fmk) * 161 / 136);width:auto;transform:translateY(calc(var(--fmk) / 8))} /* polish-260913 Step 5: four columns again -- Work . Capabilities . Company . Find us. */ .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 30px} .cols h2{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#a9a3a0;margin:0 0 14px} .cols ul{list-style:none;margin:0;padding:0} .cols li{margin:0 0 2px} .cols a{font-size:15px;color:#F3EBE7;text-decoration:none;display:inline-flex;align-items:center;min-height:36px} .cols a:hover{color:var(--green)} .nap{font-size:15px;line-height:1.9;color:#F3EBE7;font-style:normal;margin:0} .nap a{color:#F3EBE7;text-decoration:none;display:inline-flex;align-items:center;min-height:36px} .nap a:hover{color:var(--green)} .ftrbot{margin-top:46px;padding-top:20px;border-top:1px solid #504c4a;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#a9a3a0} .ftrbot a{color:#a9a3a0;text-decoration:none;display:inline-flex;align-items:center;min-height:36px} .ftrbot a:hover{color:var(--green)} .ftrbot .lks{display:flex;gap:18px} @media(max-width:1023px){.cols{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:767px){ /* captions-260913 -- 16px on the phone, which is how this site is actually read. */ video.full::cue{font-size:16px;line-height:20px} .hdrin{height:64px;padding:0 var(--pad);gap:10px} .brand img{height:34px} .pnav ul{gap:clamp(8px,3.2vw,16px)} .pnav a{font-size:14px;letter-spacing:normal} .stage{aspect-ratio:4/5} .cap{padding:11px var(--pad) 5px} .client,.ttl{font-size:22px} .strip{padding:44px var(--pad) 36px} /* round4c B2: 30px, not 28px - WF-3 v2 `.m390 h1{font-size:30px}`. Lede 16px, not 17px - WF-3 v2 `.m390 .lede{font-size:16px}`. */ .strip h1{font-size:30px;margin-bottom:20px} .lede{font-size:16px} .proof{padding:22px var(--pad)} .clients{line-height:1.9} .ftr{padding:40px var(--pad) 28px} .cols{gap:26px 22px} .ftrtop{--fmk:58px} /* D21: one value; the seal derives from it */ } @media(max-width:480px){ .cap{padding:9px var(--pad) 5px} .wbar{padding:12px var(--pad);gap:8px 12px} .wbar .cl,.wbar .ti{font-size:18px} .wbar .ti{margin-left:8px} .wbar .cta{font-size:12px;gap:14px} /* polish-260913 Step 5 (Thom): "the footer was fine before; the challenge was making it make sense on xsmall." Same four blocks, nothing removed -- two columns instead of a stack (Work + Capabilities | Company + Find us), one step smaller, tighter rhythm. */ .ftr{padding:28px var(--pad) 14px} .ftrtop{gap:16px 26px;margin-bottom:20px;--fmk:42px} /* D21: one value */ .cols{gap:14px 18px} .cols>:nth-child(1){grid-column:1;grid-row:1} .cols>:nth-child(2){grid-column:1;grid-row:2} .cols>:nth-child(3){grid-column:2;grid-row:1} .cols>:nth-child(4){grid-column:2;grid-row:2} .cols h2{font-size:11px;margin-bottom:6px} .cols a{font-size:14px;min-height:30px} .cols li{margin:0} .nap{font-size:14px;line-height:1.6} .nap a{min-height:30px} .ftrbot{margin-top:14px;padding-top:10px;font-size:12px} .ftrbot a{min-height:28px} .ftrbot .lks{gap:14px} } @media(prefers-reduced-motion:reduce){ .mark{transition:none} } /* ---- home-bottom-260914 (Thom 9/14 9:55 PM ET) ------------------------------------- Home is wall -> Featured(2) -> strip -> footer and stops. These rules cover the two new bands and the three labelled chip groups; the wall, the header and the footer are untouched. Nothing here changes a colour or a typeface: the Featured tile reuses the wall's own .stage/.loop/.mark, and the chip pill is the existing .chips a. */ .feat{padding:clamp(40px,5vw,72px) var(--pad) 0} /* round4c B3: Home's section heading is the same component as /work's, and both approved drawings draw it as a serif heading, not an eyebrow: WF-3 v2 and WF-4 v3.2 both carry `.sec{font:300 30px/1.1 Newsreader,serif}` with 26px on their 390 boards. This was 13px Inter Tight caps - the one visible change on Home above the wall, and it is the drawing, not a preference. */ .feath{font-family:Newsreader,Georgia,serif;font-weight:300;font-size:30px;line-height:1.1;letter-spacing:normal;text-transform:none;color:var(--ink);margin:0 0 18px} /* round4c B5 R-F -- "the green line lives only on the Home wall bar client (R-E). One accent * per screen stands." WF-4 v3.2 agrees: its ONLY border-bottom:1px solid var(--acc) is `.cl`, * the wall bar client. This heading link and .fall below it were both painting a green rest * underline, so Home was showing three green lines at once. Hairline at rest, green on hover * and focus -- the site's own link treatment (cf .pfilmlink), so nothing is lost but the * duplicated accent. Ruling-backed by R-F, not a preference. */ .feath a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:2px} .feath a:hover,.feath a:focus-visible{color:var(--ink);border-color:var(--green)} /* round3b-260916 B2: Home Featured is the /work Featured pair -- same component, same size, two across from 900px, never full-width. The tiles are now the real `.tile.wtile` markup (build.mjs wcard), so these rules are the work.css tile rules that Home needs and did not have: /work loads work.css, Home does not, and a shared component cannot depend on a stylesheet only one of its two pages loads. Everything else the tile needs -- .cap, .cap1, .capl and .capgo -- is the wall's own caption, already in this file, which is the point of B1. */ .fgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:0} .fgrid .wtile{margin:0;border-bottom:1px solid var(--hair)} .fgrid .wgo{display:block;text-decoration:none;color:inherit} .fgrid .wgo .stage{display:block;position:relative;width:100%;aspect-ratio:16/9;background:#0d0d0d;overflow:hidden} .fgrid .wgo .stage img,.fgrid .wgo .stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .fgrid .wgo .stage .loop.lb{transform:scale(var(--lb,1))} .fgrid .wtile:hover .mark{opacity:1;transform:translate(-50%,-50%) scale(1)} .fgrid .cap{cursor:default} @media(min-width:900px){ /* minmax(0,1fr) for the same reason as .wopts above: a one-line nowrap caption must not be able to widen its own column and make the pair two different sizes. */ .fgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 1px;background:var(--hair)} .fgrid .wtile{background:var(--paper)} } .fall{margin:18px 0 0;font-size:14px} .fall a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:2px} .fall a:hover,.fall a:focus-visible{border-color:var(--green)} /* Three labelled groups, not one lump (Thom): the group name is visible text, so a reader knows Retail and Photo are different questions before clicking either. */ .chipgrps{display:grid;gap:clamp(18px,2.2vw,26px);margin:30px 0 0} .cgh{font-family:"Inter Tight",system-ui,sans-serif;font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-sm);margin:0 0 10px} .cgrp .chips{margin:0} @media(min-width:1024px){.strip .chipgrps{grid-column:1/-1}} /* The strip's CTA: three real News thumbnails, not a text link. */ .proof{display:block} .proof .clients{max-width:none;margin:0 0 22px} .proof .clients a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hair)} .proof .clients a:hover{color:var(--ink);border-bottom-color:var(--green)} .ncards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)} .ncard{display:block;text-decoration:none;color:var(--ink)} /* uat-fixes-260915 item 4: these heroes carry width/height ATTRIBUTES (1920x806, 1602x933, 2500x1667). The attribute maps to the CSS `height` property as a presentational hint, and aspect-ratio only resolves the box when height is auto -- so the used height stayed the intrinsic 806/933/1667px and the landscape hero rendered as a tall portrait crop. That is Thom's 1:10 PM defect. `height:auto` hands the box back to aspect-ratio. Measured before: 358x806 (ar 0.44) / 358x933 (0.38) / 358x1667 (0.21). */ .ncard img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--hair)} .nct{display:block;padding:10px 0 0;font-size:15px;line-height:1.35} .ncard:hover .nct{border-bottom:0;color:var(--ink)} .ncard:hover img{opacity:.92} @media(max-width:767px){ .feat{padding:32px var(--pad) 0} .ncards{grid-template-columns:minmax(0,1fr);gap:18px} .chipgrps{gap:18px} } /* round4b-260916 B4: the caret is gone with the expander (WF-1 rule 11). Nothing here overrides a chevron any more because no tile renders one. */ /* uat-fixes-260915 item 2c: chip rows fill their line, fold by width behind "+ more". `.folded` is only ever applied by chipfold.js, so with JS off every pill stays visible. */ .chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0} .chips > li.folded{display:none} .chip.all{font-weight:600} .chip.more{background:none;border:1px solid var(--hair);cursor:pointer;font:inherit;color:var(--muted-sm)} .chip.more:hover{color:var(--ink);border-color:var(--ink)} /* round4b-260916 WF-1 rule 1: .pclient and .pmeta deleted with the two paragraphs they styled. The job body goes crumbs -> H1 -> description; the client, the year and the hired-by value are the credits row's. Rules left behind would re-style the lines the moment anything emits those classes again, which is what "delete the dead CSS" in the review means. */ /* ---- round4b-260916 B4: line one at phone width. Client keeps normal wrapping, the campaign title ellipsizes, so the caption's first line stays one line when it fits and the 44px "Open the job" line below it is never pushed to a third. */ @media(max-width:480px){ /* round4b-260916 launch: the client may shrink. flex:0 0 auto pinned it at max-content, so "Nebraska Department of Economic Development" (461px at 22px Newsreader) overflowed a 390 viewport. It shrinks and wraps within its own item now -- the name is never truncated and the title keeps its ellipsis, so the caption's one baseline (WF-1 v5) is unchanged where it fits. */ /* round4c B4b: `.feath{font-size:26px}` USED TO LIVE in the earlier max-width:480 block, about fifty lines ABOVE the base `.feath{...font-size:30px}` rule. Equal specificity and the later rule wins whatever media query it is in, so the 390 override had never once applied and Home's "Featured" rendered 30px at every width - the one token RED left after B4b, and the same cascade-order shape as the B2 chip (where the first edit did nothing because home.css `.chips a` outranked work.css `.chip`). Moved below the base rule, which is the only place it can win. WF-4 v3.2 `.m390 .sec{font-size:26px}`. */ .feath{font-size:26px} } /* round4e D33 (Thom's option b): an opened frame sitting at the document top has nothing to * scroll, so the tile is padded down by the measured header height and the frame's top edge * lands at the nav break. --navpad is set by home.js from the live header box, never guessed; * the class only ever exists while the tile is open. */ .tile.navpad{padding-top:var(--navpad,64px);background:#000}