/* ========================================================================== Our Approach (about) — page styles. Loaded on /about/ only, after main.css and garden.css (the homepage garden's plant mechanics: .g-p growth from --p, .g-i wind, leaves, mist, veil). The page reads as the garden, chapter by chapter, alternating paper and pine like the homepage: I the avenue (paper) .hx engraved oaks rise around the statement; flowers on scroll II the founding story (pine) .hx-film the title large, then the film full width with a silent preview III the letter (paper) .fl the founder letter (rules below, unchanged); engraved borders grow beside it as you read (.lt-garden), or small at its foot below 1000px IV investment criteria (paper-2) .icr the $5–30M figure on an engraved pine plate, then three ruled lists: what we look for, industries we like, how we invest V core values (pine) .vx three engraved plates printed in paper ink VI Rooted in Charlotte (paper) .cl a drawn map in the Portfolio map's house style VII closing (pine-deep) .cta-band--split, as on the homepage Motion is driven by assets/js/about.js. Every engraving is a real public-domain print already on the site (assets/img/garden), and no flower plate appears twice on the page: the avenue, the letter's borders and the values plates each have their own. The values plates (assets/img/about/*-neg.webp) are the same prints with pine and paper swapped (the larkspur from the full-strength print of garden/lark-p). The map is built by tools/charlotte-map.mjs from Census TIGER/Line data. No JS: everything grown, still, no hold. Reduced motion: the same, and the map is simply drawn. ========================================================================== */ /* ---------- founder letter: handwritten on fine stationery ---------- Oooh Baby (OFL-1.1) is the one sanctioned hand on the site: the founder's letter only. Everything else on the letter is Source Serif 4, the site's one typeface (var(--f-serif), main.css). */ @font-face{font-family:'Oooh Baby';src:url('../fonts/oooh-baby-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} .fl .section-head{margin-bottom:clamp(1.8rem,3vw,2.6rem)} /* the label is an h2 for the outline but keeps the site's eyebrow look */ .fl .fl-label{line-height:1.4;text-wrap:nowrap} .fl-sheet{ --fl-ink:#1D2842; /* blue-black fountain-pen ink */ --fl-stock:#FBF8F0; /* heavy cream cotton */ --fl-hand:'Oooh Baby',var(--f-serif); --fl-size:clamp(1.42rem,1.1rem + 1vw,1.74rem); --fl-lh:1.56; position:relative;isolation:isolate; max-width:800px;margin-inline:auto; padding:clamp(2.4rem,5.4vw,4.4rem) clamp(1.5rem,7.2vw,5.6rem) clamp(2.6rem,5.6vw,4.6rem); background:linear-gradient(172deg,#FDFBF6 0%,var(--fl-stock) 46%,#F8F4EA 100%); color:var(--fl-ink); border-radius:0; box-shadow: 0 0 0 1px rgba(92,74,42,.07), 0 1px 0 rgba(92,74,42,.10), 0 2px 2px rgba(20,24,26,.04), 0 4px 8px -3px rgba(20,24,26,.07), 0 22px 40px -22px rgba(20,24,26,.26), 0 52px 80px -48px rgba(20,24,26,.30), inset 0 1px 0 rgba(255,255,255,.75); } /* cotton: a slow mottle plus a fine tooth, both barely there */ .fl-sheet::before{ content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:multiply;opacity:.55; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .24 0 0 0 -1.1 .62'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23t)' opacity='.16'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .012' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .46 0 0 0 0 .30 0 0 0 -1.4 .78'/%3E%3C/filter%3E%3Crect width='560' height='560' filter='url(%23m)' opacity='.10'/%3E%3C/svg%3E"); } /* letterhead: blind-embossed mark, engraved name, small address, short pine hairline */ .fl-head{display:grid;justify-items:center;text-align:center;gap:.55rem;margin-bottom:clamp(2.4rem,5vw,3.8rem)} .fl-head::after{content:'';display:block;width:64px;height:1px;margin-top:clamp(1rem,2vw,1.4rem);background:rgba(18,63,60,.22)} .fl-mark{ width:clamp(40px,3.8vw,52px);height:auto;margin-bottom:.4rem; fill:#F6F1E4; filter:drop-shadow(0 -1px 0 rgba(255,255,255,.95)) drop-shadow(0 1px .4px rgba(92,72,38,.34)) drop-shadow(0 1.5px 2px rgba(92,72,38,.12)); } .fl-firm{ margin:0;font-family:var(--f-serif);font-optical-sizing:auto;font-weight:520; font-size:clamp(1.12rem,1rem + .35vw,1.3rem);line-height:1.1;letter-spacing:-.006em;color:var(--pine); text-shadow:0 1px 0 rgba(255,255,255,.7); } .fl-addr{margin:0;font-family:var(--f-serif);font-optical-sizing:auto;font-style:normal;font-weight:420;font-size:.84rem;font-variant-numeric:proportional-nums;line-height:1.45;letter-spacing:0;color:rgba(18,63,60,.8)} .fl-addr .fl-sep{margin-inline:.45em;opacity:.6} /* the hand */ .fl-body{font-family:var(--fl-hand);font-size:var(--fl-size);line-height:var(--fl-lh);font-weight:400;letter-spacing:0; -webkit-text-stroke:.28px currentColor;text-shadow:0 0 .6px rgba(29,40,66,.32)} .fl-body p{margin:0 0 .62em;text-wrap:pretty} .fl-body .fl-salute{margin-bottom:.8em} /* the two emphasised phrases: pressed harder and underlined with a pen stroke. The stroke colour in the SVG (%231D2842) is --fl-ink; change both together. */ .fl-body strong{ font-weight:inherit;-webkit-text-stroke:.62px currentColor; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M1.5 5.4C34 3.6 70 2.9 104 3.1s66 1 94.5 .5' fill='none' stroke='%231D2842' stroke-width='1.35' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 100%/100% .34em no-repeat; -webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:.1em; } .fl-body .fl-coda{text-wrap:balance} .fl-body .fl-close{margin:1.25em 0 0} /* 1x screens render the simulated pen weight heavier; ease it off there */ @media (max-resolution:1.5dppx){ .fl-body{-webkit-text-stroke-width:.2px} .fl-body strong{-webkit-text-stroke-width:.5px} } /* signature block */ .fl-sign{margin-top:.2rem} .fl-sig{display:block;width:clamp(230px,26vw,340px);height:auto;margin:.1rem 0 1rem -.4rem} .fl-name,.fl-role{margin:0;font-family:var(--f-serif);font-optical-sizing:auto;letter-spacing:0;line-height:1.4} .fl-name{font-weight:var(--w-name);font-size:1.04rem;color:var(--ink)} .fl-role{font-weight:400;font-size:.94rem;color:var(--ink-soft)} /* the signature inks in left to right once it is on screen (rides the site's .reveal observer) */ .js .fl-sig.reveal{ opacity:1;transform:none; -webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 60%);mask-image:linear-gradient(90deg,#000 40%,transparent 60%); -webkit-mask-size:250% 100%;mask-size:250% 100%; -webkit-mask-position:100% 0;mask-position:100% 0; transition:-webkit-mask-position 1.9s cubic-bezier(.5,.1,.3,1) .35s,mask-position 1.9s cubic-bezier(.5,.1,.3,1) .35s; } .js .fl-sig.reveal.is-in{-webkit-mask-position:0 0;mask-position:0 0} @media (prefers-reduced-motion:reduce){ .js .fl-sig.reveal{-webkit-mask-image:none;mask-image:none;transition:none} } @media (max-width:640px){ .fl-sheet{box-shadow:0 0 0 1px rgba(92,74,42,.07),0 1px 1px rgba(20,24,26,.05),0 14px 30px -18px rgba(20,24,26,.28),inset 0 1px 0 rgba(255,255,255,.75)} .fl-addr .fl-line{display:block} .fl-addr .fl-sep{display:none} } /* ========================================================================== The chapters around the letter ========================================================================== */ /* the intro clock for the avenue: registered numbers so they can be animated in CSS */ @property --pi{syntax:'';inherits:true;initial-value:1} @property --ps{syntax:'';inherits:true;initial-value:1} /* ---------------------------------------------------------------- I. the avenue */ .hx{ --pi:1; /* intro growth (trees, meadow): CSS animation below */ --ps:1; /* scroll growth (flower borders, leaves): about.js */ --stage:100vh; --pin:34vh; /* how long the stage holds while the borders come up */ --u:min(1vh,1.05vw,13.5px); --gc:14s;--gx:.024s; --paper-0:rgba(247,245,240,0); position:relative;height:var(--stage); background:var(--pine); /* anything below the stage is ground */ } @supports (height:100svh){.hx{--stage:100svh;--pin:34svh;--u:min(1svh,1.05vw,13.5px)}} .hx.g-js{height:calc(var(--stage) + var(--pin))} .hx + .section::before{display:none} /* the ground runs straight into the film band */ /* which clock each part follows */ .hx .garden__art{--p:var(--pi)} .hx .hx-scroll{--p:var(--ps)} /* the trees wait for the great oaks to arrive (about.js adds .hx-go), then rise over ~4s. Failsafe: if the script never runs they are simply there after 3s. */ @media (prefers-reduced-motion:no-preference){ .js .hx{--pi:0;--ps:0;animation:hx-failsafe 0s 3s forwards} .js .hx.hx-go{animation:hx-grow 4.2s cubic-bezier(.3,.1,.25,1) .05s both} } @keyframes hx-grow{from{--pi:0}to{--pi:1}} @keyframes hx-failsafe{to{--pi:1;--ps:1}} /* rows of the avenue, near to far: the farther, the paler */ .hx .garden__hero{opacity:.94} .hx .hx-row--2{opacity:.6} .hx .hx-row--3{opacity:.4} .hx .hx-row--4{opacity:.3} .hx .garden__far{opacity:.2} .hx .hx-row--2 .g-i{--sd:9s;--amp:.4;--gust:.8} .hx .hx-row--3 .g-i,.hx .hx-row--4 .g-i{animation:none} .hx .garden__mist{height:calc(var(--u) * 34);background:linear-gradient(to top,var(--paper) calc(var(--u) * 15),var(--paper-0))} /* sky: the canopy tops dissolve into paper under the header, and a clearing opens behind the words */ .hx .garden__veil{ background: linear-gradient(180deg,var(--paper) 0,rgba(247,245,240,.93) 6.5%,rgba(247,245,240,.5) 12%,var(--paper-0) 22%), radial-gradient(ellipse 27% 29% at 50% 33%,rgba(247,245,240,.97) 0,rgba(247,245,240,.82) 52%,var(--paper-0) 100%); } /* the statement: the homepage slogan's cut, in ink, three lines, centred in the clearing */ .hx__inner{ position:absolute;inset:0;z-index:3; display:flex;justify-content:center;align-items:flex-start; padding-top:calc(var(--hdr) + clamp(1.4rem,7.4vh,5.4rem)); pointer-events:none; } .hx__title{ margin:0;pointer-events:auto; font-family:var(--f-serif);font-optical-sizing:auto;font-weight:480; font-size:clamp(3rem,min(7.1vw,12.4vh),7.6rem);line-height:1.01;letter-spacing:-.03em; text-align:center;color:var(--ink);max-width:none; } .hx__title em{color:var(--teal);letter-spacing:-.02em} .hx__title .line-mask>span{white-space:nowrap} /* optical line spacing (client, 2026-09-24): "We are" has no descenders while "the People" drops a p right onto "Equity", so equal baselines looked uneven (≈30px vs ≈12px of clear space). Line 2 is pulled up and line 3 pushed down by a share of the em so the two visible gaps match. */ .hx__title .line-mask:nth-child(2){margin-top:-.21em} /* the masks carry margin-bottom:-.16em; adjacent margins collapse, so this nets −.05em */ .hx__title .line-mask:nth-child(3){margin-top:.15em} /* the scroll cue, no label: a hairline down the open path with a bead of ink running along it, so the hold reads as "keep scrolling", not a stall. It exists only while there is a hold (about.js adds .g-js), comes in with the trees and fades as the borders rise. None without JS or under reduced motion. */ .hx-cue{ position:absolute;left:50%;bottom:calc(var(--u) * 17);z-index:3; display:none;width:2px;height:clamp(44px,7vh,72px);translate:-50% 0;overflow:hidden;pointer-events:none; } .hx.g-js .hx-cue{display:block} .hx-cue::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;translate:-50% 0;background:rgba(18,63,60,.16)} .hx-cue::after{content:'';position:absolute;left:50%;top:-40%;width:1.5px;height:40%;translate:-50% 0;background:linear-gradient(rgba(18,63,60,0),rgba(18,63,60,.62) 70%);animation:hx-cue 2.4s var(--ease) infinite} @keyframes hx-cue{0%{top:-40%}75%,100%{top:100%}} @media (prefers-reduced-motion:no-preference){ .js .hx-cue{opacity:calc((var(--pi) - .6) * 2.5)} .js .hx.g-js .hx-cue{opacity:calc((var(--pi) - .6) * 2.5 - var(--ps) * 3)} } /* while the statement is on screen the header's slogan stays out of the bar, so "The People Equity Firm" is never said twice at once (about.js sets html.hx-on while the h1 is in view) */ html.hx-on .site-header .bar-slogan{opacity:0;transform:translateX(-6px);transition:opacity .3s var(--ease),transform .3s var(--ease)} /* ---------------------------------------------------------------- the promise bar (client, 2026-10-07) */ /* One statement between the avenue and the film, on paper, in the homepage mission statement's cut: ink words, the closing clause in teal italic. A short teal rule above it marks it as a statement, not a heading. */ .hx-bar{background:var(--paper);padding-block:clamp(4.5rem,8vw,8rem)} .hx-bar::before{display:none} .hx-bar + .section::before{display:none} .hx-bar .container--wide::before{content:'';display:block;width:clamp(36px,3vw,56px);height:2px;margin:0 auto clamp(1.8rem,3vw,2.8rem);background:var(--teal)} .hx-bar__words{ margin:0 auto;max-width:min(1180px,100%);text-align:center;text-wrap:balance;color:var(--ink); font-family:var(--f-serif);font-optical-sizing:auto;font-weight:420; font-size:clamp(1.55rem,2.75vw,2.75rem);line-height:1.24;letter-spacing:-.016em; } .hx-bar__words em{font-style:italic;color:var(--teal);letter-spacing:-.008em} /* ---------------------------------------------------------------- II. the founding story */ /* A chapter of its own, not the homepage's split band: the title set large across the top, then the film at the full width of the page in the film's own 21:9 frame. While the frame is on screen a silent preview of the founder film loops in it (about.js: 9-129s, as the homepage film); the play ring sits bottom left on a pine shade, clear of Michael's face, and a click loads the full film (Vimeo, with sound; main.js). Poster only without JS, under reduced motion or with Save-Data. */ .hx-film{padding-block:clamp(4.2rem,8vw,8rem) clamp(4.5rem,8.5vw,8.5rem)} .hx-film .hx-film__title{ margin:0 0 clamp(1.8rem,3.6vw,3.6rem);max-width:none; font-size:clamp(3rem,6vw,6.2rem);line-height:1.02;letter-spacing:-.03em; } .hx-film__frame{ aspect-ratio:1280/546;max-height:min(80svh,820px); background:var(--pine-deep); } .hx-film__frame>img,.hx-film__v{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; } .hx-film .video-facade>img{height:100%;opacity:1;object-position:50% 16%} /* the wide shot: keep his head and hands */ .hx-film__v{display:block;object-position:50% 12%;opacity:0;transition:opacity 1.1s var(--ease),transform 1.4s var(--ease-out)} .hx-film__frame.is-playing .hx-film__v{opacity:1} .video-facade.hx-film__frame:hover .hx-film__v{transform:scale(1.035)} .js .hx-film .reveal-scale .hx-film__v{transform:scale(1.08)} .js .hx-film .reveal-scale.is-in .hx-film__v{transform:none} .js .hx-film .reveal-scale.is-in:hover .hx-film__v{transform:scale(1.035)} .hx-film .video-facade .vtitle{display:none} /* the title above already says it */ .hx-film .video-facade .play{inset:auto 0 0 0;display:flex;align-items:flex-end;justify-content:flex-start;padding:clamp(1rem,2.2vw,2.2rem);z-index:2} .hx-film .video-facade .play::before{content:'';position:absolute;inset:auto 0 0 0;height:clamp(140px,42%,320px);z-index:-1;background:linear-gradient(rgba(13,47,45,0),rgba(13,47,45,.66))} .hx-film .video-facade .ring{width:clamp(50px,5vw,84px);height:clamp(50px,5vw,84px)} .js .hx-film .reveal-scale::after{background:var(--pine)} /* the curtain lifts off pine, not paper */ /* once it plays: the full film in its 16:9 frame, as wide as the page allows while it still fits the screen */ .hx-film .video-frame{width:min(100%,calc((100svh - var(--hdr) - 2.5rem) * 16 / 9));margin-inline:auto} @media (max-width:640px){ .hx-film__frame{aspect-ratio:16/10} .hx-film .video-facade>img{object-position:54% 30%} .hx-film__v{object-position:50% 20%} } /* ---------------------------------------------------------------- III. around the letter */ /* the band is paper (it was paper-2), so the engraved borders' paper knock-outs sit invisibly on it. The borders sit behind the letter by source order alone (both positioned, z-index auto). No isolation and no z-index here: an extra stacking context around the sheet re-composites its multiplied paper grain and shifts it by a level or two, and the letter has to render exactly as it always has. */ .lt{position:relative;overflow:hidden;padding-block:clamp(4.5rem,9vw,9rem)} .lt>.container{position:relative} /* the borders' plants are none of the avenue's: columbine, fritillary and oat grass on the left; iris, peony and seed grass on the right. The unit follows the screen's height, but never outgrows the bed beside the sheet (so on tall, narrow desktops the columbine can't reach under the letter); from 1000px to 1240px that makes them a small border in the margins. */ .lt-garden{--p:1;--u:min(1vh,12.5px,calc((100vw - 856px) / 50));--gc:16s;--gx:.024s;position:absolute;inset:0;pointer-events:none;display:none; -webkit-mask-image:linear-gradient(to top,transparent 0,#000 34px);mask-image:linear-gradient(to top,transparent 0,#000 34px)} .lt-bed{position:absolute;top:0;bottom:0;width:calc((100% - 800px) / 2 - 28px)} .lt-bed--l{left:0} .lt-bed--r{right:0} .lt-bed--foot{display:none} .lt-garden .g-p{position:absolute} .lt-garden .g-i{--sd:7s;--amp:.7;--gust:1.6} .lt-garden .g-ink .g-i{opacity:.5} .lt-garden .g-rise .g-i{--sd:3.4s;--amp:2} @media (min-width:1000px){.lt-garden{display:block}} /* below 1000px there is no margin beside the sheet: the band gains a strip below it, and the two beds stand small at its corners on a line of meadow across the foot, the tallest stems tucked just behind the sheet */ @media (max-width:999.98px){ .lt{padding-bottom:calc(clamp(4.5rem,9vw,9rem) + 4vh)} .lt-garden{ display:block;--u:min(.2vh,.55vw); -webkit-mask-image:linear-gradient(to top,transparent 0,#000 12px);mask-image:linear-gradient(to top,transparent 0,#000 12px); } .lt-bed{top:auto;height:calc(var(--u) * 70);width:40%} .lt-bed--foot{display:block;left:0;width:100%} .lt-bed--l .g-rise,.lt-bed--r .g-rise{display:none} /* the meadow line takes their place */ } /* ---------------------------------------------------------------- IV. investment criteria: the figure and three columns */ /* The firm's printed one-pager, set as a page of the site. Everything is scoped to .icr / .icr-* (main.css already has an .ic icon class, so the prefix is icr). 1 the plate: $5–30M of EBITDA on pine, framed by a fine inner rule like an engraved share certificate, a meadow of the garden's engraved grasses at its foot (the line-art sprites in assets/img/garden, printed in paper ink by a filter). main.js arms it as a late .reveal: the pine wipes up from the foot, the frame draws in, the grasses rise and the figure slides up through a mask; "of EBITDA" and its line follow. 2 the three groups, in the same order at every width: What we look for (the figure is its first item; the other four follow it), Industries we like (the short names set larger, like a list of names), How we invest. Each group heads its list over an ink rule; its items are ruled in hairline. The columns share one grid (subgrid), so the heads and every row of items sit level across the page and the rules line up. Layout: three columns from 1100px; from 700px What we look for beside Industries we like (rows level), How we invest two by two beneath; one column on phones. From 700px the plate leads the section, the "What we look for" head under it (the head comes first in the source, so a screen reader hears the group's name before its figure); on phones the head comes first on screen too, so the figure reads as that group's first criterion. Teal text only at 24px and up (4.4:1 on paper-2), and there is none here below the heading. No JS, or reduced motion: everything set, still. The grasses sway only while the plate is on screen (about.js adds .is-live). */ .icr{ --g:clamp(1.8rem,3.6vw,4.6rem); /* column gap */ --icr-t:clamp(1.4rem,1.9vw,1.95rem); /* the item titles' size */ padding-block:clamp(4.5rem,8.5vw,8.5rem); } .icr__head{text-align:center;margin-bottom:clamp(2rem,3.6vw,3.4rem)} .icr__head .d2{font-size:clamp(2.3rem,4vw,3.9rem);line-height:1.04} .icr-list{list-style:none;margin:0;padding:0} .icr-grp h3,.icr-grp h4{margin:0} /* ---------------------------------------------------------------- 1. the plate */ /* .icr-plate is the observed box (main.js .reveal); everything visible is in .icr-plate__in, which takes the wipe (IntersectionObserver treats a target's own clip-path as hiding it, so the two are kept apart) */ .icr-lead{margin-bottom:clamp(3.2rem,6vw,6rem)} .js .icr-lead.reveal{opacity:1;transform:none} /* data-stagger arms every item; the plate does its own wipe */ .icr-plate{position:relative} .js .icr-plate.reveal{opacity:1;transform:none} .icr-plate__in{ --fr:clamp(9px,.85vw,14px); /* the inner frame's inset */ --mu:clamp(2.7px,.32vw,5.2px); /* the meadow's unit: plant heights are --h of these */ position:relative;isolation:isolate; background:var(--pine);color:var(--paper); padding:clamp(2.8rem,5.2vw,5.6rem) clamp(1.4rem,4vw,4.6rem) clamp(3.6rem,6.8vw,7rem); text-align:center; } .icr-plate__in::before{ content:'';position:absolute;inset:var(--fr);z-index:1;pointer-events:none; border:1px solid var(--line-dark); } .icr-fig,.icr-fig__cap{position:relative;z-index:2} /* the figure and its unit share a baseline: "$5–30M of EBITDA", the h4 as given */ .icr-fig{ display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:0; font-family:var(--f-serif);font-optical-sizing:auto;font-weight:400;color:var(--paper); } /* the figure's mask: roomy enough above for the raised $ and below for the rise */ .icr-rise{display:block;overflow:hidden;padding:.2em .08em .12em;margin:-.2em -.08em -.12em} .icr-fig__n{ display:block;white-space:nowrap; font-size:clamp(4.6rem,13vw,15rem);line-height:.9;letter-spacing:-.04em; font-variant-numeric:lining-nums proportional-nums; } /* the dollar sign rides high and small, as on a bank note */ .icr-cur{font-size:.5em;vertical-align:.68em;margin-right:.06em;letter-spacing:0;color:var(--sage)} .icr-fig__of{ display:block;white-space:nowrap;margin-left:.42em; font-style:italic;font-weight:400; font-size:clamp(1.7rem,3.1vw,3.6rem);line-height:1;letter-spacing:-.012em;color:var(--sage); } .icr-fig__cap{ margin:clamp(1.2rem,2vw,2rem) auto 0;max-width:30em; font-size:clamp(1.2rem,1.6vw,1.75rem);line-height:1.3;letter-spacing:-.008em;color:var(--mist);text-wrap:balance; } .icr-nw{white-space:nowrap} /* "add-ons" never breaks at its hyphen */ /* the meadow: inside the frame, along its foot, behind the words */ .icr-meadow{ position:absolute;inset:var(--fr);z-index:0;overflow:hidden;pointer-events:none; /* full strength at the ground, melting into the pine as it rises */ -webkit-mask-image:linear-gradient(to top,#000 calc(var(--mu) * 6),transparent calc(var(--mu) * 27)); mask-image:linear-gradient(to top,#000 calc(var(--mu) * 6),transparent calc(var(--mu) * 27)); } .icr-g{ position:absolute;bottom:-1px;left:calc(var(--x) * 1%);height:calc(var(--h) * var(--mu));width:auto;max-width:none; filter:brightness(0) invert(1);opacity:.3; transform-origin:50% 100%; animation:icr-sway 6.5s ease-in-out calc(var(--x) * -.09s) infinite alternate paused; } .icr-g--ink{opacity:.17;animation-duration:4.2s} .icr-g.is-flip{scale:-1 1} .icr-plate.is-live .icr-g{animation-play-state:running} @keyframes icr-sway{from{rotate:-.9deg}to{rotate:.9deg}} /* ---------------------------------------------------------------- 2. the three groups */ /* the group heads: the site's .d3 cut, sentence case, over an ink rule */ .icr-h{ position:relative;align-self:end; padding-bottom:clamp(.9rem,1.35vw,1.3rem); font-family:var(--f-serif);font-optical-sizing:auto;font-weight:460; font-size:clamp(1.75rem,2.75vw,2.75rem);line-height:1.1;letter-spacing:-.016em;color:var(--ink);text-wrap:balance; } .icr-h::after{content:'';position:absolute;left:0;right:0;bottom:0;border-bottom:1px solid var(--ink);transform-origin:0 50%} /* an item: the title at statement size, its line beneath in the text cut */ .icr-it{position:relative;padding-block:clamp(1.05rem,1.5vw,1.5rem) clamp(1.15rem,1.65vw,1.65rem)} .icr-it::after{content:'';position:absolute;left:0;right:0;bottom:0;border-bottom:1px solid var(--line);transform-origin:0 50%} .icr-it__t{ font-family:var(--f-serif);font-optical-sizing:auto;font-weight:460; font-size:var(--icr-t);line-height:1.16;letter-spacing:-.014em;color:var(--ink);text-wrap:balance; } .icr-it__d{ margin:.42em 0 0;max-width:26em; font-size:clamp(1.0625rem,.9rem + .3vw,1.25rem);line-height:1.45;color:var(--ink-soft);text-wrap:pretty; } /* the industries now carry a line each (client, 2026-09-24), so they are set exactly like the other two columns */ /* ---------------------------------------------------------------- layout */ /* phones (and browsers without subgrid): one column in source order, each group's head over its list */ .icr-grp+.icr-grp{margin-top:clamp(3.2rem,9vw,4.4rem)} .icr-grp>.icr-h{margin-bottom:0} @supports (grid-template-rows:subgrid){ @media (min-width:700px){ .icr-body{display:grid;column-gap:var(--g)} .icr-grp+.icr-grp{margin-top:0} /* What we look for spans the grid: the plate across the top (row 1), the head beneath it (row 2), the other four items down the first column (rows 3–6). Subgrids keep the source order: head, then list. */ .icr-grp--look{grid-column:1/-1;grid-row:1/7;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid} .icr-grp--look>.icr-h{grid-row:2;grid-column:1} .icr-grp--look>.icr-list{grid-row:1/-1;grid-column:1/-1;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid} .icr-grp--look .icr-lead{grid-row:1;grid-column:1/-1} .icr-grp--look .icr-it{grid-column:1} .icr-grp--look .icr-it:nth-child(2){grid-row:3} .icr-grp--look .icr-it:nth-child(3){grid-row:4} .icr-grp--look .icr-it:nth-child(4){grid-row:5} .icr-grp--look .icr-it:nth-child(5){grid-row:6} /* Industries we like beside it, its head and rows level with the first column's */ .icr-grp--ind{grid-column:2;grid-row:2/7;display:grid;grid-template-rows:subgrid} .icr-grp--ind>.icr-list{grid-row:2/-1;display:grid;grid-template-rows:subgrid} } /* ≥1100: three columns, every row level across the page */ @media (min-width:1100px){ .icr-body{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(6,auto)} .icr-grp--how{grid-column:3;grid-row:2/7;display:grid;grid-template-rows:subgrid} .icr-grp--how>.icr-list{grid-row:2/-1;display:grid;grid-template-rows:subgrid} } /* 700–1099: How we invest beneath the pair, two by two */ @media (min-width:700px) and (max-width:1099.98px){ .icr-body{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(7,auto)} .icr-grp.icr-grp--how{grid-column:1/-1;grid-row:7;margin-top:clamp(3.6rem,7vw,5rem)} .icr-grp--how>.icr-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--g)} } } /* ---------------------------------------------------------------- motion (JS + motion allowed only) */ @media (prefers-reduced-motion:no-preference){ /* the plate wipes up from its foot; the frame draws in, the grasses rise, the figure slides up */ .js .icr-plate.reveal .icr-plate__in{clip-path:inset(100% 0 0 0);transition:clip-path 1.15s cubic-bezier(.7,0,.2,1)} .js .icr-plate.reveal.is-in .icr-plate__in{clip-path:inset(0 0 0 0)} .js .icr-plate.reveal .icr-plate__in::before{opacity:0;transform:scale(.985);transition:opacity 1s var(--ease) .7s,transform 1.4s var(--ease-out) .7s} .js .icr-plate.reveal.is-in .icr-plate__in::before{opacity:1;transform:none} .js .icr-plate.reveal .icr-g{transform:scaleY(0);transition:transform 2s cubic-bezier(.2,.7,.2,1) calc(.55s + var(--d) * 1s)} .js .icr-plate.reveal.is-in .icr-g{transform:none} .js .icr-plate.reveal .icr-rise>span{transform:translateY(118%);opacity:0;transition:transform 1.2s var(--ease-out) .5s,opacity .8s var(--ease) .5s} .js .icr-plate.reveal.is-in .icr-rise>span{transform:none;opacity:1} .js .icr-plate.reveal .icr-fig__of,.js .icr-plate.reveal .icr-fig__cap{opacity:0;transform:translateY(12px);transition:opacity .9s var(--ease),transform 1.1s var(--ease-out)} .js .icr-plate.reveal .icr-fig__of{transition-delay:.85s} .js .icr-plate.reveal .icr-fig__cap{transition-delay:1.05s} .js .icr-plate.reveal.is-in .icr-fig__of,.js .icr-plate.reveal.is-in .icr-fig__cap{opacity:1;transform:none} /* the heads' ink rules and the items' hairlines draw left to right as they arrive (with the stagger's delay) */ .js .icr-h.reveal::after{transform:scaleX(0);transition:transform 1.3s var(--ease-out) .15s} .js .icr-h.reveal.is-in::after{transform:none} .js .icr-it.reveal::after{transform:scaleX(0);transition:transform 1.2s var(--ease-out);transition-delay:inherit} .js .icr-it.reveal.is-in::after{transform:none} } @media (prefers-reduced-motion:reduce){.icr-g{animation:none}} /* ---------------------------------------------------------------- phones */ /* below 700 (the columns' breakpoint) the head comes first: the plate sits under its rule, square to it, the group's first item, and "of EBITDA" stacks under the figure */ @media (max-width:699.98px){ .icr__head{margin-bottom:clamp(2.5rem,11vw,3rem)} .icr-lead{margin:clamp(1.3rem,5vw,1.8rem) 0 clamp(.4rem,2vw,.8rem)} /* client, 2026-10-13: on phones the plate comes first, straight under "Investment criteria.", and "What We Look For" then heads its four items. The list's box steps aside (display:contents) so the plate can be ordered before the head. */ .icr .icr-grp--look{display:grid;grid-template-columns:minmax(0,1fr)} .icr .icr-grp--look>.icr-list{display:contents} .icr .icr-grp--look .icr-lead{order:-1;grid-column:1/-1;margin:0 0 clamp(2rem,8vw,2.6rem)} .icr .icr-grp--look>.icr-h{grid-column:1/-1} .icr-plate__in{padding-bottom:clamp(4.4rem,20vw,5.6rem)} .icr-fig{flex-direction:column;align-items:center;row-gap:.5rem} .icr-fig__n{font-size:clamp(4rem,22vw,7rem)} .icr-fig__of{margin-left:0;font-size:clamp(1.6rem,7vw,2.1rem)} .icr-fig__cap{margin-top:1rem} } /* ---------------------------------------------------------------- 3. talk to our deal team (the form) */ /* the close of the network section (VI): an ink rule under the three columns, the invitation left and the form right (one column below 1000). Fields take the newsletter's cut: square, a hairline, teal on focus; labels sit above in the text cut, sentence case. The note goes to Netlify Forms (about.js); the deal team gets it by email. */ .icr-contact{ display:grid;gap:clamp(1.8rem,3.6vw,4.6rem); margin-top:clamp(4rem,8vw,7rem);padding-top:clamp(2.4rem,4.2vw,4rem); border-top:1px solid var(--ink); scroll-margin-top:calc(var(--hdr) + 1.5rem); } @media (min-width:1000px){.icr-contact{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}} .icr-contact__copy{display:grid;gap:clamp(.8rem,1.3vw,1.2rem);align-content:start} /* beside the form (two columns) the invitation sits in the middle of its column, both ways */ @media (min-width:1000px){.icr-contact{align-items:stretch}.icr-contact__copy{align-content:center;justify-items:center;text-align:center}} .icr-contact .d3 em{color:var(--teal)} .icr-contact__d{ margin:0;max-width:26em; font-size:clamp(1.0625rem,.9rem + .3vw,1.25rem);line-height:1.45;color:var(--ink-soft);text-wrap:pretty; } /* the form itself (.dt- rules) lives in form.css, shared with the Contact page */ /* ---------------------------------------------------------------- V. core values: engraved plates */ .vx{padding-block:clamp(4.5rem,8.5vw,8.5rem)} .vx .section-head{margin-bottom:clamp(2.4rem,4.2vw,4rem)} .vx__plates{ --p:1;--gc:15s;--gx:0s; list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.2vw,2.4rem); } .vx__plate{position:relative;display:grid;gap:clamp(1.1rem,1.8vw,1.6rem);align-content:start} .vx__art{ position:relative;aspect-ratio:5/6;overflow:hidden;container-type:inline-size; --u:1.2cqw; /* 1% of the plate's height */ border:1px solid var(--line-dark); background:radial-gradient(ellipse 70% 55% at 50% 58%,rgba(247,245,240,.045),transparent 70%); } .vx__art .g-i{opacity:.92;animation-name:g-sway,none} /* each plate's plant grows on its own window of --p (set inline), left to right. The plates aren't links: no hover. The numeral is the plate's number, set in the plate's top corner; the name is the caption beneath. */ .vx__cap{display:block;text-align:center} .vx__cap .idx{position:absolute;left:clamp(1rem,1.6vw,1.5rem);top:clamp(.8rem,1.4vw,1.3rem);font-family:var(--f-serif);font-optical-sizing:auto;font-weight:300;font-size:clamp(1.7rem,2.4vw,2.4rem);line-height:1;letter-spacing:0;color:var(--sage)} .vx__cap h3{font-family:var(--f-serif);font-optical-sizing:auto;font-weight:460;font-size:clamp(1.7rem,2.5vw,2.45rem);line-height:1.1;letter-spacing:-.02em;color:var(--paper)} @media (max-width:760px){ .vx__plates{grid-template-columns:1fr;gap:1.1rem} .vx__plate{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:1.3rem} .vx__cap{text-align:left} .vx__cap .idx{left:.75rem;top:.6rem;font-size:1.5rem} .vx__cap h3{font-size:clamp(1.6rem,7vw,2.1rem)} } /* ---------------------------------------------------------------- VI. the power of our network */ /* The network's part in a deal, in the criteria's cut (.icr-h heads over an ink rule, .icr-it items ruled in hairline): Connected Capital beside How We Help (six steps in two columns), level across the page from 900px (subgrid). Below that one column, in order. The step numerals are italic teal at 24px and up. The deal team form closes the section (.icr-contact). */ .rc{ --g:clamp(1.8rem,3.6vw,4.6rem); --icr-t:clamp(1.4rem,1.9vw,1.95rem); padding-block:clamp(4.5rem,8.5vw,8.5rem); } .rc__head{display:grid;gap:clamp(1rem,1.5vw,1.4rem);justify-items:center;text-align:center;margin-bottom:clamp(2.4rem,4.4vw,4.2rem)} .rc__head .d2{font-size:clamp(2.3rem,4vw,3.9rem);line-height:1.04} /* the line under the title: two even lines, broken after "executives" (client: "2 lines"), in the serif's statement cut a step up from body copy. Below 760px two lines can't hold, so it wraps freely, balanced. */ .rc__head .rc__lede{ max-width:none;margin:0; font-family:var(--f-serif);font-optical-sizing:auto;font-weight:400; font-size:clamp(1.12rem,1.45vw,1.5rem);line-height:1.45;letter-spacing:-.004em;color:var(--ink-soft); text-wrap:balance; } .rc-br{display:none} @media (min-width:760px){.rc-br{display:inline}.rc__head .rc__lede{white-space:nowrap;text-wrap:wrap}} .rc-grp h3,.rc-grp h4{margin:0} .rc-grp+.rc-grp{margin-top:clamp(3.2rem,9vw,4.4rem)} .rc-n{display:grid;grid-template-columns:clamp(2rem,2.7vw,2.9rem) minmax(0,1fr);align-items:baseline} .rc-n__i{ font-family:var(--f-serif);font-optical-sizing:auto;font-style:italic;font-weight:400; font-size:clamp(1.6rem,2.1vw,2.2rem);line-height:1;color:var(--teal); } /* How We Help: six steps, down two columns (1–3, 4–6) from 700px */ @media (min-width:700px){ .rc-grp--play .icr-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:var(--g)} } @supports (grid-template-rows:subgrid){ @media (min-width:900px){ /* three level columns: Connected Capital, then How We Help across the other two */ .rc-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,auto);column-gap:var(--g)} .rc-grp{grid-row:1/-1;display:grid;grid-template-rows:subgrid} .rc-grp+.rc-grp{margin-top:0} .rc-grp--sds .icr-list{grid-row:2/-1;display:grid;grid-template-rows:subgrid} .rc-grp--play{grid-column:2/-1;grid-template-columns:subgrid} .rc-grp--play>.icr-h{grid-column:1/-1} .rc-grp--play .icr-list{grid-row:2/-1;grid-column:1/-1;grid-template-columns:subgrid;grid-template-rows:subgrid} .rc .icr-h{font-size:clamp(1.5rem,2.3vw,2.75rem)} } } /* ---------------------------------------------------------------- VII. Rooted in Charlotte */ .cl__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2rem,5vw,6rem);align-items:center} .cl__copy{display:grid;gap:clamp(1.8rem,3.4vw,3rem);align-content:center} .cl__copy .d2{font-size:clamp(2.3rem,4vw,3.9rem);line-height:1.04} .cl__hq{display:grid;gap:.75rem;justify-items:start;padding-top:clamp(1.3rem,2vw,1.8rem);border-top:1px solid var(--line)} .cl__hq .mc-label{font-family:var(--f-serif);font-weight:var(--w-name);font-size:1.06rem;letter-spacing:0;color:var(--teal)} .cl__hq .mc-addr{margin:0;font-family:var(--f-serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(1.35rem,1.9vw,1.85rem);line-height:1.35;letter-spacing:-.01em;color:var(--ink)} .cl__hq .link-arrow{margin-top:.5rem} /* the map: roads and water in the image (tools/charlotte-map.mjs); the office pin in an inline overlay that scales with the map; the place names in HTML at one reading size whatever the map's width (pinned by % to the spot their SVG baselines used to mark), with a paper halo so the streets never cut through them */ .cl__map{position:relative;margin:0;border:1px solid var(--line);background:#F1EEE7;overflow:hidden} .cl__map>img{display:block;width:100%;height:auto} .cl__over{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .cl__places{position:absolute;inset:0;pointer-events:none} .cl__places span{ position:absolute;left:calc(var(--lx) * 1%);top:calc(var(--ly) * 1%);translate:-50% -84%;white-space:nowrap; font-family:var(--f-serif);font-optical-sizing:auto;font-style:italic;font-weight:460; font-size:1rem;line-height:1;letter-spacing:.005em;color:var(--ink-soft); text-shadow: 0 0 1px #F1EEE7,0 0 2px #F1EEE7,0 0 3px #F1EEE7, 1px 1px 0 #F1EEE7,-1px 1px 0 #F1EEE7,1px -1px 0 #F1EEE7,-1px -1px 0 #F1EEE7, 2px 0 1px #F1EEE7,-2px 0 1px #F1EEE7,0 2px 1px #F1EEE7,0 -2px 1px #F1EEE7; } .cl__hqpin{transform-box:fill-box;transform-origin:50% 100%} .cl__hqpin .ring{fill:var(--paper);stroke:var(--pine);stroke-width:2} .cl__hqpin .core{fill:var(--pine)} .cl__hqpin .pulse{fill:none;stroke:var(--teal);stroke-width:1.6;transform-box:fill-box;transform-origin:center;opacity:0} .cl__map.is-in .cl__hqpin .pulse,html:not(.js) .cl__hqpin .pulse{animation:cl-ring 3.4s var(--ease) 1s infinite} .cl__map.is-in .cl__hqpin .pulse--2,html:not(.js) .cl__hqpin .pulse--2{animation-delay:2.7s} @keyframes cl-ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(5.2);opacity:0}} /* on arrival the streets ink in outward from the office; the pin lands within half a second and starts to pulse; the place names follow the ink out. Without JS or with reduced motion it is simply drawn. */ @property --cl-r{syntax:'';inherits:false;initial-value:140%} .js .cl__map>img{ --cl-r:-24%; -webkit-mask-image:radial-gradient(circle at 51.2% 62.5%,#000 var(--cl-r),transparent calc(var(--cl-r) + 22%)); mask-image:radial-gradient(circle at 51.2% 62.5%,#000 var(--cl-r),transparent calc(var(--cl-r) + 22%)); transition:--cl-r 2.6s cubic-bezier(.45,.05,.25,1) .1s; } .js .cl__map.is-in>img{--cl-r:140%} .js .cl__hqpin{opacity:0;transform:translateY(-14px);transition:opacity .45s var(--ease) .2s,transform .8s var(--ease-out) .2s} .js .cl__map.is-in .cl__hqpin{opacity:1;transform:none} .js .cl__places{opacity:0;transition:opacity .9s var(--ease) 1s} .js .cl__map.is-in .cl__places{opacity:1} @media (max-width:900px){.cl__grid{grid-template-columns:1fr}} @media (max-width:560px){.cl__places span{font-size:.94rem}} /* ---------------------------------------------------------------- VII. closing (as on the homepage: home.css) */ .cta-band--split .inner{align-items:start;max-width:var(--wide)} @media (max-width:560px){ .cta-band--split .nl-form .btn{flex:1 1 100%;justify-content:center} } /* 4:3-ish screens (1024x768, iPad landscape): the canopies stand closer to the words, so the clearing opens wider */ @media (min-width:641px) and (max-aspect-ratio:3/2){ .hx .garden__veil{ background: linear-gradient(180deg,var(--paper) 0,rgba(247,245,240,.93) 6.5%,rgba(247,245,240,.5) 12%,var(--paper-0) 22%), radial-gradient(ellipse 36% 32% at 50% 30%,rgba(247,245,240,.97) 0,rgba(247,245,240,.84) 55%,var(--paper-0) 100%); } } /* tablets held upright: the statement keeps the homepage slogan's presence in the wide clearing */ @media (min-width:641px) and (max-width:900px) and (orientation:portrait){ .hx__title{font-size:clamp(3.4rem,9.6vw,5.6rem)} } /* ---------------------------------------------------------------- phones */ @media (max-width:640px){ .hx{--pin:22vh;--u:min(1vh,2.1vw)} @supports (height:100svh){.hx{--pin:22svh;--u:min(1svh,2.1vw)}} .hx .g-hide-sm{display:none} .hx .g-p{left:calc(var(--xs,var(--x)) * 1%);height:calc(var(--hs,var(--h)) * var(--u));bottom:calc(var(--bs,var(--b,0)) * var(--u))} .hx .g-leaf{left:calc(var(--xs,var(--x)) * 1%);top:calc(var(--ys,var(--y)) * 1%)} .hx__inner{padding-top:calc(var(--hdr) + clamp(2rem,8vh,4rem))} .hx__title{font-size:clamp(2.9rem,13.4vw,4.2rem)} .hx .garden__veil{ background: linear-gradient(180deg,var(--paper) 0,rgba(247,245,240,.9) 4%,var(--paper-0) 15%), radial-gradient(ellipse 70% 26% at 50% 27%,rgba(247,245,240,.97) 0,rgba(247,245,240,.82) 55%,var(--paper-0) 100%); } } /* ---------------------------------------------------------------- reduced motion: everything grown and still, no hold */ @media (prefers-reduced-motion:reduce){ .hx{--pi:1 !important;--ps:1 !important;height:var(--stage) !important;animation:none !important} .lt-garden,.vx__plates{--p:1 !important} .hx .garden__air{display:none} .hx-cue{display:none !important} .js .cl__map>img{-webkit-mask-image:none;mask-image:none} .js .cl__hqpin,.js .cl__places{opacity:1;transform:none;transition:none} .cl__hqpin .pulse{display:none} } /* ---------------------------------------------------------------- III. vines behind the letter Engraved morning-glory and scammony vines (Besler, Hortus Eystettensis, 1640: the same book as the letter's flower borders, recoloured to --pine the same way) grow out from behind the sheet and trail into the empty paper around it. They never touch the writing: they paint before the sheet (source order alone, like .lt-garden; no z-index), and are clipped away from the sheet's column entirely, so they show only where they pass beyond its top and side edges. .flv is a zero-height box set in the flow right before the sheet, with the sheet's own width and centring, so its top edge is the sheet's top edge and 0 / 100% are the sheet's left and right edges. Each vine (.flv-v) is placed by its attachment point, the spot on the engraving where the stem disappears behind the sheet, as fractions of the sprite's width (numbers from src/geom.py); --ox/--oy is that point, the pivot for the unfurl and the sway. No vine ever reaches past the page edge: each keeps --edge clear of it, and where the margin is too narrow for a vine it moves in behind the sheet rather than being cut off by the screen. Motion (the vines script, after main.js): each vine grows once it is on screen and the sheet has come in. It grows along its own stems, from where they leave the sheet out to the tips (a growth map per engraving times the reveal, src/growmap.py), while it unfurls a few degrees into place; both end together. Then it sways about a degree about its attachment point, out of phase, only while on screen. No JS, or prefers-reduced-motion: fully grown and still. If the script is missing, the vines fade in with the sheet's own reveal (:has(+ .fl-sheet.is-in)). */ .flv{ --fl-w:800px; /* the sheet's width (.fl-sheet max-width); vines.js keeps it true */ --fl-h:1415px; /* the sheet's height on desktop; vines.js keeps it true */ --m:max(var(--gutter,20px),(100vw - var(--fl-w)) / 2); /* the paper margin beside the sheet */ --edge:20px; /* every vine ends at least this far inside the page edge */ --wa:clamp(360px,var(--m) * 1.75,640px); /* sprite widths follow the margin */ --wb:clamp(96px,min(var(--m) * .95,(var(--m) - var(--edge)) / .8503),340px); --wc:clamp(140px,var(--m) * .82,260px); position:relative;height:0;max-width:var(--fl-w);margin-inline:auto;pointer-events:none; /* nothing is painted under the sheet at all: the vines are clipped to the paper above and beside it (the sheet's column is cut out to well below its foot), so no vine can show through the letter, not even while the sheet is still fading up on its reveal */ -webkit-clip-path:polygon(evenodd,-4000px -4000px,calc(100% + 4000px) -4000px,calc(100% + 4000px) 6000px,-4000px 6000px,-4000px -4000px,0 0,0 6000px,100% 6000px,100% 0,0 0); clip-path:polygon(evenodd,-4000px -4000px,calc(100% + 4000px) -4000px,calc(100% + 4000px) 6000px,-4000px 6000px,-4000px -4000px,0 0,0 6000px,100% 6000px,100% 0,0 0); } .flv-v{ position:absolute;display:block;height:auto; transform-origin:var(--ox) var(--oy); animation:flv-sway var(--sd,8s) ease-in-out var(--sdl,0s) infinite alternate; animation-play-state:paused; } .flv-v img{display:block;width:100%;height:auto} /* A · top-right corner: a morning-glory garland (Convolvulus, Nil Arabum) runs out over the corner, along the top edge and down the right margin, ending in a hanging tendril. Where the margin is narrower than its overhang, it slides in behind the sheet instead. */ .flv-a{--ox:58.06%;--oy:29.81%;--sd:9.5s;--amp:.55;--sdl:-4.75s;--gd:.2s;--gt:5s;--gk:26;--gr:-3deg; width:var(--wa);right:calc(-1 * min(var(--wa) * .4194,var(--m) - var(--edge)));top:calc(var(--wa) * -.176)} /* B · left edge, near the top: trumpets and a long hanging strand of heart leaves */ .flv-b{--ox:85.03%;--oy:8.11%;--sd:7.4s;--amp:.9;--sdl:-3.7s;--gd:.3s;--gt:5.4s;--gk:36;--gr:4deg; width:var(--wb);left:calc(var(--wb) * -.8503);top:var(--tb,120px)} /* C · right edge, halfway down: scammony, star flowers on twining stems. It keeps at least 120px of clear paper above the right-hand bed, whose flowers grow taller on taller screens: --bed is the top of the bed's tallest flower (the iris, --h:58 in the beds' unit, as .lt-garden sets it) below the sheet's top. */ .flv-c{--ox:10.62%;--oy:21.24%;--sd:6.3s;--amp:1.2;--sdl:-3.15s;--gd:.3s;--gt:4.8s;--gk:28;--gr:-4deg; --bu:min(1vh,12.5px,(100vw - 856px) / 50); --bed:calc(var(--fl-h) + clamp(72px,9vw,144px) - 58 * var(--bu)); width:var(--wc);left:calc(100% - var(--wc) * .1062); top:var(--tc,clamp(300px,var(--bed) - 120px - var(--wc) * 1.4266,480px))} /* the sway: --sdl is minus half its period, so it starts from upright (the grown pose) and the vines, each with its own period and starting as it finishes growing, soon drift out of phase. It runs only once the vine has grown (.is-done) and only while it is on screen (.is-live). */ @keyframes flv-sway{ from{rotate:calc(var(--amp,1) * -1deg)} to{rotate:calc(var(--amp,1) * 1deg)} } .flv-v.is-live.is-done{animation-play-state:running} /* growth (only when JS runs; without it the vines are simply there). Hidden until grown; vines.js then reveals the engraving along its stems (an SVG filter on the img, removed when done) over --gt, after --gd, while it unfurls from the pose below (--gr, 90%) on the same clock. --gk sets how soft the growing front is: it spans a --gk-th of the plant's length. */ .js .flv-v{opacity:0;scale:.9;transform:rotate(var(--gr,-3deg))} .js .flv-v.is-grown{opacity:1;scale:1;transform:none} /* no growth map (it failed to load): a plain fade on the same clock */ .js .flv-v.is-fade{transition:opacity var(--gt,3s) ease var(--gd,0s),scale var(--gt,3s) cubic-bezier(.37,0,.63,1) var(--gd,0s),transform var(--gt,3s) cubic-bezier(.37,0,.63,1) var(--gd,0s)} /* failsafe when vines.js is not running: fade in with the letter (or at once, if the sheet has no reveal) */ .js .flv:not(.is-armed):has(+ .fl-sheet:is(.is-in,:not(.reveal))) .flv-v{opacity:1;scale:1;transform:none;transition:opacity 1.6s ease .5s} /* where there is margin for them: all three from 1180px, the left strand from 1000px */ @media (max-width:1179.98px){.flv-c{display:none}} /* below 1000px there is no margin beside the sheet, only a gutter: the corner garland alone, lying along the band of paper above the sheet. Everything below the sheet's top edge is cut away across the whole width, so nothing shows as a sliver in the gutter; the garland simply passes behind the sheet's top. */ @media (max-width:999.98px){ .flv-b{display:none} .flv{ --wa:clamp(250px,72vw,430px);--edge:12px; -webkit-clip-path:inset(-4000px -4000px 0 -4000px);clip-path:inset(-4000px -4000px 0 -4000px); } .flv-a{right:calc(var(--edge) - var(--m))} } @media (prefers-reduced-motion:reduce){ .flv-v,.js .flv-v{opacity:1;scale:none;transform:none;transition:none;animation:none} .flv-v img{filter:none !important} }