/* Edward Einhorn — home page Source: Claude Design project "EDWARD EINHORN DOM COM" / "Edward Einhorn - Home Preview.html" Everything is scoped under .ee-hp so these styles can't leak into a host page (e.g. Squarespace). Fonts are loaded via in the page , not @import — see README. */ .ee-hp{ --paper:#F8F7F3;--panel:#FFFFFF;--ink:#1E1A16;--muted:#6B6258;--faint:#736C63; --blue:#3F86CE;--blue-2:#6FB0E6;--brick:#A6392B;--brick-ink:#8F3124; --rule:rgba(30,26,22,0.13);--rule-soft:rgba(30,26,22,0.07); --pad:clamp(20px,5vw,72px); background:var(--paper);color:var(--ink);font-family:"Newsreader",Georgia,serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;position:relative; } .ee-hp::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1' fill='%231E1A16' fill-opacity='0.16'/%3E%3C/svg%3E");background-position:6px 6px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,1) 0%,rgba(0,0,0,.6) 35%,rgba(0,0,0,.3) 65%,rgba(0,0,0,.14) 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,1) 0%,rgba(0,0,0,.6) 35%,rgba(0,0,0,.3) 65%,rgba(0,0,0,.14) 100%)} .ee-hp>.wrap,.ee-hp>section{position:relative;z-index:1} .ee-hp *,.ee-hp *::before,.ee-hp *::after{box-sizing:border-box} .ee-hp p,.ee-hp h1,.ee-hp h2,.ee-hp h3,.ee-hp figure{margin:0} .ee-hp img{display:block;max-width:100%} .ee-hp a{color:inherit;text-decoration:none} .ee-hp .sans{font-family:ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif} .ee-hp .wrap{max-width:1240px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);position:relative} .ee-hp .lbl{font-family:ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted)} /* The LIV page reuses this header on its own as a site nav bar (see build-liv.py). There, suppress the page-texture overlay — that page already draws its own, and two would stack up. */ .ee-hp--bar::before{display:none} /* The LIV page keeps its content in a sibling wrapper that paints after this header, so the Work dropdown was being covered by page content — only its top two items were clickable. Lift the whole bar above the page (LIV's own highest layer is the 60 on .liv-rail) so the menu is always on top. */ .ee-hp--bar{border-bottom:1px solid var(--rule-soft);position:relative;z-index:200} /* The home page header sits in its own .wrap so the hero below can go full-bleed. Both are direct children of .ee-hp and both carry z-index:1, and the hero paints later — which put the whole Work dropdown *behind* the video (0 of 6 items hittable). Lift the header's wrapper above its siblings. Stays far below the lightbox at 999. */ .ee-hp .wrap--hdr{z-index:60} /* ── Motion hero ───────────────────────────────────────────────────────────── A silent, controlless loop behind the headline (js/vhero.js). The markup ships a poster frame; the player is created in JS and faded in once it is loaded, so the hero is never empty and never jumps. When the script opts out — reduced motion, save-data, 2g — the poster simply stays and is the hero. */ .ee-hp .vhero{position:relative;min-height:clamp(300px,44vh,420px);display:flex;align-items:flex-end; overflow:hidden;background:#04101f} .ee-hp .vhero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .ee-hp .vhero__frame{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .9s ease} .ee-hp .vhero.is-playing .vhero__frame{opacity:1} /* Cover-fill a 16:9 player into a container of any shape without letterboxing. */ .ee-hp .vhero__frame iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;border:0;pointer-events:none} /* Set by vhero.js when it loads a 9x16 cut, so the player box is portrait too. */ .ee-hp .vhero--portrait .vhero__frame iframe{width:100vw;height:177.78vw; min-height:100%;min-width:56.25vh} .ee-hp .vhero::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(2,10,22,.34) 0%,rgba(2,10,22,.26) 38%,rgba(2,10,22,.92) 100%)} .ee-hp .vhero__cap{position:relative;z-index:2;width:100%; padding:0 var(--pad) clamp(24px,6vw,40px)} .ee-hp .vhero .kick{color:rgba(255,255,255,.86)} .ee-hp .vhero .h1{color:#fff;margin-top:clamp(12px,1.4vw,20px)} /* The gradient headline words are tuned for cream paper; lift them for video. */ .ee-hp .vhero .h1 .b{background:linear-gradient(92deg,#8cc4f2,#c9e3fa); -webkit-background-clip:text;background-clip:text;color:transparent;animation:none} /* The LIV case study reuses the hero as a title sequence: a film band with no text over it, above the page's own designed hero. .ee-hp--plain is a bare scope so the .vhero rules apply without dragging in the paper background and dot texture, which that page draws itself. */ .ee-hp--plain{background:none} .ee-hp--plain::before{display:none} .ee-hp .vhero.vhero--band{min-height:clamp(160px,26vh,300px);align-items:stretch} /* No headline to protect, so only enough gradient to seat it against the page. */ .ee-hp .vhero.vhero--band::after{background:linear-gradient(180deg,rgba(2,10,22,.10) 0%,rgba(2,10,22,0) 45%,rgba(2,10,22,.30) 100%)} /* Bound to both classes so it outranks the generic .vhero height set later. */ @media(min-width:601px){.ee-hp .vhero.vhero--band{min-height:clamp(180px,24vh,280px)}} /* The pipeline sits on paper just under the film, where it has contrast. */ .ee-hp .vhero-pipe{padding:0 var(--pad)} .ee-hp .vhero-pipe .hpipe{margin-top:clamp(22px,3vw,38px)} @media(min-width:601px){ /* Capped, not just proportional: an uncapped vh grows forever on a tall monitor, which is what made this feel enormous on desktop. It still needs enough room for three lines of headline plus the kicker. */ .ee-hp .vhero{min-height:clamp(320px,38vh,420px)} /* Smaller than the old page headline: at full size it filled the shorter hero edge to edge, leaving the kicker almost touching the top of frame. */ /* No ch cap: the headline's line breaks are authored with
(after "campaigns," and after "from"), so the copy controls its own three lines instead of a width forcing ragged greedy wraps. */ .ee-hp .vhero .h1{max-width:none;font-size:clamp(27px,3vw,42px)} } /* header */ .ee-hp .hdr{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-top:clamp(22px,3vw,34px);padding-bottom:clamp(20px,2.4vw,30px);flex-wrap:wrap} .ee-hp .brand{line-height:1} .ee-hp .brand__n{font-weight:700;font-size:clamp(26px,3vw,34px);letter-spacing:-0.01em;background:linear-gradient(92deg,var(--blue),var(--blue-2));-webkit-background-clip:text;background-clip:text;color:transparent} .ee-hp .brand__t{font-family:ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink);margin-top:7px} .ee-hp .nav{display:flex;gap:clamp(20px,2.6vw,40px);font-family:ui-sans-serif,system-ui,Arial,sans-serif;font-size:12.5px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase} .ee-hp .nav a{color:var(--ink);padding-bottom:2px;border-bottom:1.5px solid transparent;transition:color .2s,border-color .2s} .ee-hp .nav a:hover{color:var(--brick);border-color:var(--brick)} .ee-hp .nav__item{position:relative;display:inline-flex} .ee-hp .nav__item>a::after{content:"";display:inline-block;width:5px;height:5px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s} .ee-hp .nav__item:hover>a::after,.ee-hp .nav__item:focus-within>a::after{transform:translateY(0) rotate(225deg)} .ee-hp .nav__menu{position:absolute;top:100%;left:0;margin-top:12px;display:flex;flex-direction:column;min-width:150px;background:var(--panel);border:1px solid var(--rule);box-shadow:0 14px 34px -14px rgba(30,26,22,.28);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:20} .ee-hp .nav__item:hover .nav__menu,.ee-hp .nav__item:focus-within .nav__menu,.ee-hp .nav__item.is-open .nav__menu{opacity:1;visibility:visible;transform:translateY(0)} .ee-hp .nav__menu a{border-bottom:none;padding:9px 12px;letter-spacing:0.14em;color:var(--ink);white-space:nowrap} .ee-hp .nav__menu a:hover{color:var(--brick);background:var(--paper)} .ee-hp .nav__grp{display:block;padding:11px 12px 5px;margin-top:4px;border-top:1px solid var(--rule-soft);font-family:ui-sans-serif,system-ui,Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--faint)} /* BUGFIX: a literal "\n" was pasted in front of this rule in the design source. CSS treats that stray token as garbage and silently discards the rule that follows it — which is this one — so the "Featured" heading in the Work dropdown wrongly showed a top border and margin. */ .ee-hp .nav__grp--first{margin-top:0;border-top:none;padding-top:6px} /* js/nav.js injects a "More" heading as a direct child of .nav for the mobile panel. The desktop nav is a horizontal row, so keep it out of there — the mobile block below turns it back on. */ .ee-hp .nav>.nav__grp{display:none} .ee-hp .nav__sub{font-size:11.5px;padding-top:7px;padding-bottom:7px;color:var(--muted)} .ee-hp .nav__menu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px} /* hero */ .ee-hp .hero{padding-top:clamp(18px,3vw,40px)} .ee-hp .hero__top{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,64px);align-items:center} .ee-hp .kick{display:inline-flex;align-items:center;gap:11px;font-family:ui-sans-serif,system-ui,Arial,sans-serif;font-size:12.5px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted)} .ee-hp .kick::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brick);flex:0 0 auto} /* The kicker opened with a red dot and then used typographic middle dots between the words - two different marks doing much the same job. Same circle throughout, a shade smaller between words so the leading dot still reads as the start of the line rather than a fourth item. .kick is a flex row, so its own gap does the spacing; no margin needed here. */ .ee-hp .kick__dot{width:6px;height:6px;border-radius:50%;background:var(--brick);flex:0 0 auto} .ee-hp .h1{font-size:clamp(30px,4.4vw,58px);line-height:1.08;letter-spacing:-0.02em;font-weight:500;margin-top:clamp(16px,2vw,26px)} .ee-hp .h1 .b{background:linear-gradient(92deg,var(--blue),var(--blue-2));-webkit-background-clip:text;background-clip:text;color:transparent} .ee-hp .h1 em{font-style:italic} @media(prefers-reduced-motion:no-preference){ .ee-hp .h1 .b{background:linear-gradient(92deg,var(--blue),var(--blue-2),var(--brick),var(--blue));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;animation:eeHue 9s ease-in-out infinite} .ee-hp .h1 .b:nth-of-type(2){animation-delay:-3s} .ee-hp .h1 .b:nth-of-type(3){animation-delay:-6s} } @keyframes eeHue{0%,100%{background-position:0% 0}50%{background-position:100% 0}} /* ── "concept" / "delivery" — each word arrives as an icon that becomes the word. "concept": an idea forms in a head, lifts out and bursts into the letters. "delivery": a truck drives across and drops each letter behind it. The markup is built by js/herofx.js, so with JS off — or with reduced motion — these stay plain italic words. The wrapper reserves the word's exact width, so the headline never reflows while animating. ── */ .ee-hp .hfx{position:relative;display:inline-block;white-space:nowrap} .ee-hp .hfx__word{display:inline-block} .ee-hp .hfx__word .l{display:inline-block;opacity:0;transform:translateY(.18em);will-change:transform,opacity} .ee-hp .hfx__icon{position:absolute;left:0;top:50%;translate:0 -50%;display:flex;align-items:center; pointer-events:none;color:inherit;font-style:normal} .ee-hp .hfx__icon svg{display:block;overflow:visible} .ee-hp .hfx svg .s{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} /* the "lit" idea uses the house accent, not a one-off colour */ .ee-hp .hfx svg .lit{stroke:var(--brick)} .ee-hp .hfx .pop line{stroke:var(--brick);stroke-width:1.6;stroke-linecap:round} @keyframes hfxLetter{to{opacity:1;transform:translateY(0)}} @keyframes hfxDraw{to{stroke-dashoffset:0}} @keyframes hfxFade{to{opacity:0}} @keyframes hfxGlow{0%,100%{filter:none}55%{filter:drop-shadow(0 0 9px rgba(166,57,43,.9))}} /* --brick */ @keyframes hfxRise{0%{transform:translateY(0) scale(1)}60%{transform:translateY(-13px) scale(1.1)} 100%{transform:translateY(-17px) scale(.2);opacity:0}} @keyframes hfxBurst{0%{opacity:0;transform:scale(.2)}45%{opacity:1;transform:scale(1.3)}100%{opacity:0;transform:scale(2)}} @keyframes hfxDrive{from{transform:translateX(0)}to{transform:translateX(var(--dist,300px))}} @keyframes hfxBump{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2px)}} @keyframes hfxZip{0%{opacity:.7;transform:translateX(4px)}100%{opacity:0;transform:translateX(-12px)}} .ee-hp .hfx.go .hfx__word .l{animation:hfxLetter .34s cubic-bezier(.2,.7,.3,1) forwards} /* "through" waits its turn between the two words. Only hidden once js/herofx.js has marked the headline (.hfx-seq) — with JS off it is just a normal word. */ .ee-hp .hfx-seq .hfx-through{display:inline-block;opacity:0;transform:translateY(.18em)} .ee-hp .hfx-seq .hfx-through.on{animation:hfxLetter .34s cubic-bezier(.2,.7,.3,1) forwards} /* concept — the idea escapes the head */ .ee-hp .hfx--concept .head .s{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)} .ee-hp .hfx--concept .bulb .s{stroke-dasharray:26;stroke-dashoffset:26} .ee-hp .hfx--concept.go .head .s{animation:hfxDraw .55s ease forwards} .ee-hp .hfx--concept.go .bulb .s{animation:hfxDraw .34s .54s ease forwards} .ee-hp .hfx--concept.go .bulb{transform-box:fill-box;transform-origin:center; animation:hfxGlow .4s .88s ease both, hfxRise .5s 1.06s cubic-bezier(.4,0,.2,1) forwards} .ee-hp .hfx--concept.go .head{animation:hfxFade .3s 1.12s ease forwards} .ee-hp .hfx--concept.go .pop{transform-box:fill-box;transform-origin:center;animation:hfxBurst .34s 1.46s ease both} .ee-hp .hfx--concept.go .hfx__word .l{animation-delay:calc(1.54s + var(--i)*.03s)} /* delivery — the truck drops each letter behind it */ .ee-hp .hfx--delivery .hfx__icon{left:-.35em} /* wheels and speed lines must read on whatever sits behind the headline (the hero photo, not paper), so they take the headline's own colour rather than fixed ones */ .ee-hp .hfx--delivery .wheel{fill:none;stroke:currentColor;stroke-width:1.6} .ee-hp .hfx--delivery .lines line{stroke:currentColor;stroke-width:1.4;opacity:0} .ee-hp .hfx--delivery.go .truck{animation:hfxDrive 1.25s cubic-bezier(.35,0,.3,1) forwards, hfxFade .25s 1.15s ease forwards} .ee-hp .hfx--delivery.go .truck .body{animation:hfxBump .16s linear 8} .ee-hp .hfx--delivery.go .lines line{animation:hfxZip .4s linear infinite} .ee-hp .hfx--delivery.go .lines line:nth-child(2){animation-delay:.13s} .ee-hp .hfx--delivery.go .lines line:nth-child(3){animation-delay:.26s} .ee-hp .hfx--delivery.go .hfx__word .l{animation-delay:calc(.28s + var(--i)*.072s)} /* hero pipeline motif (slender, under headline) */ .ee-hp .hpipe{position:relative;height:70px;max-width:660px;margin-top:clamp(24px,3vw,40px)} .ee-hp .hpipe__base{position:absolute;left:0;right:52px;top:18px;height:1.5px;background:var(--rule)} .ee-hp .hpipe__fill{position:absolute;left:0;top:18px;height:1.5px;width:0;background:linear-gradient(90deg,var(--blue),var(--blue-2))} .ee-hp .hpipe__node{position:absolute;top:18px;transform:translate(-50%,-50%)} .ee-hp .hpipe__node .ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--paper);color:#c0b8ac;transition:color .3s,box-shadow .3s,transform .3s} .ee-hp .hpipe__node .ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s} /* the glyph itself kicks when its stage fires, then keeps a gentle idle bob */ .ee-hp .hpipe__node.on .ic svg:not(.hpipe__plane){animation:hglyph .55s cubic-bezier(.3,1.7,.4,1) both, hbob 3.2s ease-in-out .55s infinite} @keyframes hglyph{0%{transform:scale(.7) rotate(-12deg)}50%{transform:scale(1.28) rotate(6deg)}100%{transform:scale(1) rotate(0)}} @keyframes hbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}} .ee-hp .hpipe__node .lbl{position:absolute;top:34px;left:50%;transform:translateX(-50%);font-family:ui-sans-serif,system-ui,Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);white-space:nowrap;transition:color .3s} .ee-hp .hpipe__node .ic{position:relative} /* each stage fires with an overshoot pop + a ripple ring as the head passes */ .ee-hp .hpipe__node.on .ic{color:var(--blue);box-shadow:0 0 0 3px rgba(63,134,206,.16); animation:hpop .5s cubic-bezier(.3,1.7,.4,1) both} .ee-hp .hpipe__node.on .ic::after{content:"";position:absolute;inset:-2px;border-radius:50%; border:1.5px solid var(--blue);animation:hring .55s ease-out both} .ee-hp .hpipe__node.on .lbl{color:var(--ink);animation:htick .4s cubic-bezier(.3,1.5,.5,1)} @keyframes hpop{0%{transform:scale(1)}45%{transform:scale(1.42)}100%{transform:scale(1.16)}} @keyframes hring{0%{transform:scale(.7);opacity:.9}100%{transform:scale(2.1);opacity:0}} @keyframes htick{0%{transform:translateX(-50%) translateY(0)}40%{transform:translateX(-50%) translateY(-4px)}100%{transform:translateX(-50%) translateY(0)}} .ee-hp .hpipe__tail{position:absolute;top:18px;height:1.5px;width:56px;transform:translateY(-50%);background:linear-gradient(90deg,rgba(166,57,43,0),rgba(166,57,43,.55));pointer-events:none;opacity:0} .ee-hp .hpipe__head{position:absolute;top:18px;left:0;width:13px;height:13px;background:var(--brick);transform:translate(-50%,-50%) rotate(calc(45deg + var(--hrot,0deg))) scale(var(--hs,1));box-shadow:0 0 14px 2px rgba(166,57,43,.55),0 4px 12px -3px rgba(166,57,43,.7);z-index:2;transition:opacity .35s ease} /* on delivery the comet has arrived — fade it so it never sits on top of the launching plane (it used to park, enlarged, right over the endpoint) */ .ee-hp .hpipe.hit .hpipe__head{opacity:0} /* ── Delivery endpoint ─────────────────────────────────────────────────────── The last node IS the destination now (the separate target circle is gone). On delivery its circle goes brick-red and pulses, two rings emanate outward on a loop, and the paper plane bursts into a squadron (spawned in js/home.js) that scatters off the edges — one deliverable dispatched across every channel. */ /* the endpoint stays a modest red dot — the delivery is the planes launching out, not a big radiating red circle (which overpowered the frame and swallowed them) */ .ee-hp .hpipe.hit .hpipe__node--deliver .ic{background:var(--brick);color:#fff; box-shadow:0 0 0 2px rgba(166,57,43,.12); animation:hdeliver .5s cubic-bezier(.3,1.6,.4,1) both} @keyframes hdeliver{0%{transform:scale(1)}50%{transform:scale(1.14)}100%{transform:scale(1)}} /* the endpoint keeps its white plane so the delivered dot always reads; the flying clone launches on top as the flourish, then clears — leaving this one */ .ee-hp .hpipe.hit .hpipe__node--deliver .ic>svg:not(.hpipe__plane){opacity:1;animation:none} /* The single paper plane. The high-specificity selector (.ic svg.hpipe__plane) is deliberate: the generic `.ic svg` rules set size/stroke/animation and would otherwise force the clone to 18px and steal its flight — this beats them. It's a child of .ic so it always paints above the red dot; z-index keeps it above the rest. color drives the inherited stroke:currentColor to blue. */ .ee-hp .hpipe__node .ic svg.hpipe__plane{ position:absolute;left:50%;top:50%;width:26px;height:26px; color:var(--blue);fill:none;stroke:var(--blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; transform:translate(-50%,-50%);pointer-events:none;z-index:20; animation:hfly 3.4s cubic-bezier(.17,.67,.32,1) forwards} /* ONE continuous glide — a single straight, shallow diagonal to the upper right with one smooth deceleration (ease-out). No intermediate waypoints (they made it stutter) and a fixed heading (no rotation wobble). Fades only at the end. */ @keyframes hfly{ 0%{transform:translate(-50%,-50%) scale(.85) rotate(-3deg);opacity:0} 12%{opacity:1} 85%{opacity:1} 100%{transform:translate(calc(-50% + 230px),calc(-50% - 58px)) scale(1.08) rotate(-3deg);opacity:0}} @media(prefers-reduced-motion:reduce){ .ee-hp .hpipe__head,.ee-hp .hpipe__tail{display:none} .ee-hp .hpipe__node.on .lbl{animation:none} /* static red endpoint with its plane, no squadron */ .ee-hp .hpipe.hit .hpipe__node--deliver .ic{animation:none} .ee-hp .hpipe.hit .hpipe__node--deliver .ic>svg:not(.hpipe__plane){opacity:1} } @media(max-width:520px){.ee-hp .hpipe__node .lbl{font-size:8px;letter-spacing:.06em}} /* buttons */ .ee-hp .btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,3.4vw,44px)} .ee-hp .btn{font-family:ui-sans-serif,system-ui,Arial,sans-serif;font-size:12.5px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;padding:15px 26px;border:1.5px solid var(--brick);transition:background .22s,color .22s;cursor:pointer;display:inline-block} .ee-hp .btn--fill{background:var(--brick);color:#fff} .ee-hp .btn--fill:hover{background:var(--brick-ink);border-color:var(--brick-ink)} .ee-hp .btn--out{background:transparent;color:var(--brick)} .ee-hp .btn--out:hover{background:var(--brick);color:#fff} /* section label */ /* Section headings sit in a solid pill. Colours come from --ink/--paper, which the night palette (.ee-hp--night) swaps — so this is a dark pill with cream type on the light pages and a cream pill with dark type on the dark ones, from one rule. */ .ee-hp .seclbl{display:inline-block;margin-top:clamp(24px,3vw,40px);margin-bottom:clamp(20px,2.4vw,30px); font-size:11px;font-weight:800;letter-spacing:.2em;line-height:1;color:var(--paper);background:var(--ink); padding:11px 20px;border-radius:7px} @media(max-width:520px){.ee-hp .seclbl{padding:9px 15px;letter-spacing:.14em}} /* featured leadership */ .ee-hp .lead{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,34px)} .ee-hp .lcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--rule-soft);transition:box-shadow .25s,transform .25s} .ee-hp .lcard:hover{box-shadow:0 22px 50px -26px rgba(30,26,22,0.4);transform:translateY(-3px)} .ee-hp .lcard__art{position:relative;aspect-ratio:2/1;overflow:hidden;background:#10241b} .ee-hp .lcard__art img{width:100%;height:100%;object-fit:cover} .ee-hp .lcard__art img.lcard__logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(64%,350px);height:auto;object-fit:contain;z-index:2;filter:drop-shadow(0 4px 20px rgba(0,0,0,0.55))} .ee-hp .lcard__art:not(.lcard__art--hbo)::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.12),rgba(0,0,0,0.34));z-index:1} /* HBO's mark sits smaller than LIV's, and now over artwork — so it keeps the shadow */ .ee-hp .lcard__art img.lcard__logo--hbo{width:min(38%,190px)} .ee-hp .lcard__art--hbo{background:#161311;display:flex;align-items:center;justify-content:center} .ee-hp .lcard__body{padding:clamp(20px,2vw,30px)} .ee-hp .lcard__t{font-size:clamp(24px,2.4vw,32px);font-weight:600;letter-spacing:-0.01em;line-height:1} .ee-hp .lcard__role{font-family:ui-sans-serif,system-ui,Arial,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--brick);margin-top:10px} .ee-hp .lcard__d{color:var(--muted);font-size:clamp(15px,1.15vw,17px);line-height:1.55;margin-top:16px} .ee-hp .lcard__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;padding-top:20px;border-top:1px solid var(--rule-soft)} .ee-hp .lcard__stats .s{padding-left:14px;border-left:1px solid var(--rule)} .ee-hp .lcard__stats .s:first-child{padding-left:0;border-left:none} .ee-hp .lcard__stats .sv{font-size:clamp(18px,1.7vw,22px);font-weight:600;line-height:1} .ee-hp .lcard__stats .sl{font-family:ui-sans-serif,system-ui,Arial,sans-serif;font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-top:7px;line-height:1.35} /* "Selected work includes" — the HBO card lists titles instead of stats */ .ee-hp .lcard__incl{margin-top:22px;padding-top:20px;border-top:1px solid var(--rule-soft)} .ee-hp .lcard__incl .k{font-family:ui-sans-serif,system-ui,Arial,sans-serif;font-size:10px;font-weight:600; letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)} .ee-hp .lcard__incl .v{font-size:clamp(15px,1.15vw,17px);line-height:1.55;margin-top:9px} .ee-hp .lcard__cta{margin-top:auto;padding:0 clamp(20px,2vw,30px) clamp(20px,2vw,30px)} .ee-hp .lcard__cta span{font-family:ui-sans-serif,system-ui,Arial,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:8px} .ee-hp .lcard:hover .lcard__cta span{color:var(--brick)} .ee-hp .lcard__cta span::after{content:"→";transition:transform .25s} .ee-hp .lcard:hover .lcard__cta span::after{transform:translateX(4px)} /* editorial grid */ /* Section label + carousel controls share a line, so the arrows read as belonging to the row below them. */ .ee-hp .seclbl-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .ee-hp .egrid__nav{display:flex;gap:8px;margin-bottom:clamp(20px,2.4vw,30px);margin-top:clamp(24px,3vw,40px)} .ee-hp .egrid__btn{width:34px;height:34px;flex:0 0 auto;border:1.5px solid var(--rule);background:transparent; border-radius:50%;cursor:pointer;padding:0;display:grid;place-items:center;color:var(--ink); transition:border-color .2s,color .2s,background .2s,opacity .2s} .ee-hp .egrid__btn::before{content:"";width:7px;height:7px;border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor} .ee-hp .egrid__btn[data-dir="-1"]::before{transform:rotate(135deg);margin-left:3px} .ee-hp .egrid__btn[data-dir="1"]::before{transform:rotate(-45deg);margin-right:3px} .ee-hp .egrid__btn:hover{border-color:var(--brick);color:var(--brick)} .ee-hp .egrid__btn:disabled{opacity:.28;cursor:default} .ee-hp .egrid__btn:disabled:hover{border-color:var(--rule);color:var(--ink)} /* The wrapper stays as the carousel's positioning context; the arrows on the section label carry the "there's more" signal on their own. */ .ee-hp .egrid-wrap{position:relative} /* Editorial row: still five across, but it now holds more than fits and cycles. A scroll container rather than a grid, so it also swipes on touch and stays keyboard-reachable; js/carousel.js nudges it along. Tiles are unchanged. */ .ee-hp .egrid{--egap:clamp(12px,1.3vw,18px);--ecols:5; display:flex;gap:var(--egap);overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;scroll-behavior:smooth; scrollbar-width:none;-ms-overflow-style:none; padding-bottom:2px;overscroll-behavior-x:contain} .ee-hp .egrid::-webkit-scrollbar{display:none} .ee-hp .egrid>.etile{flex:0 0 calc((100% - (var(--ecols) - 1)*var(--egap))/var(--ecols)); scroll-snap-align:start} @media(prefers-reduced-motion:reduce){.ee-hp .egrid{scroll-behavior:auto}} .ee-hp .etile{display:block} .ee-hp .etile__art{position:relative;aspect-ratio:16/9;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center} /* tiles currently use CSS gradients; this rule is here for when real thumbnails are dropped in */ .ee-hp .etile__art img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0} .ee-hp .etile__title{position:relative;z-index:1;font-family:ui-sans-serif,system-ui,Arial,sans-serif;font-weight:800;font-size:clamp(13px,1.3vw,18px);letter-spacing:0.03em;text-transform:uppercase;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,0.5);padding:0 10px;line-height:1.1} .ee-hp .etile__play{position:absolute;z-index:2;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.16);border:1.5px solid rgba(255,255,255,0.8);display:grid;place-items:center;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .25s} .ee-hp .etile:hover .etile__play{opacity:1} .ee-hp .etile__play::before{content:"";border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px} .ee-hp .etile__meta{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin-top:12px} .ee-hp .etile__role{font-family:ui-sans-serif,system-ui,Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:0.06em;color:var(--muted)} .ee-hp .etile__net{font-family:ui-sans-serif,system-ui,Arial,sans-serif;font-size:11px;font-weight:800;letter-spacing:0.04em;color:var(--ink)} /* logo ticker (static row — the scrolling variant was switched off in the design) */ .ee-hp .ticker{position:relative;overflow:hidden;margin-top:clamp(40px,5vw,64px);padding:clamp(22px,2.8vw,34px) 0;border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)} .ee-hp .ticker__row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;width:100%;gap:clamp(12px,2vw,26px)} .ee-hp .ticker__row span{font-family:ui-sans-serif,system-ui,Arial,sans-serif;font-weight:800;font-size:clamp(13px,1.4vw,17px);letter-spacing:0.02em;color:var(--faint);padding:0 clamp(24px,3vw,48px);white-space:nowrap;transition:color .2s} .ee-hp .ticker__row span:hover{color:var(--muted)} @media(prefers-reduced-motion:reduce){.ee-hp .ticker__row{flex-wrap:wrap;justify-content:center;width:auto;gap:10px 0}} /* closing */ .ee-hp .close{background:var(--panel);border-top:1px solid var(--rule-soft);margin-top:clamp(56px,7vw,90px)} .ee-hp .close__in{display:grid;grid-template-columns:1.1fr 1fr auto;gap:clamp(24px,3vw,50px);align-items:center;padding-top:clamp(40px,5vw,66px);padding-bottom:clamp(40px,5vw,66px)} .ee-hp .close__h{font-size:clamp(26px,3vw,42px);line-height:1.08;letter-spacing:-0.015em;font-weight:500} .ee-hp .close__c{color:var(--muted);font-size:clamp(15px,1.2vw,18px);line-height:1.55} .ee-hp .close__c .cbtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px} .ee-hp .social{display:flex;gap:12px} .ee-hp .social a{width:42px;height:42px;background:var(--ink);color:var(--paper);display:grid;place-items:center;transition:background .2s} .ee-hp .social a:hover{background:var(--brick)} .ee-hp .social svg{width:19px;height:19px;fill:currentColor} /* Short pages (Promos is barely a screen) left the footer floating with blank space beneath it on a tall monitor, which reads as a broken page rather than a short one. Push it to the bottom when the content does not fill the view. */ body{display:flex;flex-direction:column;min-height:100vh} body>*:has(>.sitefoot){margin-top:auto} /* Category page masthead: the LIV mark top-left, mirroring the pager at the foot of the page. The arrow keeps the "back" affordance the text link had — a lone logo reads as a badge, not as a way out. */ .livtop{display:flex;align-items:center;gap:clamp(8px,1vw,13px); padding-bottom:clamp(10px,1.6vw,20px)} .livtop__home{display:inline-flex;align-items:center;gap:clamp(8px,1vw,13px); text-decoration:none;transition:opacity .2s} .livtop__home:hover{opacity:.68} .livtop__arrow{font-family:ui-sans-serif,system-ui,Arial,sans-serif;font-size:15px; font-weight:700;color:var(--oxblood,#7B2D26);line-height:1} .livtop__home img{width:clamp(96px,10vw,132px);height:auto;display:block} @media(max-width:600px){.livtop__home img{width:92px}} /* Category page pager. The first version was an 11px uppercase line that disappeared at the bottom of the page — at the point where a visitor has finished a section, the next move should be the loudest thing on screen. The LIV mark sits on the left and is the way back to the hub, so the row reads as "you are in LIV Golf; here is where you go next". */ .livpager{border-top:1px solid rgba(30,26,22,.13);margin-top:clamp(30px,4vw,54px); display:grid;grid-template-columns:auto 1fr;align-items:center; gap:clamp(16px,2.4vw,40px);padding:clamp(20px,2.6vw,30px) 0 clamp(40px,5vw,72px)} .livpager__home{display:block;flex:0 0 auto} .livpager__home img{width:clamp(104px,11vw,150px);height:auto;display:block; transition:opacity .2s} .livpager__home:hover img{opacity:.72} .livpager__links{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px)} .livpager__a{display:flex;flex-direction:column;gap:7px;padding:clamp(16px,1.8vw,22px); background:#fff;border:1px solid rgba(30,26,22,.08);text-decoration:none; transition:box-shadow .22s,transform .22s,border-color .22s} .livpager__a,.livpager__a *{text-decoration:none} .livpager__a:hover{box-shadow:0 18px 40px -24px rgba(30,26,22,.4);transform:translateY(-2px); border-color:rgba(30,26,22,.18)} .livpager__a--next{text-align:right;align-items:flex-end} /* first and last sections have only one neighbour — let the single card fill the row rather than leaving a visibly empty cell beside it */ .livpager__a:only-of-type{grid-column:1 / -1} .livpager__k{font-family:ui-sans-serif,system-ui,Arial,sans-serif;font-size:10px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:#9A9186} .livpager__t{font-family:"Newsreader",Georgia,serif;font-size:clamp(20px,2.2vw,28px); font-weight:600;letter-spacing:-.01em;line-height:1.05;color:#1E1A16} .livpager__a:hover .livpager__t{color:var(--oxblood,#7B2D26)} .livpager__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media(max-width:600px){ .livpager{grid-template-columns:1fr;gap:16px} .livpager__links{grid-template-columns:1fr} .livpager__a--next{text-align:left;align-items:flex-start} } /* LIV hub category cards (mockups/liv2*.html). Kept with the rest of the shared styles so the hub can move to the live page without a private sheet. */ .livgrid{display:grid;gap:clamp(12px,1.5vw,20px); grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:clamp(14px,2vw,22px)} /* These cards live inside .ee-lp, whose link reset only covers `a.m` and `.close__foot a` — so they fell through to the browser default and rendered as blue underlined links. Reset explicitly rather than relying on the scope. */ .livcard{display:block;background:#fff;border:1px solid rgba(30,26,22,.08); text-decoration:none;color:inherit; transition:box-shadow .25s,transform .25s} .livcard,.livcard *{text-decoration:none} .livcard:hover{box-shadow:0 20px 44px -24px rgba(30,26,22,.4);transform:translateY(-3px)} .livcard__art{position:relative;aspect-ratio:16/9;overflow:hidden;background:#10241b} .livcard__art img{width:100%;height:100%;object-fit:cover} .livcard__art::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.42))} .livcard__n{position:absolute;left:11px;top:9px;z-index:2; font-family:ui-sans-serif,system-ui,Arial,sans-serif;font-size:10px;font-weight:700; letter-spacing:.14em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7)} .livcard__body{padding:clamp(13px,1.3vw,18px)} .livcard__t{font-family:"Newsreader",Georgia,serif;font-size:clamp(19px,1.6vw,23px); font-weight:600;letter-spacing:-.01em;line-height:1.1} .livcard__d{color:#6B6258;font-size:13.5px;line-height:1.5;margin-top:7px} /* On a phone the four category cards stack, and a description under each turns the hub into a text column. The thumbnail + category name is enough to tap; the descriptions are a desktop nicety. */ @media(max-width:600px){.livcard__d{display:none}.livcard__body{padding:12px 14px}} /* ── Site footer ───────────────────────────────────────────────────────────── Every page except the home page ended without one: no way onward, no copyright, nothing. This is the compact version — the home page keeps its larger closing block. Built from tokens so it inverts on the night pages. */ .ee-hp .sitefoot{background:var(--panel);border-top:1px solid var(--rule-soft); margin-top:clamp(48px,6vw,80px)} /* Three tracks so the links sit centred in the row itself, not merely after the name — the outer columns are equal, so the middle stays centred on the page whatever width the name or the icons take. */ .ee-hp .sitefoot__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center; gap:clamp(16px,3vw,36px);padding:clamp(30px,4vw,46px) 0 clamp(22px,2.6vw,30px)} .ee-hp .sitefoot .social{justify-self:end} .ee-hp .sitefoot__brand{display:block;font-weight:700;font-size:clamp(20px,2.2vw,26px); letter-spacing:-.01em;line-height:1; background:linear-gradient(92deg,var(--blue),var(--blue-2)); -webkit-background-clip:text;background-clip:text;color:transparent} /* mirrors the header lockup, so the footer reads as the same signature */ .ee-hp .sitefoot__role{font-family:ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif; font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--ink);margin-top:7px} .ee-hp .sitefoot__nav{display:flex;flex-wrap:wrap;justify-content:center; gap:clamp(12px,1.8vw,26px);font-family:ui-sans-serif,system-ui,Arial,sans-serif; font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase} .ee-hp .sitefoot__nav a{color:var(--ink);border-bottom:1.5px solid transparent;padding-bottom:2px; transition:color .2s,border-color .2s} .ee-hp .sitefoot__nav a:hover{color:var(--brick);border-color:var(--brick)} .ee-hp .sitefoot .foot{border-top:1px solid var(--rule-soft)} @media(max-width:600px){ .ee-hp .sitefoot__in{gap:16px} .ee-hp .sitefoot__in{grid-template-columns:1fr} .ee-hp .sitefoot .social{justify-self:start} .ee-hp .sitefoot__nav{gap:10px 16px;font-size:10.5px;width:100%;justify-content:flex-start} .ee-hp .sitefoot .foot{flex-direction:column;align-items:flex-start;gap:6px;font-size:10.5px} } .ee-hp .foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;font-family:ui-sans-serif,system-ui,Arial,sans-serif;font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--faint)} @media(max-width:900px){ .ee-hp .lead{grid-template-columns:1fr} .ee-hp .egrid{--ecols:3} .ee-hp .lcard__art{aspect-ratio:16/9} /* single column — let the art breathe */ .ee-hp .close__in{grid-template-columns:1fr} } @media(max-width:600px){ .ee-hp .hdr{align-items:flex-start} .ee-hp .nav{gap:16px;font-size:11px} .ee-hp .egrid{--ecols:1.15} /* Stats were shouting on a phone: 18px figures over labels that wrapped to three lines, 100px of card for three numbers. Smaller figures, tighter labels. */ .ee-hp .lcard__stats{grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:16px;padding-top:14px} .ee-hp .lcard__stats .sv{font-size:15px} .ee-hp .lcard__stats .sl{font-size:8.5px;letter-spacing:0.06em;line-height:1.3;margin-top:5px} .ee-hp .lcard__stats .s{padding-left:9px} .ee-hp .lcard__d{font-size:14.5px;line-height:1.5;margin-top:12px} .ee-hp .lcard__body{padding:16px} .ee-hp .lcard__t{font-size:22px} .ee-hp .lcard__role{font-size:10.5px;margin-top:7px} .ee-hp .lcard__cta{padding:0 16px 16px} /* ── Mobile nav: hamburger beside the name ────────────────────────────── Only active once js/nav.js has run (.js-nav), so the plain nav survives with JS off. */ .js-nav .ee-hp .hdr{position:relative;align-items:center;flex-wrap:nowrap} .js-nav .ee-hp .navbtn{display:flex;flex-direction:column;justify-content:center;gap:5px; width:40px;height:40px;padding:0 8px;margin-left:auto;background:none;border:0;cursor:pointer} .js-nav .ee-hp .navbtn span{display:block;height:1.5px;background:var(--ink);border-radius:2px; transition:transform .22s,opacity .18s} .js-nav .ee-hp .hdr.nav-open .navbtn span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .js-nav .ee-hp .hdr.nav-open .navbtn span:nth-child(2){opacity:0} .js-nav .ee-hp .hdr.nav-open .navbtn span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} /* A card hanging off the right, under the button that opened it — rather than a full-width sheet. Keeps the page visible behind it, so the menu reads as a layer over the site instead of a separate screen you have to escape. Capped in ch so the longest item ("Advertising & Branded") never wraps, and in vw so it stays a panel rather than a takeover on the narrowest phones. */ .js-nav .ee-hp .nav{position:absolute;top:100%;left:auto;right:0;z-index:120; /* Size to the content, not to a guessed width: the box grows to fit the longest label exactly, and only starts wrapping once it hits the cap. A fixed width has to be guessed against a font that may not have loaded yet, and guessing short pushes text outside the panel. */ width:max-content;max-width:min(78vw,270px); flex-direction:column;align-items:stretch;gap:0; background:var(--panel);border:1px solid var(--rule);border-radius:10px; box-shadow:0 20px 44px -16px rgba(30,26,22,.45); padding:6px;margin-top:8px;font-size:12px; opacity:0;visibility:hidden;transform:translate(8px,-6px) scale(.98); transform-origin:top right; transition:opacity .18s,transform .18s,visibility .18s} .js-nav .ee-hp .hdr.nav-open .nav{opacity:1;visibility:visible;transform:translate(0,0) scale(1)} /* set by js/nav.js while the panel is open — see the note there. Stays under the lightbox (999) so a playing video is never covered by the header. */ .js-nav .ee-hp .wrap.nav-lift{z-index:210} .js-nav .ee-hp .nav>a,.js-nav .ee-hp .nav__menu a{padding:12px 12px;border-bottom:none; border-top:1px solid var(--rule-soft); /* the desktop dropdown sets nowrap, which here made the longest label run out past the panel's right edge instead of being contained */ white-space:normal;letter-spacing:.1em} /* Hierarchy inside the panel. Every row previously sat at the same indent and weight, so About/Resume/Contact read as four more Editing sub-pages rather than as top-level destinations. The Editing children now step in and stay muted; the top-level rows sit flush left in full ink. js/nav.js adds a "More" heading above the last three so each group is announced the same way. */ /* must out-specify the `padding` shorthand on `.nav__menu a` above, which otherwise resets this back to the flush-left 12px */ .js-nav .ee-hp .nav__menu a.nav__sub{padding-left:26px;font-size:11.5px;color:var(--muted)} .js-nav .ee-hp .nav>a{color:var(--ink);font-weight:700} /* The two colour rules above out-rank the base `.nav a:hover`, which killed the brick hover on every row in the panel. Restore it with enough specificity to beat both. --brick is defined lighter in the night palette, so this stays legible on the dark show pages. :active carries as much weight as :hover here — a phone has no hover, so this is the tap feedback. */ .js-nav .ee-hp .nav a:hover, .js-nav .ee-hp .nav a:active, .js-nav .ee-hp .nav__menu a.nav__sub:hover, .js-nav .ee-hp .nav__menu a.nav__sub:active{color:var(--brick)} .js-nav .ee-hp .nav a:active{background:var(--paper)} /* the Work dropdown flattens into the panel — nothing needs a second tap */ .js-nav .ee-hp .nav__item{display:block;position:static} .js-nav .ee-hp .nav__item>a{display:none} .js-nav .ee-hp .nav__menu{position:static;opacity:1;visibility:visible;transform:none; border:0;box-shadow:none;padding:0;margin:0;min-width:0;background:none} .js-nav .ee-hp .nav__grp{padding:12px 12px 5px} .js-nav .ee-hp .nav>.nav__grp{display:block} /* Get the work on screen sooner. The hero was ~540px of type before the first image — on a phone that is two-thirds of the view spent on words, for a portfolio whose point is the pictures. The kicker was also wrapping onto a second line at this width. */ .ee-hp .kick{font-size:11px;letter-spacing:0.14em} /* 25px keeps "from concept through delivery." on one line — at 27px it measured exactly the available width and tipped onto a fifth line. */ .ee-hp .h1{font-size:25px;line-height:1.12;margin-top:14px} /* drop the authored desktop line breaks on phones; let the copy wrap naturally */ .ee-hp .h1br{display:none} .ee-hp .hero{padding-top:10px} /* the pipeline runs the short four-stage list here (see js/home.js), so the labels have room; trim its height and keep the last one off the right edge */ .ee-hp .hpipe{height:56px;margin-top:18px} .ee-hp .hpipe__base{right:40px} .ee-hp .hpipe__target{width:32px;height:32px} .ee-hp .hpipe__target .core{inset:12px} .ee-hp .hpipe__node .lbl{font-size:9px;letter-spacing:.08em} .ee-hp .seclbl{margin-top:24px;margin-bottom:16px} } /* editorial tiles: some are now