/* ========================================================================== vitae.css · THE PUBLIC VITAE SYSTEM (v3.1, 2026-09-02: a neutral field) One career, six hiring lenses, one continuous Carbon environment. The surface is the homepage's own: Carbon #171717, Acid #DFFF00, Bone #F2EFE9, Silver #9FA4A5, Radikal in Light, Regular, Medium and Bold. Rules and space instead of containers. No cards, no pills, no rounded panels, no white slabs. The atmospheric field behind the page is the homepage engine (carbon-field.js) mounted on , not a second engine. Three movements, one field: · the hero is entering a point of view: a broad light anchored high on the left, the largest type on the site, the most negative space · the body is evidence organised with precision: deep Carbon, numbered sections on hairline rules, display headings that align to the grid · the closing is a confident invitation: the light rises from below, neutral (Carbon stays Carbon: no tint anywhere in the field), and a fine Acid rule marks the threshold ========================================================================== */ /* ------------------------------------------------------------ the field */ .v-html{background:#171717} .v-body{ margin:0;position:relative;isolation:isolate; background:#171717;color:#F2EFE9; font-family:var(--font-brand,'Radikal',system-ui,sans-serif); font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; font-kerning:normal;font-feature-settings:"kern" 1,"liga" 1; overflow-x:hidden; } .v-body *,.v-body *::before,.v-body *::after{box-sizing:border-box} /* two very broad, very faint lights keep Carbon from reading as a flat rectangle. They drift over a long period, alternate direction, and never rise above .05 alpha, so every line of copy keeps its contrast. */ .v-body::before{ content:"";position:fixed;inset:-20% -10%;z-index:-3;pointer-events:none; background: radial-gradient(90% 70% at 18% 6%, rgba(255,255,255,.048) 0%, rgba(255,255,255,0) 60%), radial-gradient(90% 80% at 86% 100%, rgba(255,255,255,.028) 0%, rgba(255,255,255,0) 62%); animation:v-drift 64s ease-in-out infinite alternate; will-change:transform; } @keyframes v-drift{ from{transform:translate3d(0,0,0)} to {transform:translate3d(2.5%,1.5%,0)} } /* The two movement lights. One layer, a child of , so it is the full viewport wide and the full document tall: a gradient can never reach a container edge and no wrapper dimension can be inferred from the tone. Anchored in absolute lengths from the document's top and bottom so the hero and the closing keep their own light at any viewport size. */ .v-body::after{ content:"";position:absolute;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(1500px 900px at 14% 300px, rgba(255,255,255,.060) 0%, rgba(255,255,255,0) 70%), radial-gradient(1500px 820px at 50% calc(100% - 300px), rgba(255,255,255,.040) 0%, rgba(255,255,255,0) 68%); background-repeat:no-repeat; } /* A third light, fixed and inert, neutral, that answers the reader's position. The script sets --v-scroll from scrollY alone; the layer moves on transform only, so nothing in the document is measured per frame. */ .v-light{ /* exactly the viewport, and it clips: a fixed box wider than the viewport would enlarge the document's scrollable width */ position:fixed;inset:0;overflow:hidden;z-index:-2;pointer-events:none; --v-scroll:0; } .v-light::before{ content:"";position:absolute;inset:-30% -20%; background: radial-gradient(38% 46% at 72% 32%, rgba(255,255,255,.034) 0%, rgba(255,255,255,0) 70%), radial-gradient(30% 36% at 22% 78%, rgba(255,255,255,.026) 0%, rgba(255,255,255,0) 70%); transform:translate3d(0,calc(var(--v-scroll) * -140px),0); will-change:transform; } /* display headings sit a hair forward of the surface */ .v-sec__t,.v-hero__head,.v-close__t{text-shadow:0 1px 0 rgba(0,0,0,.35)} /* Selection. system.css paints ::selection with a 12% Carbon tint for the site's paper pages; on the Carbon ground that highlight is Carbon on Carbon and a reader sees nothing happen. Here a selection is an Acid highlighter with Carbon ink, on every element, including the Acid statements. */ .v-body ::selection{background:#DFFF00;color:#171717;-webkit-text-fill-color:#171717;text-shadow:none} /* the homepage's shared atmospheric canvas, mounted by carbon-field.js */ .jw-carbon-field{ position:fixed;inset:0;z-index:-1;width:100%;height:100%; pointer-events:none;mix-blend-mode:soft-light;opacity:.9; } .v-skip{ position:absolute;left:-9999px;top:0;z-index:100; padding:12px 18px;background:#DFFF00;color:#171717; font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase; } .v-skip:focus{left:0} /* ------------------------------------------------------------- the ink */ /* system.css is written for a light surface and repaints h1-h4, p and li with bare element selectors; :where() keeps this at (0,0,1). */ :where(.v-shell,.v-overlay) :is(h1,h2,h3,h4,p,li,ol,ul,dl,dt,dd,div,span,strong,em,b){color:#F2EFE9} .v-shell a,.v-overlay a{color:#F2EFE9} :focus-visible{outline:2px solid #DFFF00;outline-offset:3px} .v-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .v-body{ --v-pad:clamp(24px,6vw,120px); --v-rail-w:188px; --v-gut:72px; --v-num:48px; /* how far the hanging numeral sits outside the column */ --v-ease:cubic-bezier(.22,.61,.36,1); } .v-main{max-width:1460px;margin:0 auto;padding:0 var(--v-pad) 0} /* A generous reading measure, positioned inside the wider grid rather than trapped in a narrow card. Display lines carry their own limits below. */ .v-measure,.v-sec__i,.v-out__c,.v-prac__c,.v-role__s, .v-close__c,.v-lens__i{max-width:74ch} /* --------------------------------------------------- display kerning */ /* Optical corrections for diagonal pairs at display size. The generator wraps the FIRST glyph of a matched pair in , so the letter-spacing on that glyph closes or opens the gap to the next. Values are negative ems of the rendered size, tuned by inspection. */ .k-ja{letter-spacing:-.06em} /* JASON, tuned for Radikal Light by ink measurement */ .k-wa{letter-spacing:-.075em} /* WALKER */ .k-lk{letter-spacing:-.018em} /* WALKER */ .k-av,.k-va{letter-spacing:-.05em} .k-aw{letter-spacing:-.045em} .k-ay,.k-ya{letter-spacing:-.05em} .k-at{letter-spacing:-.04em} /* STRATEGY, CREATIVE */ .k-ta{letter-spacing:-.045em} /* VITAE */ .k-lt{letter-spacing:-.03em} .k-ly{letter-spacing:-.035em} .k-ra{letter-spacing:-.02em} /* STRATEGY, BRAND */ .k-ry{letter-spacing:-.02em} .k-ma{letter-spacing:-.015em} /* MANAGER */ .k-na{letter-spacing:-.015em} .k-tr{letter-spacing:-.02em} .k-yj{letter-spacing:-.03em} /* ---------------------------------------------------------- shared bits */ .v-eyebrow{ margin:0 0 clamp(22px,3vh,36px); font-weight:500;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#DFFF00; } .v-arrow{display:inline-block;transition:transform .25s ease} /* ==================================================== THE STICKY BAR */ /* Persistent orientation: which section, which lens, and the one control. Sticky beneath the site header, never fixed, never a second header. */ .v-bar{ position:sticky;top:var(--nav-h,64px);z-index:50; background:#171717; border-bottom:1px solid rgba(242,239,233,.12); } .v-bar__in{ max-width:1460px;margin:0 auto;padding:0 clamp(24px,6vw,120px); display:flex;align-items:center;justify-content:space-between;gap:12px 22px;min-height:52px; } .v-bar__idx{display:flex;align-items:center;gap:0 clamp(14px,1.6vw,26px);min-width:0;overflow-x:auto; scrollbar-width:none;-webkit-overflow-scrolling:touch} .v-bar__idx::-webkit-scrollbar{display:none} .v-bar__idx a{ position:relative;flex:0 0 auto;display:inline-flex;align-items:center;min-height:52px; font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:#9FA4A5;text-decoration:none;white-space:nowrap;transition:color .2s ease; } .v-bar__idx a::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px; background:#DFFF00;transform:scaleX(0);transform-origin:left; transition:transform .25s cubic-bezier(.22,.61,.36,1); } .v-bar__idx a:hover{color:#F2EFE9} .v-bar__idx a.is-active{color:#F2EFE9} .v-bar__idx a.is-active::after{transform:scaleX(1)} .v-bar__side{display:flex;align-items:center;gap:0 clamp(14px,1.8vw,28px);flex:0 0 auto} .v-bar__now{ margin:0;font-weight:400;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:#9FA4A5;white-space:nowrap; } .v-bar__now b{font-weight:500;color:#F2EFE9} .v-change{ display:inline-flex;align-items:center;gap:9px; min-height:44px;padding:0;margin:0; background:none;border:0;appearance:none;-webkit-appearance:none; font:inherit;font-weight:500;font-size:10.5px;letter-spacing:.2em; text-transform:uppercase;color:#F2EFE9;text-decoration:none;cursor:pointer; transition:color .2s ease;white-space:nowrap; } .v-change:hover{color:#DFFF00} .v-plus{color:#DFFF00;font-size:15px;letter-spacing:0;transition:transform .25s ease} .v-change[aria-expanded="true"] .v-plus{transform:rotate(45deg)} /* ============================================================ THE HERO */ .v-hero{position:relative} /* The opening: the job title introduces the name. Acid, uppercase, tracked, quiet but unmistakable; then JASON WALKER in Radikal Light, the largest type on the site, its authority from scale and space rather than weight. The matrix follows directly; the lens's philosophy comes after it. */ .v-hero--name{padding:clamp(48px,8vh,112px) 0 clamp(28px,4vh,48px)} .v-hero__title{ margin:0 0 clamp(18px,2.6vh,30px);max-width:none; font-weight:500;font-size:clamp(11.5px,.95vw,14px);letter-spacing:.3em; text-transform:uppercase;color:#DFFF00; } .v-hero__title span{white-space:nowrap;color:#DFFF00} /* on the spans too: the shell's element rule beats inheritance */ .v-hero__title .v-slash{color:#9FA4A5;margin:0 .45em} .v-hero__name{ margin:0; font-weight:300;text-transform:uppercase; letter-spacing:-.024em;line-height:.9; font-size:clamp(56px,10.4vw,152px); white-space:nowrap; text-shadow:0 2px 0 rgba(0,0,0,.28),0 18px 60px rgba(0,0,0,.35); } /* the lens's opening philosophy: the same width as the name above it. The headline balances over one or two lines; the introduction is set large and light so the wide measure stays a composed paragraph, never a text island and never one long low-density line. */ .v-lede{ position:relative; padding:clamp(40px,6vh,72px) 0 clamp(48px,8vh,104px); border-bottom:1px solid rgba(242,239,233,.14); } .v-lede::after{ content:"";position:absolute;left:0;bottom:-1px;width:56px;height:2px;background:#DFFF00; } .v-hero__head{ margin:0 0 clamp(24px,3.4vh,44px);max-width:none; font-weight:300;letter-spacing:-.022em;line-height:1.02; font-size:clamp(32px,4.9vw,78px);color:#DFFF00;text-wrap:balance; } .v-hero__profile{ margin:0;max-width:none; font-weight:300;font-size:clamp(19px,2.1vw,34px);line-height:1.4;letter-spacing:-.008em; color:#F2EFE9;text-wrap:pretty; } /* ============================================================ THE BODY */ .v-sec{ position:relative; padding:clamp(56px,8vh,110px) 0; border-top:1px solid rgba(242,239,233,.12); } .v-sec:first-of-type{border-top:0} .v-sec--lens{padding:0 0 clamp(40px,6vh,72px);border-top:0} .v-sec--lens .v-sec__n{margin-bottom:clamp(14px,2vh,22px)} /* The section eyebrow. Numeral and wording are one Acid unit; the numeral hangs in its own gutter at desktop so it never narrows the headline. */ .v-sec__n{ position:relative; margin:0 0 clamp(14px,1.8vh,22px); font-weight:500;font-size:11px;letter-spacing:.24em;color:#DFFF00; font-variant-numeric:tabular-nums; } .v-sec__num{color:#DFFF00} .v-sec__lab{color:#DFFF00;margin-left:.9em;text-transform:uppercase} .v-sec__n > .v-sec__lab:first-child{margin-left:0} .v-sec__t{ margin:0 0 clamp(18px,2.4vh,28px);max-width:28ch; font-weight:700;text-transform:uppercase; letter-spacing:-.02em;line-height:1; font-size:clamp(26px,3.6vw,54px);text-wrap:balance; } .v-sec__i{ margin:0 0 clamp(32px,4.4vh,56px); font-weight:300;font-size:clamp(17px,1.45vw,22px);line-height:1.48;color:#F2EFE9; } /* a second movement inside the same Practice section: its own eyebrow and heading, no new section number */ .v-move{margin-top:clamp(56px,8vh,104px);padding-top:clamp(28px,4vh,44px); border-top:1px solid rgba(242,239,233,.1)} .v-move__n{margin-bottom:clamp(12px,1.6vh,20px)} .v-move__t{margin-bottom:clamp(16px,2vh,24px)} .v-move + .v-pracs{margin-top:0} .v-pracs + .v-move{margin-top:clamp(56px,8vh,104px)} /* practice: numbered principles on the grid */ .v-pracs{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(30px,3.6vh,48px) clamp(28px,3.4vw,60px); counter-reset:vprac; } .v-prac{counter-increment:vprac;position:relative;padding-top:18px; border-top:1px solid rgba(242,239,233,.1)} .v-prac::before{ content:counter(vprac,decimal-leading-zero); position:absolute;left:0;top:-7px;padding-right:8px;background:#171717; font-weight:500;font-size:10.5px;letter-spacing:.2em;color:#DFFF00; } .v-prac__t{margin:0 0 10px;font-weight:500;font-size:clamp(17px,1.35vw,20px);letter-spacing:-.008em;line-height:1.25} .v-prac__c{margin:0;font-size:15.5px;line-height:1.6;color:#9FA4A5} /* outcomes: a two-column editorial grid. Cards grow to hold their whole copy: no fixed height, no clamp, no truncation, nothing hidden. */ .v-outs{ list-style:none;margin:0;padding:0;counter-reset:vout; display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(32px,4vw,72px);row-gap:0; align-items:start; } .v-out{ counter-increment:vout;position:relative;height:auto; padding:clamp(24px,3vh,36px) 0 clamp(24px,3vh,36px) clamp(44px,3.6vw,64px); border-top:1px solid rgba(242,239,233,.1); } /* the first row carries no rule, whichever column it is in */ .v-out:nth-child(1),.v-out:nth-child(2){border-top:0;padding-top:0} .v-out::before{ content:counter(vout,decimal-leading-zero); position:absolute;left:0;top:clamp(26px,3.2vh,38px); font-weight:500;font-size:10.5px;letter-spacing:.2em;color:#DFFF00; } .v-out:nth-child(1)::before,.v-out:nth-child(2)::before{top:2px} @media (max-width:900px){ .v-outs{grid-template-columns:minmax(0,1fr)} .v-out:nth-child(2){border-top:1px solid rgba(242,239,233,.1); padding-top:clamp(24px,3vh,36px)} .v-out:nth-child(2)::before{top:clamp(26px,3.2vh,38px)} } .v-out__t{margin:0 0 8px;font-weight:500;font-size:clamp(17px,1.5vw,21px);letter-spacing:-.006em} .v-out__r{ margin:0 0 10px;max-width:none; font-weight:400;font-size:clamp(17px,1.5vw,22px);line-height:1.32; color:#DFFF00;letter-spacing:-.01em; } .v-out__c{margin:0;font-size:15.5px;line-height:1.62;color:#C8CDCF} .v-out__go{ display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px; font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase; color:#DFFF00;text-decoration:none; } .v-shell .v-out__go{color:#DFFF00} .v-out__go .v-arrow{transition:transform .22s ease} .v-out__go:hover .v-arrow{transform:translateX(4px)} /* experience */ .v-role{padding:clamp(26px,3.4vh,40px) 0;border-top:1px solid rgba(242,239,233,.1)} .v-role:first-of-type{border-top:0;padding-top:0} .v-role__t{margin:0 0 4px;font-weight:500;font-size:clamp(18px,1.6vw,23px);letter-spacing:-.008em} .v-role__e{margin:0 0 6px;font-size:15.5px;color:#DFFF00} .v-role__m{margin:0 0 16px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9FA4A5} .v-role__s{margin:0 0 16px;font-size:15.5px;line-height:1.62;color:#C8CDCF} .v-role__l{margin:0;padding:0;list-style:none;max-width:62ch} .v-role__l li{position:relative;padding-left:20px;margin-bottom:10px;font-size:15.5px;line-height:1.56} .v-role__l li::before{content:"";position:absolute;left:0;top:.66em;width:6px;height:1px;background:#DFFF00} .v-early__h{ margin:clamp(34px,4.4vh,54px) 0 14px; font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#9FA4A5; } .v-earlies,.v-creds{list-style:none;margin:0;padding:0} .v-early,.v-cred{ display:grid;grid-template-columns:1fr auto; gap:4px clamp(16px,2vw,32px);align-items:baseline; padding:12px 0;border-top:1px solid rgba(242,239,233,.08); } .v-early__t,.v-cred__t{font-weight:500;font-size:14.5px} .v-early__e,.v-cred__w{grid-column:1;font-size:13.5px;color:#9FA4A5;line-height:1.45} .v-early__y,.v-cred__y{ grid-column:2;grid-row:1/3; font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9FA4A5;white-space:nowrap; } /* leadership: one statement, set large */ .v-lead__pracs{margin-top:clamp(34px,4.4vh,56px)} .v-lead__c{ margin:0;max-width:46ch; font-weight:300;font-size:clamp(21px,2.3vw,34px);line-height:1.3;letter-spacing:-.014em; } .v-lead__lead{ margin:0 0 clamp(22px,3vh,34px);max-width:30ch; font-weight:300;font-size:clamp(24px,2.9vw,44px);line-height:1.14;letter-spacing:-.02em;color:#DFFF00; } .v-lead__c::before{ content:"";display:block;width:56px;height:2px;background:#DFFF00;margin-bottom:clamp(22px,3vh,34px); } /* education */ .v-credcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(26px,3.4vw,64px)} .v-cred__h{margin:0 0 6px;font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#DFFF00} /* the other lenses, always real links */ .v-lens__i{margin:0 0 clamp(26px,3.4vh,42px);font-weight:300;font-size:clamp(20px,2vw,30px);line-height:1.3;letter-spacing:-.012em} .v-lenslist{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;background:rgba(242,239,233,.13);border:1px solid rgba(242,239,233,.13); } .v-lensitem{ display:block;padding:clamp(18px,2.2vh,26px) clamp(16px,1.6vw,22px); background:#171717;text-decoration:none;min-height:44px;transition:background .22s ease; } .v-lensitem:hover,.v-lensitem:focus-visible{background:#1e1e1e} .v-lensitem__t{display:block;font-weight:500;font-size:14.5px;margin-bottom:7px;color:#F2EFE9} .v-lensitem__d{display:block;font-size:13.5px;line-height:1.5;color:#9FA4A5} .v-lensitem.is-current{background:#101010} .v-lensitem.is-current .v-lensitem__t{color:#DFFF00} .v-lensitem.is-current .v-lensitem__t::after{ content:" · current view";font-weight:400;font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;color:#9FA4A5; } /* ========================================================= THE CLOSING */ .v-close{position:relative} /* the light rises, neutral; the Acid rule marks the threshold */ .v-close__in{ max-width:1460px;margin:0 auto; padding:clamp(88px,14vh,180px) clamp(24px,6vw,120px) clamp(48px,7vh,90px); border-top:1px solid rgba(223,255,0,.32); } .v-close__t{ margin:0 0 clamp(22px,3vh,34px);max-width:20ch; font-weight:300;letter-spacing:-.026em;line-height:1; font-size:clamp(38px,6.4vw,96px);text-wrap:balance; } .v-close__c{margin:0 0 clamp(30px,4vh,48px);font-size:clamp(16.5px,1.3vw,20px);line-height:1.58;color:#C8CDCF} .v-mail{ display:inline-block;min-height:44px;padding-top:6px; font-weight:500;font-size:clamp(19px,2.2vw,32px);letter-spacing:-.012em; color:#DFFF00;text-decoration:none;border-bottom:1px solid rgba(223,255,0,.42); } .v-shell .v-mail{color:#DFFF00} .v-mail:hover{border-bottom-color:#DFFF00} .v-details{ display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px clamp(20px,2.6vw,48px); margin:clamp(44px,6vh,72px) 0 0;padding-top:clamp(22px,3vh,34px); border-top:1px solid rgba(242,239,233,.12); } .v-details dt{margin:0 0 6px;font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#9FA4A5} .v-details dd{margin:0;font-size:15px;line-height:1.5} .v-details a{position:relative;color:#F2EFE9;text-decoration:none;border-bottom:1px solid rgba(242,239,233,.28)} .v-details a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)} .v-details a:hover{border-bottom-color:#DFFF00;color:#DFFF00} .v-close__foot{margin:clamp(40px,5vh,64px) 0 0;font-size:12px;letter-spacing:.06em;color:#9FA4A5} /* ========================================== THE OVERLAY (JS ENHANCEMENT) */ .v-overlay{ position:fixed;inset:0;z-index:9500;background:#171717; display:flex;flex-direction:column; padding:clamp(72px,10vh,120px) clamp(24px,6vw,120px) clamp(40px,6vh,72px); overflow-y:auto;opacity:0;visibility:hidden; transition:opacity .26s ease,visibility 0s linear .26s; /* visible at once on open, hidden after the fade on close */ } .v-overlay[hidden]{display:none} .v-overlay.is-open{opacity:1;visibility:visible;transition:opacity .26s ease,visibility 0s} .v-overlay__in{max-width:1460px;margin:0 auto;width:100%} .v-overlay__t{margin:0 0 10px;font-weight:500;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#DFFF00} .v-overlay__i{margin:0 0 clamp(26px,3.4vh,42px);font-weight:300;font-size:clamp(19px,1.9vw,28px);max-width:30ch;line-height:1.3} .v-overlay__x{ position:absolute;top:0;right:0; min-height:44px;min-width:44px;padding:14px clamp(24px,6vw,120px) 14px 20px; background:none;border:0;appearance:none;-webkit-appearance:none; font:inherit;font-weight:500;font-size:10.5px;letter-spacing:.2em; text-transform:uppercase;color:#9FA4A5;cursor:pointer; } .v-overlay__x span{color:#DFFF00;font-size:15px;letter-spacing:0} .v-overlay__x:hover{color:#F2EFE9} /* ============================================ THE IN-PLACE LENS CHANGE */ /* The lens view is replaced in the current document. It settles out and in over a short beat; nothing else on the page moves. */ .v-view{transition:opacity .22s var(--v-ease),transform .22s var(--v-ease)} .v-view.is-out{opacity:0;transform:translate3d(0,8px,0)} .v-close{transition:opacity .22s var(--v-ease)} .v-close.is-out{opacity:0} /* The leadership belief, when a lens stages it, is a spatial-type scene (spatial-type.css). A section that opens with a staged heading carries no separate eyebrow. */ .v-sec--staged{padding-top:0} /* ================================================== SCROLL COMPOSITION */ /* Type arrives with the grid. Only when scripting is present and motion is allowed; every element is fully visible without either. */ .v-js .v-r{opacity:0;transform:translate3d(0,18px,0); transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)} .v-js .v-r.is-in{opacity:1;transform:none} .v-js .v-r--late{transition-delay:.12s} .v-js .v-hero__name{transition:letter-spacing 1.1s cubic-bezier(.22,.61,.36,1)} .v-js .v-hero__name.v-r:not(.is-in){letter-spacing:-.02em} /* ============================== THE LENS RAIL AND THE NUMERAL GUTTER */ /* Desktop spatial order, left to right, with no layer overlapping another: sticky lens rail | hanging numeral gutter | main reading column The rail is a real grid column, so it ends where the reading column ends and the closing takes the full width without any script deciding it. */ .v-main--view{max-width:1712px} .v-col,.v-bodygrid{min-width:0} .v-rail{display:none} .v-lensnav{display:block} /* The three-layer desktop grid is claimed in the document head, before the first paint, so arming the rail later can never shift the layout. Without scripting the class is absent, the page is one full-width column and the sticky bar keeps its own CHANGE LENS control. */ @media (min-width:1280px){ /* the hero and the full matrix take the whole canvas; the three-layer grid begins where the numbered body begins */ .v-layout-js .v-bodygrid{ display:grid; grid-template-columns:var(--v-rail-w) minmax(0,1fr); column-gap:var(--v-gut); } /* the numeral hangs into the gutter: 24px clear of the rail, and it never narrows the headline or the body beside it */ /* the closing keeps the reading column's left edge, so its numeral hangs in the same gutter and 07 lines up with 01 through 06 */ .v-layout-js :is(.v-col,.v-close__in) .v-sec__num{ position:absolute;left:calc(-1 * var(--v-num));top:0} .v-layout-js :is(.v-col,.v-close__in) .v-sec__lab{margin-left:0} /* the closing releases into full width but keeps the reading column's edge */ .v-layout-js .v-close__in{max-width:1712px; padding-left:calc(var(--v-pad) + var(--v-rail-w) + var(--v-gut))} /* one control at a time: the rail carries the lens on desktop */ .v-layout-js .v-bar__side{display:none} /* the rail's column is also the spectacle's label gutter: only the widget itself takes the pointer, never the empty column beneath it */ .v-layout-js .v-rail{display:block;position:relative;z-index:6;pointer-events:none} .v-layout-js .v-rail__in{pointer-events:auto} .v-rail__in{ position:sticky;top:calc(var(--nav-h,64px) + 52px + 30px); transition:opacity .34s var(--v-ease),transform .34s var(--v-ease); } /* Hidden only once the script has taken charge of it, so a rail that is never armed because a script failed still shows its real links. */ .v-rail--managed .v-rail__in{ opacity:0;transform:translate3d(0,-10px,0) scale(.985);pointer-events:none; } .v-rail--managed.is-armed .v-rail__in{opacity:1;transform:none;pointer-events:auto} } /* the compact selector itself: native details/summary, real links inside */ .v-railsel{position:relative} .v-railsel__s{ display:block;list-style:none;cursor:pointer; padding:14px 0;min-height:44px; border-top:1px solid rgba(223,255,0,.34); } .v-railsel__s::-webkit-details-marker{display:none} .v-railsel__s::marker{content:""} .v-railsel__k{display:block;font-weight:500;font-size:10px;letter-spacing:.22em; text-transform:uppercase;color:#9FA4A5} .v-railsel__v{display:block;margin-top:7px;font-weight:500;font-size:15px; line-height:1.22;letter-spacing:-.006em;color:#F2EFE9} .v-railsel__a{display:inline-flex;align-items:center;gap:8px;margin-top:13px; font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#DFFF00} .v-railsel__s:hover .v-railsel__v{color:#DFFF00} .v-railsel[open] .v-plus{transform:rotate(45deg)} .v-railsel__p{margin-top:14px} .v-lenslist--rail{grid-template-columns:minmax(0,1fr)} .v-lenslist--rail .v-lensitem{padding:12px 13px;min-height:44px;display:flex;align-items:center} .v-lenslist--rail .v-lensitem__t{font-size:13px;margin-bottom:0} .v-lenslist--rail .v-lensitem__d{display:none} .v-lenslist--rail .v-lensitem.is-current .v-lensitem__t::after{content:none} /* =================================================================== MOBILE */ @media (max-width:1100px){ .v-pracs,.v-lenslist{grid-template-columns:repeat(2,minmax(0,1fr))} .v-bar__in{flex-wrap:wrap;gap:0 16px;min-height:0} .v-bar__side{order:1;width:100%;justify-content:space-between;min-height:48px; border-bottom:1px solid rgba(242,239,233,.08)} .v-bar__now{white-space:normal;line-height:1.35;min-width:0;padding:8px 0} .v-bar__idx{order:2;width:100%;min-height:44px} .v-bar__idx a{min-height:44px} } @media (max-width:860px){ .v-pracs{grid-template-columns:1fr} .v-main{padding:0 20px; padding-left:max(20px,env(safe-area-inset-left,0px)); padding-right:max(20px,env(safe-area-inset-right,0px))} .v-bar__in{padding:0 20px} .v-bar__idx{margin:0 -20px;padding:0 20px;width:calc(100% + 40px)} .v-hero__name{white-space:normal;font-size:clamp(44px,15.5vw,64px)} .v-hero__title span{white-space:normal} .v-hero__title{letter-spacing:.22em} .v-hero__head{font-size:clamp(30px,8.6vw,44px)} .v-hero__profile{font-size:clamp(18px,4.9vw,21px);line-height:1.46} .v-sec__t{max-width:none} .v-out{padding-left:36px} .v-lenslist{grid-template-columns:1fr} .v-close__in{padding-left:20px;padding-right:20px} .v-overlay{padding:clamp(72px,10vh,96px) 20px calc(40px + env(safe-area-inset-bottom,0px))} .v-overlay__x{top:env(safe-area-inset-top,0px);right:max(6px,env(safe-area-inset-right,0px));padding:14px 16px} } @media (max-width:420px){ .v-hero__name{font-size:clamp(40px,14vw,54px);letter-spacing:-.03em} } /* ============================================================ REDUCED MOTION */ @media (prefers-reduced-motion:reduce){ .v-body::before,.v-body *,.v-body *::before,.v-body *::after{transition:none!important;animation:none!important} .v-js .v-r,.v-js .v-r.is-in{opacity:1;transform:none} .v-js .v-hero__name.v-r:not(.is-in){letter-spacing:-.034em} .v-light::before{transform:none} .v-view.is-out,.v-close.is-out{opacity:1;transform:none} } /* ==================================================================== PRINT */ /* Ordinary browser printing only. Not a designed product; nothing here promotes a PDF. The page prints legibly as black ink on white and the navigation, the field and the overlay stay off the paper. */ @media print{ @page{margin:14mm} .v-body{background:#fff;color:#171717} .v-body::before,.v-body::after,.jw-carbon-field,.site-nav,.v-skip,.v-bar,.v-overlay, .v-arrow,.nav-toggle,.v-rail,.st__bg,.st__light,.st__meta{display:none!important} .v-main--view{display:block;max-width:none} .v-outs{display:block} .v-sec__num{position:static} .v-close__in{padding-left:0} .v-light{display:none} .v-shell :is(h1,h2,h3,h4,p,li,ol,ul,dl,dt,dd,div,span,a,strong,em,b){color:#171717} .v-shell .v-sec__n,.v-shell .v-out__r,.v-shell .v-role__e,.v-shell .v-hero__head, .v-shell .v-mail,.v-shell .v-out__go,.v-shell .v-cred__h{color:#171717} .v-js .v-r{opacity:1;transform:none} .v-main,.v-shell{max-width:none;padding:0} .v-hero{padding:0 0 10pt;border-bottom:.6pt solid #171717} .v-hero__name{font-size:26pt;line-height:1;white-space:normal} .v-hero__head{font-size:13pt;max-width:none;color:#171717} .v-hero__profile{font-size:11pt;line-height:1.4} .v-hero__title{font-size:8pt;letter-spacing:.2em;color:#171717} .v-sec{padding:12pt 0 0;border-top:.4pt solid #999} .v-sec__t{font-size:14pt;max-width:none} .v-sec__i,.v-out__c,.v-prac__c,.v-role__s,.v-lead__c,.v-close__c{max-width:none;font-size:10pt;line-height:1.45} .v-out,.v-prac,.v-role,.v-early,.v-cred{break-inside:avoid} .v-prac::before{background:#fff} h1,h2,h3{break-after:avoid} .v-lens__i,.v-lenslist{display:none} .v-close__in{padding:14pt 0 0;border-top:.6pt solid #171717;max-width:none} .v-close__t{font-size:20pt} .v-out__go::after{content:" " attr(href);font-size:8pt;color:#666} }