/* ========================================================================== VP FIXES ========================================================================== */ /* ---- 1 · the page banner keeps VP's OWN headline size ---- The Position is 54; Variety stays at the 23 it has always been. The only thing that changes here is that the sub drops to its own line. ---- */ /* ---- 1 · the page banner reads as two lines, like The Position's ---- */ .mobx .mast h1 .yr, .mobx .mast h1 span.yr{ display:block!important;margin:2px 0 0!important;padding:0!important; font:400 19px/26px "Iowan Old Style",Georgia,"Times New Roman",Times,serif!important; letter-spacing:normal!important;text-transform:none!important; color:rgba(244,243,241,.72)!important;white-space:normal!important} /* the banner is a picture on these pages, so the sub is light; on a paper banner it falls back to The Position's grey */ .mobx .mast.paper h1 .yr{color:#4a4a52!important} /* the header printed the PAGE NAME: .lg is font-size:0 and .lg::after carries the name. Every page says Variety Partners now. */ .mobx header .lg::after,header.hd .lg::after,header .lg.brand::after, header .lg.lg.lg::after{content:"Variety Partners"!important; font:400 17px/1 "Iowan Old Style",Georgia,"Times New Roman",Times,serif!important; letter-spacing:normal!important;color:#141416!important} /* Home was printing its own text AND the ::after, so the name read twice. The element's own text is switched off on every page; the ::after is the name. */ header .lg.lg.lg{font-size:0!important} header .lg.lg.lg>a{font-size:0!important} /* the stats rail stays as it was — hidden. Only the headline was broken. */ .mobx .mast .stats{display:none!important} /* ---- 3 · the form card, 12.5% narrower, with a rule above the button ---- */ .mobx .fcard.fcard.fcard{width:700px!important;max-width:700px!important; margin-left:auto!important;margin-right:auto!important} .mobx .fcard .frow,.mobx .fcard .facts,.mobx .fcard .fbtn{position:relative} /* the hairline above the button. The desktop card is rebuilt by VP's own script, so the rule is CSS, not markup: the element that sits immediately before the submit button carries it, with 26 of air on each side. */ .mobx .fcard>*:has(+ button[type="submit"]), .mobx .fcard>*:has(+ .btn.orange){ border-bottom:1px solid rgba(20,20,22,.14)!important;margin-bottom:26px!important} .mobx .fcard>button[type="submit"],.mobx .fcard>.btn.orange{margin-top:26px!important} .mobx .fcard .fend{display:none!important} @media(max-width:900px){ .mobx .fcard.fcard.fcard{width:auto!important;max-width:none!important} .mobx .fcard>*:has(+ button[type="submit"]),.mobx .fcard>*:has(+ .btn.orange){ margin-bottom:20px!important} .mobx .fcard>button[type="submit"],.mobx .fcard>.btn.orange{margin-top:20px!important} } /* ========================================================================== BANNER SET — the numbers set on the Portfolio slider, DESKTOP ONLY. Nothing here can fire below 901, so the phone keeps what it has. Carried by .mast.vpban-set, so it lands only on the pages that opt in. band 411 gutter 46 top of eyebrow 100 eyebrow 16 / 2.5 headline 40 / -0.3 air above 16 sub 22 air above 12 rule 64 x 3 air above 22 lead 16 / 1.5 air above 22 ========================================================================== */ @media(min-width:901px){ .mobx .mast.vpban-set{min-height:411px!important;height:411px!important; padding-top:0!important;padding-left:46px!important;padding-right:46px!important} .mobx .mast.vpban-set>.in{padding-top:0!important;padding-bottom:0!important; padding-left:0!important;padding-right:0!important} .mobx .mast.vpban-set .eyebrow{display:block!important;font-size:16px!important; letter-spacing:2.5px!important;margin-top:100px!important;padding-top:0!important} .mobx .mast.vpban-set h1{font-size:40px!important;letter-spacing:-0.3px!important; margin-top:16px!important;margin-bottom:0!important} .mobx .mast.vpban-set h1 span.yr.yr.yr, .mobx .hero.vpban-set h1 span.yr.yr.yr{display:block!important;font-size:22px!important; line-height:1.37!important;margin-top:12px!important; color:rgba(244,243,241,.72)!important;letter-spacing:normal!important} .mobx .mast.vpban-set .rule{width:64px!important;height:3px!important; margin-top:22px!important;margin-bottom:0!important} .mobx .mast.vpban-set .lead,.mobx .mast.vpban-set .in .lead, .mobx .mast.vpban-set .lead.lead{font-size:16px!important;line-height:1.5!important; margin-top:22px!important;margin-bottom:0!important} /* Home is a .hero, not a .mast: no sub line, its lead is a bare

, and two buttons follow. Same numbers, same order. */ /* a child's margin-top collapses through the hero's top edge, so the 100 is padding here rather than a margin on the eyebrow */ .mobx .hero.vpban-set{min-height:411px!important;height:411px!important; padding-top:100px!important;padding-left:46px!important;padding-right:46px!important; display:block!important} .mobx .hero.vpban-set>.hero-inner,.mobx .hero.vpban-set>.wrap{ padding-left:0!important;padding-right:0!important; padding-top:0!important;padding-bottom:0!important;max-width:none!important} .mobx .hero.vpban-set .eyebrow{display:block!important;font-size:16px!important; letter-spacing:2.5px!important;margin-top:0!important;padding-top:0!important} /* Home has no sub line, so its headline takes the two lines the sub would have occupied and the rule still lands on the other four pages' 251.3 */ .mobx .hero.vpban-set h1{font-size:40px!important;letter-spacing:-0.3px!important; line-height:1.1!important;margin-top:16px!important;margin-bottom:0!important; max-width:none!important} .mobx .hero.vpban-set .rule{width:64px!important;height:3px!important; margin-top:22px!important;margin-bottom:0!important} .mobx .hero.vpban-set>p,.mobx .hero.vpban-set .hero-inner>p{ font-size:16px!important;line-height:1.5!important; margin-top:22px!important;margin-bottom:0!important;max-width:820px!important} /* the two buttons are Home's only extra, and they have to land inside the 411 */ .mobx .hero.vpban-set .hbtns{margin-top:20px!important;margin-bottom:0!important} } /* ---- 5 · the banner stack is anchored in the MIDDLE of the band ---- Left stays left on the 46 gutter; only the vertical anchor moves. The band centres its own stack, so each page balances on what it actually carries — the four pages a sub line, Home two buttons — instead of one fixed top number. The small negative margins put the EYEBROW'S CAP and the LAST BASELINE the same distance from the two edges; the boxes each carry half a line of leading, which is what threw it off. Portfolio / Our Brands / Contact / Onboarding 99.02 above, 98.05 below Home 60.30 above, 60.30 below align-self:stretch is not cosmetic: without it a flex child shrinks to its content and Home's lead went 820 -> 583, which can rewrap a line. */ @media(min-width:901px){ .mobx .mast.vpban-set,.mobx .hero.vpban-set{ display:flex!important;flex-direction:column!important; justify-content:center!important;align-items:flex-start!important; text-align:left!important;padding-top:0!important;padding-bottom:0!important} .mobx .mast.vpban-set>*,.mobx .hero.vpban-set>*, .mobx .mast.vpban-set>.in>*{align-self:stretch!important} .mobx .mast.vpban-set .eyebrow,.mobx .hero.vpban-set .eyebrow{margin-top:0!important} .mobx .mast.vpban-set .lead,.mobx .mast.vpban-set .in .lead{margin-bottom:0!important} .mobx .hero.vpban-set .hbtns{margin-bottom:0!important} .mobx .mast.vpban-set>*:first-child{margin-top:-4.15px!important} /* Onboarding wraps its stack in a .in, which adds 2.07 of its own */ .mobx .mast.vpban-set>.in{margin-top:-4.48px!important} /* Home's first child is a zero-height node, so its compensation rides the eyebrow, and it ends on a button box rather than a baseline */ .mobx .hero.vpban-set .eyebrow.eyebrow{margin-top:-6.26px!important} } /* ---- 6 · Home's banner reads like the other four ---- Measured differences before this block: eyebrow white on Home, #fd5934 on the other four lead #e8e5de on Home, Contact and Onboarding; #d8d5cd on Portfolio and Our Brands — so the four did not agree either. One value now. buttons only Home carried them; they come out. Desktop only; the phone keeps its own banner and its own buttons. */ @media(min-width:901px){ .mobx .hero.vpban-set .eyebrow{color:#fd5934!important} .mobx .mast.vpban-set .lead,.mobx .mast.vpban-set .in .lead, .mobx .hero.vpban-set>p,.mobx .hero.vpban-set .hero-inner>p{color:#d8d5cd!important} .mobx .hero.vpban-set .hbtns{display:none!important} /* with the buttons gone the stack ends on a baseline like the other four, so Home takes the same compensation they do */ .mobx .hero.vpban-set .eyebrow.eyebrow{margin-top:-4.15px!important} } /* ========================================================================== MOBILE — everything the desktop got, scaled. Two tiers, because VP's own sheet switches at 640, not 900: phone <= 640 gutter 22 tablet 641-900 gutter 46 Nothing in here can fire at 901 or above, so the locked desktop cannot move. The desktop set and its scaled pair: desktop tablet phone eyebrow 16 14 12 tracking 2.5 2.2 1.9 headline 40 34 28 tracking -0.3 -0.25 -0.21 headline air 16 14 12 sub 22 19 17 sub air 12 10 8 rule 64x3 56x3 48x3 rule air 22 18 16 lead 16/1.5 15.5/1.5 15/1.55 lead air 22 18 16 ========================================================================== */ /* ---- the stack is anchored in the middle of the band, as on the desktop ---- */ @media(max-width:900px){ .mobx .mast.vpban-set,.mobx .hero.vpban-set{ display:flex!important;flex-direction:column!important; justify-content:center!important;align-items:flex-start!important; text-align:left!important;padding-top:0!important;padding-bottom:0!important} /* a flex child shrinks to its content and can rewrap a line — every child keeps the width it already has */ .mobx .mast.vpban-set>*,.mobx .hero.vpban-set>*, .mobx .mast.vpban-set>.in>*{align-self:stretch!important} .mobx .mast.vpban-set .eyebrow,.mobx .hero.vpban-set .eyebrow{ margin-top:0!important;padding-top:0!important;display:block!important} .mobx .mast.vpban-set .lead,.mobx .mast.vpban-set .in .lead{margin-bottom:0!important} /* Home's two buttons come out of the banner here too */ .mobx .hero.vpban-set .hbtns{display:none!important} /* one lead grey, the desktop's */ .mobx .mast.vpban-set .lead,.mobx .mast.vpban-set .in .lead, .mobx .hero.vpban-set>p,.mobx .hero.vpban-set .hero-inner>p{color:#d8d5cd!important} /* Home's eyebrow is orange like the other four */ .mobx .hero.vpban-set .eyebrow{color:#fd5934!important} /* the form card never runs wider than the desktop's 700 */ .mobx .fcard.fcard.fcard{width:auto!important;max-width:700px!important; margin-left:auto!important;margin-right:auto!important} } /* ---- tablet: 641 to 900 ---- */ @media(min-width:641px) and (max-width:900px){ /* the band is 1.93 x the ink stack on the desktop and on the phone. The tablet was keeping the desktop's 411 with a 187 stack, which read 2.20 — the band was the thing that looked too tall, not the type. 187.17 x 1.93 = 361. */ .mobx .mast.vpban-set,.mobx .hero.vpban-set{ height:361px!important;min-height:361px!important; padding-left:46px!important;padding-right:46px!important} .mobx .mast.vpban-set .eyebrow,.mobx .hero.vpban-set .eyebrow{ font-size:14px!important;letter-spacing:2.2px!important} .mobx .mast.vpban-set h1,.mobx .mast.vpban-set .in h1,.mobx .hero.vpban-set h1{ font-size:34px!important;letter-spacing:-0.25px!important;line-height:1.12!important; margin-top:13.29px!important;margin-bottom:0!important;max-width:none!important} .mobx .mast.vpban-set h1 span.yr.yr.yr, .mobx .hero.vpban-set h1 span.yr.yr.yr{display:block!important;font-size:19px!important; line-height:1.37!important;margin-top:10px!important; color:rgba(244,243,241,.72)!important;letter-spacing:normal!important} .mobx .mast.vpban-set .rule,.mobx .hero.vpban-set .rule{ width:56px!important;height:3px!important;margin:18.82px 0 0!important} .mobx .mast.vpban-set .lead,.mobx .mast.vpban-set .in .lead, .mobx .hero.vpban-set>p,.mobx .hero.vpban-set .hero-inner>p{ font-size:15.5px!important;line-height:1.5!important;margin-top:17.4px!important} /* cap-to-baseline came back 113.91 above against 109.41 below; half the difference lifts the stack onto centre. Home's first child is a zero-height node, so its compensation rides the eyebrow. */ /* .in is display:contents on the phone, so the eyebrow is the real first flex item everywhere — the compensation goes there. A negative margin on the first item shortens the stack, and centring hands half of it back, so the number is twice the gap being closed. */ .mobx .mast.vpban-set .eyebrow.eyebrow, .mobx .hero.vpban-set .eyebrow.eyebrow{margin-top:-4.5px!important} } /* ---- phone: 640 and under ---- */ @media(max-width:640px){ .mobx .mast.vpban-set,.mobx .hero.vpban-set{ padding-left:22px!important;padding-right:22px!important} .mobx .mast.vpban-set .eyebrow,.mobx .hero.vpban-set .eyebrow{ font-size:12px!important;letter-spacing:1.9px!important} .mobx .mast.vpban-set h1,.mobx .mast.vpban-set .in h1,.mobx .hero.vpban-set h1{ font-size:28px!important;letter-spacing:-0.21px!important;line-height:1.14!important; margin-top:12.72px!important;margin-bottom:0!important;max-width:none!important} .mobx .mast.vpban-set h1 span.yr.yr.yr, .mobx .hero.vpban-set h1 span.yr.yr.yr{display:block!important;font-size:17px!important; line-height:1.37!important;margin-top:8px!important; color:rgba(244,243,241,.72)!important;letter-spacing:normal!important} /* the gaps are set as a RATIO of the headline, not a flat scale. Desktop reads eyebrow->headline 0.897, sub->rule 0.55, rule->lead 0.747 of the headline size. At 28 that is 25.1 / 15.4 / 20.9 — the flat numbers were 24.4 / 25.1 / 24.1, which is why the rule looked adrift on the phone. */ .mobx .mast.vpban-set .rule,.mobx .hero.vpban-set .rule{ width:48px!important;height:3px!important;margin:6.34px 0 0!important} .mobx .mast.vpban-set .lead,.mobx .mast.vpban-set .in .lead, .mobx .hero.vpban-set>p,.mobx .hero.vpban-set .hero-inner>p{ font-size:15px!important;line-height:1.55!important;margin-top:12.77px!important} /* 71.58 above against 69.08 below — half of it lifts the stack onto centre */ .mobx .mast.vpban-set .eyebrow.eyebrow, .mobx .hero.vpban-set .eyebrow.eyebrow{margin-top:-2.5px!important} } /* ---- 7 · two fixes that must live in the BUILDER, not appended to the css ---- vp_fixes.py rewrites assets/vpfixes.css on every run, so anything appended to that file by hand is gone the next time it runs. Both of these were lost that way once. */ /* the lead is TWO LINES on every banner, so Home's long desk-only clause comes out at every size rather than being shown on one and hidden on the other. The words now match desktop to phone because both carry the short pair. */ .mobx .hero.vpban-set .vp-deskonly{display:none!important} @media(max-width:900px){ .mobx .hero.vpban-set>p,.mobx .hero.vpban-set .hero-inner>p, .mobx .mast.vpban-set .lead{max-width:none!important} } /* Home's sub sits INSIDE its h1, so it inherited the headline's 600 where the other four pages' subs are 400 serif. */ .mobx .hero.vpban-set h1 span.yr.yr.yr{ font-weight:400!important; font-family:"Iowan Old Style",Georgia,"Times New Roman",Times,serif!important} /* ---- 8 · the showreel, 12% larger on the desktop ---- Measured 790 x 444.375 at 16:9, centred in a band with a 46 gutter. 790 x 1.12 = 884.80, and the height follows the ratio to 497.70. At 1024 the band's inner width is 932, so it still clears the gutter. Desktop only. */ @media(min-width:901px){ /* the video sits in a .box wrapper that is itself 790 wide, so sizing the video did nothing — max-width:100% of the box capped it straight back. The BOX is what grows; the video fills it. */ .mobx .reelsec .box,.mobx section.reel .box{ width:886.8px!important;max-width:100%!important} /* the box carries a 1px border each side, so it is 2 wider than the video */ .mobx .reelsec .box video,.mobx section.reel .box video{ width:100%!important;height:auto!important;max-width:100%!important} } /* ---- 8a · the air under the Portfolio banner ---- The first project card sat 53.10 below the banner's rule: the page's anchor rule gives the first section 31, and the accordion block adds another 22 on top of it. The brands page — the one this list is matched to — sits at 31, so the extra 22 comes off and both pages open on the same air. */ @media(max-width:900px){ /* the banner sets its stack with the same air top and bottom; the list carries the same rule — 31 under the banner's rule, 31 above the footer (the .mobx already ends on 31, so the last card's own 13 comes off). */ .mobx section.case.case:first-of-type{margin-top:31px!important} .mobx section.case.case:last-of-type{margin-bottom:0!important} } /* ---- 8a2 · the Portfolio list on the desktop ---- The phone reads Portfolio as four horizontal cards you tap open. The desktop carried the same markup but painted it out flat — header, rail and facts all open, no card. The same card is built here at desktop scale: 46 gutters, the rail and the facts held shut until the row is tapped. */ @media(min-width:901px){ .mobx section.case.case{background:#fff!important;border:1px solid #fff!important; border-radius:20px!important;overflow:hidden!important; box-shadow:0 18px 34px -16px rgba(20,20,22,.18)!important; margin:0 46px 16px!important;padding:0!important} /* the site's desktop starting point under a banner is the brands page's 49.30; the rule is the same air top and bottom, so the list closes on 49.30 too */ .mobx section.case.case:first-of-type{margin-top:49.3px!important} /* the last card's bottom margin escapes .mobx (margin collapse) and the gap is then painted by the dark body, which read as an off-colour band above the footer. The air moves inside the light wrapper instead. */ .mobx section.case.case:last-of-type{margin-bottom:0!important} .mobx:has(section.case){padding-bottom:49.3px!important} .mobx section.case.case>.chd{display:flex!important;align-items:center!important; gap:18px!important;padding:22px 28px!important;margin:0!important;cursor:pointer!important} .mobx section.case>.chd .ct{flex:1 1 auto!important;min-width:0!important} .mobx section.case>.chd .sw{display:none!important} .mobx section.case>.chd::after{content:"+";margin-left:auto;color:#c9c3b7; font:400 26px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; transition:transform .22s} .mobx section.case.open>.chd::after{transform:rotate(45deg);color:#fd5934} .mobx section.case.case>.car,.mobx section.case.case>.facts{ max-height:0!important;overflow:hidden!important;opacity:0!important; transition:max-height .32s ease,opacity .2s ease!important;margin:0!important;padding:0!important} .mobx section.case.case.open>.car{max-height:420px!important;opacity:1!important; overflow-x:auto!important;padding:0 28px 18px!important} .mobx section.case.case.open>.facts{max-height:460px!important;opacity:1!important; margin:0 28px 26px!important;padding:0!important} .mobx section.case .facts{background:none!important;box-shadow:none!important;border:0!important} } /* ---- 8c2 · the mark is vector now ---- The square was a 500px PNG; at 28-33 on screen the hard edges of the asterisk and the bracket aliased and read as pixelated. `assets/vp_mark.svg` is the same artwork traced to paths — identical shape, sharp at any size. Written heavier than the page's own header rule, which loads after this sheet. */ .mobx header .lg .ic.ic,.mobx header .brand .ic.ic,.mobx header a .ic.ic, header .lg .ic.ic,header .brand .ic.ic{ background-image:url('vp_mark.svg')!important;background-size:contain!important; background-position:center!important;background-repeat:no-repeat!important} /* ---- 8e · the header lockup matches the footer's ---- .lg is a flex row with an 8 gap, and it holds three items: the mark, an empty text node, and the ::after that draws the name — so the name sat two gaps away, 16.33 of ink instead of the footer's 8.00. The gap is closed and the 8 put back on the name alone. The mark does not move: it stays on the gutter. */ .mobx header .lg.lg,.mobx header .brand.brand,header .lg.lg,header .brand.brand{ gap:0!important} .mobx header .lg.lg::after,.mobx header .brand.brand::after, header .lg.lg::after,header .brand.brand::after{margin-left:8px!important} /* 8.00, not 7.67: it put the header's V 0.33 left of the footer's */ /* ---- 8b · the sideways-pan guard ---- The site already carried body{overflow-x:hidden}, but the viewport only takes that value from ; when is visible Chrome falls back to the body's and clips, and iOS Safari does not — so a phone can pan sideways into the near-black page background even though Chrome measures no overflow. The clip is put on too. Nothing here is sticky (the header is position:relative and the drawer is fixed), so clipping is safe. */ @media(max-width:900px){ html{overflow-x:hidden!important;max-width:100%!important} body{overflow-x:hidden!important;max-width:100%!important} } /* ---- 8c · the footer sits on the bottom of a short page ---- Contact is shorter than a phone screen, so the body stretched past the footer and 82 of near-black page background showed under it, reading as a second empty band. The page becomes a column that is at least a screen tall and the footer takes the slack, so it lands on the bottom edge instead. */ @media(max-width:900px){ body{min-height:100vh!important;min-height:100dvh!important; display:flex!important;flex-direction:column!important} body>.mobx{flex:1 0 auto!important} body>footer.tpfoot{flex:0 0 auto!important;margin-top:auto!important} } /* ---- 9 · the two message cards sit ON THE GUTTER on the phone ---- SUPERSEDED 2026-09-15. This block used to cut the card to 85% of the column and centre it. Measured at 393 that put it 26.2 inside the gutter on each side - 296.6 wide in a 349 column - and it was the ONLY block on the page not on the 22: the header, the headline, the four step cards and the note all sit there. It read as a mistake rather than as a choice. The card is now cut like the step cards above it: full column, 18 radius, 1px rgb(229,224,213). */ @media(max-width:900px){ .mobx .fsec form.fcard.fcard.fcard{width:100%!important;max-width:none!important; margin-left:0!important;margin-right:0!important; border-radius:18px!important;border:1px solid rgb(229,224,213)!important} .mobx .fsec form.fcard.fcard .fgrp{padding-left:0!important;padding-right:0!important} .mobx .fsec form.fcard.fcard .ghead, .mobx .fsec form.fcard.fcard .gbody{padding-left:22px!important;padding-right:22px!important} /* the button sits on the RIGHT, the way the desktop sets it: measured at 1512 it ends 35 from the card's inner edge with all the slack on its left. On the phone it was centred (133.4 of gap each side on Contact, 94.1 on Onboarding). Its right edge now lines up with the rows' own 22. */ .mobx .fsec form.fcard button[type="submit"], .mobx .fsec form.fcard .btn.orange{ display:block!important;margin-left:auto!important;margin-right:22px!important; /* and CENTRED between the hairline above it and the card's bottom edge. It measured 22 above / 19 below; the card's own 1px bottom border is why the two margins are not the same number. */ margin-top:21px!important;margin-bottom:20px!important} .mobx .fsec form.fcard > *:has(+ button[type="submit"]), .mobx .fsec form.fcard > *:has(+ .btn.orange){margin-bottom:0!important} } /* The phone has only its gutter to give. The band keeps its 22 so SHOWREEL stays on the gutter, and the box reaches 12 past it on each side: 346 -> 370, the same order of growth the desktop got. 16:9 carries the height to 208.13. */ @media(max-width:900px){ .mobx .reelsec .box,.mobx section.reel .box{ width:auto!important;max-width:none!important; margin-left:-12px!important;margin-right:-12px!important} .mobx .reelsec .box video,.mobx section.reel .box video{ width:100%!important;height:auto!important;max-width:100%!important} } /* ---- 9 - the reel plays itself on the phone, with no play button ---- iOS paints its own big play button over an inline video whenever autoplay has not started it (Low Power Mode is the usual cause). The shadow-DOM control is switched off, and the nudger below keeps calling play() so the clip runs. */ video::-webkit-media-controls-start-playback-button{display:none!important; -webkit-appearance:none!important;opacity:0!important} video::-webkit-media-controls-overlay-play-button{display:none!important;opacity:0!important} video::-webkit-media-controls-panel{display:none!important;opacity:0!important} video::-webkit-media-controls{display:none!important} /* ---- 10 - Portfolio tiles match the studio tiles ---- Measured on the phone: a studio card was 279.19 wide with a 4:3 picture of 279.19 x 209.39; a Portfolio card was 272.22 with a 270.22 x 200 picture, so the work tiles were 6.97 NARROWER, not bigger. Both rails now carry the same 80% card and the same 4:3 picture. Doubled classes: the page's own