/* Theme Name: The Ballyhoo Lab Theme URI: https://theballyhoolab.com Author: The Ballyhoo Lab Description: Custom theme for The Ballyhoo Lab — an AI consultancy agency. French-language, responsive site with a scroll-driven homepage, an editorial journal, and a built-in contact form. Version: 1.0.13 Text Domain: the-ballyhoo-lab License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Requires at least: 6.0 Tested up to: 7.1 */ :root{--paper:#F3F0E8;--ink:#111111;--blue:#0311CC;--red:#E00101;--rule:#bdbbb4;--gutter:clamp(24px,6vw,128px);--font-display:'Manrope',Arial,sans-serif;--font-body:'Archivo',Arial,sans-serif;--panel-width:88vw} *{box-sizing:border-box}html{scroll-behavior:auto;scroll-padding-top:96px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}h1,h2,h3,h4,h5,h6,.brand,label,.header nav,.footer nav,nav a,.text-link,.service-label,.service-field h3,.agent-label,.agent-panel h2,.agent-closing h2,.capabilities,.method-step h3,.lab-disciplines,.marquee,.ef-title,.eg-title,.secondary-title,.sidebar-title,.article-title,.article-meta,.editorial-masthead h1,.editorial-index>h1,.journal>h2,.journal-article :is(h2,h3),.journal-rubrics-list a,.article-nav,.sidebar-label,.service-terms,.journal-link,.journal-image-placeholder span{font-family:var(--font-display)}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit;color:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}::selection{background:var(--blue);color:var(--paper)}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:6px}input:focus-visible,textarea:focus-visible{outline:0;border-color:var(--blue);box-shadow:0 1px 0 var(--blue)}h1,h2,h3,p{margin:0}h1,h2{font-weight:400;letter-spacing:-.05em;line-height:1.08}p{font-size:clamp(18px,1.42vw,25px);line-height:1.45;letter-spacing:-.018em}main{overflow:clip}section{position:relative;scroll-margin-top:0}.header{position:fixed;z-index:30;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(18px,2.6vh,32px) var(--gutter);background:linear-gradient(var(--paper) 65%,#f3f0e800)}.brand{display:inline-flex;align-items:center;gap:13px;font-size:clamp(13px,1.15vw,20px);font-weight:800;letter-spacing:-.02em;flex-shrink:0;line-height:1}.brand span{line-height:1}.brand svg{height:33px;width:25px;fill:none;stroke:currentColor;stroke-width:1.6}.header nav{display:flex;gap:clamp(18px,3.3vw,65px);font-size:13px;letter-spacing:.02em;font-weight:800}.header nav a{padding:10px 0;position:relative}.header nav a:after{content:'';height:1px;position:absolute;inset:auto 0 3px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .2s}.header nav a:hover:after{transform:scaleX(1)}.header nav a[aria-current='location']{color:var(--blue)}.skip-link{position:fixed;top:15px;left:20px;z-index:50;transform:translateY(-200%);background:var(--paper);padding:12px}.skip-link:focus{transform:none} .text-link{display:inline-flex;justify-content:space-between;align-items:center;gap:42px;border:0;border-bottom:1px solid currentColor;padding:0 0 13px;font-size:13px;font-weight:500;letter-spacing:.015em;background:none}.text-link span{font-size:27px;line-height:14px;transition:transform .22s}.text-link:hover{color:var(--blue)}.text-link:hover span{transform:translateX(6px)}.text-link:disabled{cursor:wait;opacity:.6}.thread{fill:none;stroke:var(--blue);stroke-width:3;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}.thread.quiet{stroke:var(--ink);stroke-width:1;opacity:.18} /* The first stroke begins in the open field, away from headline and paragraph. */ .hero{min-height:740px;height:100svh;padding:clamp(185px,29vh,370px) var(--gutter) 0}.hero h1{white-space:nowrap;position:relative;z-index:2}.hero-support{position:relative;z-index:2;width:min(38%,530px);margin:7vh 0 0 58%}.hero-support p{font-size:clamp(18px,1.45vw,26px)}.hero-support .text-link{margin-top:34px}.hero-thread{position:absolute;inset:44% 0 0;pointer-events:none}.thread-hero{display:block;width:100%;height:100%}.thread-hero .thread{stroke-width:5}.explore{position:absolute;bottom:30px;right:var(--gutter);font-size:26px;padding:10px;z-index:2}.hero .hero-copy{position:relative} /* Diagnosis is an editorial relationship between two observations, not a network. */ .problem{min-height:850px;padding:12vh var(--gutter) 12vh}.problem h2{position:relative;z-index:2;white-space:nowrap;}.problem-copy{position:relative;z-index:2;margin:9vh 0 0 54%;max-width:550px}.problem-copy p+p{margin-top:54px}.thread-problem{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.diagnosis{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--diagnosis,1))} /* Only the approved statement occupies this pause. */ .statement{min-height:90svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:18vh var(--gutter) 22vh}.statement h2{position:relative;z-index:1;font-weight:700;line-height:1.08;letter-spacing:-.048em;width:100%}.statement h2 span{display:block}.statement h2 span+span{margin-top:.08em}.statement-trace{position:absolute;bottom:9vh;left:var(--gutter);right:var(--gutter);height:1px;background:var(--blue);opacity:.18} /* One long typographic surface. Panels have no boxes, background, or card edges. */ .agents{--agent-distance:100svh;--agent-progress:0;min-height:640px}.agents-stage{position:relative;height:100svh;min-height:640px;overflow:hidden}.agent-track{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--blue) transparent;outline-offset:-5px!important}.agent-panel{position:relative;flex:0 0 var(--panel-width);width:var(--panel-width);height:100%;padding:0 var(--gutter);scroll-snap-align:start}.agent-content{position:absolute;left:var(--gutter);right:var(--gutter);top:28%}.agent-label{font-size:15px;letter-spacing:.04em;margin-bottom:26px}.agent-panel h2{;line-height:1;letter-spacing:-.055em;white-space:nowrap;transition:color .25s}.agent-panel.is-active h2{color:var(--blue)}.capabilities{display:flex;flex-wrap:wrap;column-gap:14px;row-gap:5px;align-items:baseline;margin-top:46px;font-size:clamp(18px,1.65vw,28px);letter-spacing:-.025em}.separator{color:#77756f}.ellipsis{font-size:1.5em;color:var(--blue);line-height:.8}.agent-tick{position:absolute;top:calc(73% - 9px);left:var(--gutter);height:19px;width:1px;background:var(--blue);z-index:2}.agent-route{position:absolute;left:0;right:0;top:73%;height:1px;background:#c6c3bb;pointer-events:none}.agent-route span{position:absolute;left:0;top:-1px;height:3px;width:100%;background:var(--blue);transform:scaleX(calc(.16 + var(--agent-progress)*.84));transform-origin:left}.agent-open-end{flex:0 0 18vw;display:flex;align-items:center;padding-bottom:7vh;font-size:clamp(60px,10vw,180px);color:var(--blue);letter-spacing:.05em}.agent-controls{position:absolute;right:var(--gutter);bottom:13%;display:flex;gap:24px}.agent-controls button{display:grid;place-items:center;border:0;border-bottom:1px solid var(--ink);background:none;width:47px;height:40px;font-size:30px;padding:0 0 8px}.agent-controls button:hover{color:var(--blue)}.agent-controls button:disabled{opacity:.25;cursor:default}.agent-exit{position:absolute;bottom:0;left:var(--gutter);height:calc(27% - 1px);width:1px;background:var(--blue);transform:scaleY(var(--agent-exit,1));transform-origin:top;opacity:.4}.horizontal-agents .agents{height:var(--agent-distance)}.horizontal-agents .agents-stage{position:sticky;top:0}.horizontal-agents .agent-track{width:max-content;overflow:visible;scroll-snap-type:none;will-change:transform} /* The horizontal journey turns into an ordered, cyclic method. */ .method{padding:12vh var(--gutter) 14vh;min-height:980px}.method h2{;white-space:nowrap}.method-body{position:relative;margin-top:90px}.method-list{position:relative;list-style:none;margin:0 0 0 13%;padding:0;z-index:1}.method-step{display:grid;grid-template-columns:43% 1fr;align-items:center;gap:5%;padding:31px 0;border-bottom:1px solid #1113;min-height:112px}.method-step:first-child{border-top:1px solid #1113}.method-step h3{font-size:clamp(16px,1.75vw,30px);font-weight:700;line-height:1.15;letter-spacing:-.035em}.method-step p{font-size:clamp(17px,1.32vw,23px);line-height:1.4;max-width:520px}.method-step.is-active h3{color:var(--blue)}.method-thread{position:absolute;inset:0 auto 0 0;width:12%;height:100%;overflow:visible;pointer-events:none}.method-thread .thread{stroke-width:2}.method-progress{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--method-progress,1))}.feedback{stroke:var(--blue);stroke-width:1;fill:none;opacity:.32;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--feedback,1));vector-effect:non-scaling-stroke} /* Importance physically changes scale and position; neither headline crossfades. */ .lab{min-height:950px}.lab-stage{position:relative;min-height:950px;padding:140px var(--gutter) 100px}.type-stage{position:relative}.ai-sentence{display:flex;align-items:baseline;gap:3.5vw;line-height:1;white-space:nowrap}.ai-subject{font-size:clamp(60px,9vw,180px);display:inline-block;transform-origin:left top;will-change:transform}.ai-rest{font-size:clamp(25px,3.2vw,70px);display:inline-block;transform-origin:left center}.company-sentence{color:var(--blue);line-height:1;letter-spacing:-.065em;margin-top:90px;transform-origin:left top}.company-subject{display:block;white-space:nowrap}.company-rest{display:block;font-size:.48em;text-align:right;padding-right:10%;margin-top:12px}.importance-line{display:block;height:3px;background:var(--blue);width:100%;margin-top:35px;transform-origin:left center}.lab-support{max-width:570px;margin:75px 0 0 auto}.lab-support p{font-size:clamp(17px,1.38vw,24px)}.lab-disciplines{;line-height:1.7;margin-top:30px;letter-spacing:0!important}.type-motion .lab{height:220svh;min-height:1100px}.type-motion .lab-stage{height:100svh;min-height:600px;position:sticky;top:0;padding:0 var(--gutter)}.type-motion .type-stage{position:absolute;top:28%;left:var(--gutter);right:var(--gutter);height:40%}.type-motion .company-sentence{position:absolute;top:0;left:0;width:100%;margin:0;will-change:transform}.type-motion .importance-line{position:absolute;top:0;left:0;margin:0;will-change:transform}.type-motion .lab-support{position:absolute;bottom:7%;right:var(--gutter);width:41%;margin:0}.type-motion .lab-support{clip-path:inset(0 0 calc((1 - var(--lab-copy,0))*100%) 0)} /* Arrival is a line and a red terminus, then ordinary, usable form controls. */ .contact{padding:15vh var(--gutter) 110px;min-height:100svh}.contact-arrival{position:absolute;left:var(--gutter);top:0;width:1px;height:9vh;background:var(--blue)}.contact-arrival:after{content:'';position:absolute;bottom:-3px;left:-3px;width:7px;height:7px;border-radius:50%;background:var(--red)}.contact h2{;white-space:nowrap}.contact-layout{display:grid;grid-template-columns:35% 53%;justify-content:space-between;gap:8%;margin-top:8vh}.contact-intro{max-width:430px}form{min-width:0}.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:32px}.field{margin-bottom:36px}.field label{display:block;font-weight:800;font-size:15px;letter-spacing:-.015em;line-height:1.4}.field input,.field textarea{display:block;font-weight:500;width:100%;border:0;border-bottom:1px solid #1118;border-radius:0;background:transparent;padding:14px 0 12px;font-size:20px;line-height:1.5;min-height:52px}.field textarea{resize:vertical;min-height:126px;max-height:440px}.field:focus-within label{color:var(--blue)}.field input:user-invalid,.field textarea:user-invalid{border-color:var(--red)}.form-bottom{display:flex;align-items:flex-start;justify-content:space-between;gap:30px}.form-bottom .text-link{min-width:170px;flex-shrink:0}.form-status{font-size:15px;line-height:1.5;max-width:330px;color:var(--blue)}.form-status[data-error='true']{color:#a40000}.form-trap{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}.form-bottom [hidden]{display:none} @media(min-width:1800px){.hero-support{width:35%}.problem{min-height:95svh}.problem-copy{max-width:700px}.statement{min-height:100svh}.method{min-height:1100px}.method-step{min-height:130px}.lab-support{max-width:700px}.contact-intro{max-width:600px}} @media(max-width:1100px){.hero h1{;white-space:normal;max-width:95%}.hero-support{width:43%;margin-left:52%}.problem h2{;white-space:normal;max-width:95%}.problem-copy{margin-left:48%;max-width:480px}.statement h2 span{display:inline}.statement h2 span+span:before{content:' ';white-space:pre}.method-step{grid-template-columns:44% 1fr;gap:6%}.method-step h3{font-size:18px}.method-step p{font-size:17px}.contact h2{;white-space:normal}.contact-layout{grid-template-columns:36% 56%;gap:8%}.ai-rest{font-size:3vw}.type-motion .lab-support{width:46%}} @media(max-width:760px){:root{--gutter:26px;--panel-width:92vw}.header{gap:14px;padding-top:max(17px,env(safe-area-inset-top));padding-bottom:21px}.brand{font-size:12px;gap:7px}.brand svg{width:18px;height:26px}.header nav{font-size:10px;gap:18px}p{font-size:18px}.hero{padding-top:25vh;min-height:760px}.hero h1{;max-width:95%;line-height:1.03;white-space:normal}.hero-support{width:68%;max-width:420px;margin:7vh 0 0 26%}.hero-support p{font-size:18px}.hero-thread{top:53%;right:32%;bottom:0}.thread-hero{overflow:visible}.thread-hero .thread{stroke-width:3}.explore{font-size:23px;bottom:26px}.problem{padding-top:90px;min-height:780px}.problem h2{;max-width:100%}.problem-copy{margin:70px 0 0 24%;max-width:520px}.problem-copy p{font-size:18px}.problem-copy p+p{margin-top:38px}.thread-problem{width:40%}.statement{min-height:700px;padding-block:140px}.statement h2{;line-height:1.12}.statement h2 span{display:block}.statement h2 span+span{margin-top:24px}.statement h2 span+span:before{content:none}.statement-trace{bottom:55px}.agents-stage{height:76svh;min-height:570px;max-height:900px}.agent-content{top:22%}.agent-label{font-size:13px;margin-bottom:24px}.agent-panel h2{;white-space:normal;line-height:1}.capabilities{font-size:19px;margin-top:38px;column-gap:10px;max-width:440px}.agent-tick,.agent-route{top:73%}.agent-controls{bottom:11%;gap:22px}.agent-open-end{flex-basis:35vw;font-size:100px}.agent-exit{height:27%}.method{padding-top:95px;padding-bottom:100px;min-height:900px}.method h2{;white-space:normal;max-width:580px}.method-body{margin-top:60px}.method-list{margin-left:13%}.method-step{grid-template-columns:1fr;gap:12px;padding:26px 0;min-height:130px}.method-step h3{font-size:20px}.method-step p{font-size:17px;max-width:400px}.method-thread{width:11%}.lab-stage{padding:110px var(--gutter) 90px;min-height:880px}.ai-sentence{display:block;white-space:normal}.ai-subject{font-size:80px}.ai-rest{font-size:32px;max-width:380px;margin-top:15px}.company-sentence{;margin-top:80px}.company-subject{white-space:normal}.lab-support{max-width:450px;margin-top:70px;margin-left:14%}.lab-support p{font-size:17px}.contact{padding-top:100px;padding-bottom:max(80px,env(safe-area-inset-bottom));min-height:100svh}.contact-arrival{height:50px}.contact h2{;max-width:620px}.contact-layout{display:block;margin-top:36px}.contact-intro{max-width:500px;font-size:18px}.contact form{margin-top:55px;margin-left:14%}.form-pair{gap:22px}.field{margin-bottom:30px}.field input,.field textarea{font-size:18px}.form-bottom{flex-direction:column;gap:25px}.form-bottom .text-link{min-width:170px}} @media(max-width:480px){:root{--gutter:22px;--panel-width:94vw}.header{flex-wrap:wrap;row-gap:10px;align-items:center}.brand{font-size:12px}.brand svg{width:17px;height:25px}.header nav{gap:14px;font-size:9px}.hero{min-height:790px;padding-top:23vh}.hero h1{;max-width:100%}.hero-support{width:83%;margin:48px 0 0 13%}.hero-support p{font-size:17px}.hero-support .text-link{margin-top:27px}.hero-thread{top:63%;right:0}.thread-hero .thread{stroke-width:3}.problem{min-height:800px;padding-top:100px}.problem-copy{margin-left:15%;margin-top:50px}.problem-copy p{font-size:17px}.thread-problem{width:24%;left:-5px}.statement{min-height:680px;padding-top:115px;padding-bottom:150px}.statement h2 span+span{margin-top:28px}.agents-stage{height:75svh;min-height:570px}.agent-content{top:20%}.agent-label{font-size:12px}.agent-panel h2{;max-width:310px}.capabilities{font-size:18px;max-width:285px;row-gap:8px}.agent-route,.agent-tick{top:76%}.agent-controls{bottom:8%}.agent-exit{height:24%}.method-body{margin-top:45px}.method-list{margin-left:12%}.method-step h3{font-size:19px}.method-step p{font-size:16px}.method-step{padding-block:25px;min-height:136px}.contact form{margin-left:0}.form-pair{grid-template-columns:1fr;gap:0}.field label{font-size:15px}.ai-rest{font-size:28px}.lab-support{margin-left:7%}} @media(min-width:761px) and (max-height:650px){.hero{min-height:670px;padding-top:180px}.hero-support{margin-top:50px}.problem{min-height:800px;padding-top:90px}.statement{min-height:640px}.agents-stage{height:100svh;min-height:480px}.agent-content{top:26%}.agent-label{margin-bottom:18px}.capabilities{margin-top:24px;font-size:18px}.agent-route,.agent-tick{top:76%}.agent-controls{bottom:7%}.type-motion .lab-stage{min-height:500px}.type-motion .type-stage{top:30%}.type-motion .lab-support{bottom:6%;max-width:460px}.type-motion .lab-support p{font-size:15px}.lab-disciplines{margin-top:16px}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}.thread{stroke-dashoffset:0!important}.hero .explore{display:none}.agent-track{scroll-snap-type:x proximity}.agents{height:auto!important}.agents-stage{position:relative!important}.type-stage>*{transform:none!important;clip-path:none!important}.lab-support{clip-path:none!important}.importance-line{position:static!important}.company-sentence{position:static!important;margin-top:70px!important}.lab-stage{height:auto!important}.lab{height:auto!important}.method-progress,.feedback{stroke-dashoffset:0!important}} .agent-track{scrollbar-width:none}.agent-track::-webkit-scrollbar{display:none} @media print{.header,.hero-thread,.thread-problem,.method-thread,.agent-route,.agent-controls,.agent-exit,.explore{display:none}section,.agents,.lab{height:auto!important;min-height:0!important;padding:35px!important;break-inside:avoid}.hero-support,.problem-copy{margin:30px 0;width:auto}.agents-stage,.lab-stage{height:auto!important;min-height:0!important;position:relative!important;padding:0}.agent-track{display:block;width:auto!important;transform:none!important}.agent-panel{height:auto;width:auto;min-height:0;margin:30px 0;padding:0}.agent-content{position:static}.agent-open-end{display:none}.type-stage{position:static!important;height:auto!important}.type-stage>*{transform:none!important;clip-path:none!important}.company-sentence{position:static!important;}.lab-support{position:static!important;clip-path:none!important;width:auto!important}.importance-line{display:none}form{display:none}} /* V3: stronger display hierarchy and open architectural routes. */ .header{background:var(--paper)}.header nav{font-weight:800}.brand{font-weight:800} .hero h1,.problem h2,.statement h2,.method h2,.contact h2{font-weight:800} .hero-support{width:min(43%,550px);margin:7vh 0 0}.hero-support .text-link{font-weight:750;border-bottom-width:3px;padding-bottom:15px}.hero-thread{inset:44% 0 0}.thread,.thread-hero .thread{stroke-width:7}.thread.quiet{stroke-width:2} .problem h2{;white-space:normal}.problem h2 em{display:inline-block;font-weight:750;color:var(--blue)}.problem-copy{margin-top:var(--problem-copy-gap,9vh)}.thread-problem{top:32%;height:68%} .statement h2{font-weight:850;}.statement h2>span{display:block}.statement h2>span+span{margin-top:.1em}.statement h2>span+span:before{content:none} .selection-text{position:relative}.selection-overlay{position:absolute!important;inset:0;margin:0!important;background:var(--blue);color:var(--paper);clip-path:inset(0 calc((1 - var(--selection,1))*100%) 0 0);pointer-events:none} .agent-track{position:relative}.agent-content{top:30%}.agent-panel h2{font-weight:900;}.agent-label,.agent-closing .text-link{font-family:var(--font-display);font-weight:800;letter-spacing:.04em;text-decoration:none;position:relative;width:fit-content} .agent-label{display:inline-block}.agent-label::after{content:'';position:absolute;left:0;bottom:-6px;width:100%;height:2px;background:currentColor;transform-origin:left;transform:scaleX(var(--agent-label-progress,1))} .agent-closing .text-link{font-size:15px;border-bottom:2px solid currentColor;padding-bottom:6px} @media(max-width:760px){.agent-closing .text-link{font-size:13px}}@media(max-width:480px){.agent-closing .text-link{font-size:12px}} @media(prefers-reduced-motion:reduce){.agent-label::after{transform:scaleX(1)}}.agent-serpentine{position:absolute;inset:0 auto 0 0;height:100%;pointer-events:none;overflow:visible}.agent-serpentine .thread{stroke-width:6}.agent-closing h2{;white-space:normal;line-height:1.06}.agent-closing .text-link{margin-top:40px}.agent-closing{flex-basis:100vw;width:100vw} .method{padding-top:19vh;padding-bottom:20vh}.method h2{;position:relative;white-space:normal}.method h2:after{content:'';position:absolute;top:calc(100% + 47px);left:0;width:100%;height:6px;background:var(--blue);transform:scaleX(var(--method-heading,1));transform-origin:left}.method-thread .thread{stroke-width:5}.method-thread .quiet{stroke-width:1}.method-body{margin-top:100px} .ai-subject,.company-sentence{font-weight:850}.ai-rest{font-weight:400}.company-sentence{;letter-spacing:-.055em}.company-subject{display:inline;white-space:nowrap}.importance-line{height:8px}.lab-stage{isolation:isolate}.lab-descent{position:absolute;right:var(--gutter);top:61%;bottom:0;width:8px;background:var(--blue);transform:scaleY(var(--descent,1));transform-origin:top;z-index:-1}.type-motion .lab-descent{top:var(--descent-top,50%)}.type-motion .lab-support{right:calc(var(--gutter) + 42px);width:41%}.lab-support{margin-right:42px}.lab-disciplines{display:block}.lab-disciplines .selection-overlay{display:block}.lab-disciplines{padding:3px 0} .contact{padding-right:calc(var(--gutter) + 42px)}.contact-arrival{left:auto;right:var(--gutter);width:8px;height:100%;transform:scaleY(var(--arrival,1));transform-origin:top}.contact-arrival:after{display:none}.contact h2{;white-space:normal}.contact form{border-top:3px solid var(--blue);border-left:1px solid var(--blue);padding:28px 0 0 28px}.contact-layout{grid-template-columns:34% 57%;gap:9%}.field input,.field textarea{border-bottom-color:var(--blue)}.field input:user-invalid,.field textarea:user-invalid{border-color:var(--red)} .footer-band{position:relative;overflow:hidden;background:var(--blue);color:var(--paper);}.marquee{display:block;width:100%;overflow:hidden;font-weight:850;letter-spacing:-.055em;line-height:1.1}.marquee-track{display:flex;width:max-content;animation:brand-drift 65s linear infinite;animation-play-state:paused;will-change:transform}.marquee-group{flex:0 0 auto;white-space:nowrap}.footer-band.is-visible:not(.is-paused):not(:hover):not(:focus-within) .marquee-track{animation-play-state:running}.marquee-toggle{position:absolute;right:var(--gutter);bottom:20px;background:none;border:0;border-bottom:1px solid currentColor;padding:6px 0;font-size:12px;color:var(--paper)}.marquee-toggle:focus-visible{outline-color:var(--paper)}.footer{padding:42px var(--gutter);display:flex;justify-content:space-between;gap:32px;align-items:center}.footer nav{display:flex;flex-wrap:wrap;gap:28px;align-items:center;font-size:14px;font-weight:800}.footer a:hover{color:var(--blue)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} @keyframes brand-drift{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--marquee-unit, 50%)))}} @media(max-width:1100px){.hero-support{width:47%;margin-left:0}.header nav{gap:22px;font-size:12px}} @media(max-width:760px){.header nav{font-size:10px;gap:14px}.header{flex-wrap:wrap;row-gap:9px}.hero-support{width:85%;margin:48px 0 0;max-width:440px}.hero-thread{inset:74% 0 0}.thread-hero .thread{stroke-width:5}.problem-copy{margin-left:18%}.thread-problem{top:35%;width:26%;height:65%}.thread{stroke-width:5}.statement h2>span+span{margin-top:24px}.agent-content{top:24%}.agent-panel h2{;white-space:normal}.agent-serpentine .thread{stroke-width:5}.method{padding-top:140px;padding-bottom:140px}.method-body{margin-top:70px}.lab-stage{padding-right:calc(var(--gutter) + 20px)}.lab-support{margin-right:16px}.lab-descent{width:5px;top:56%}.importance-line{height:5px}.contact{padding-right:calc(var(--gutter) + 22px)}.contact-arrival{width:5px}.contact form{margin-left:0;padding-left:20px}.footer{align-items:flex-start;flex-direction:column}.footer nav{gap:20px}} @media(max-width:480px){.header nav{width:100%;justify-content:space-between;font-size:10px}.hero-support{width:94%}.hero-thread{top:78%}.problem-copy{margin-left:12%}.agent-content{top:23%}.company-sentence{;letter-spacing:-.05em}.lab-support{margin-left:0}.lab-descent{top:54%}.contact form{padding-left:16px}.footer nav{gap:16px;font-size:12px}} @media(min-width:761px) and (max-height:650px){.agent-content{top:29%}.type-motion .lab-support{width:40%}.hero-thread{top:55%}} @media(prefers-reduced-motion:reduce){.marquee-track{animation:none;transform:none}.marquee-toggle{display:none}.selection-overlay{clip-path:none}.lab-descent,.contact-arrival,.method h2:after{transform:none}.agent-panel h2{transition:none}} @media print{.agent-serpentine,.lab-descent,.contact-arrival,.footer-band{display:none}.selection-overlay{display:none!important}.footer{padding:20px}.company-subject{white-space:normal}} .lab-disciplines{width:fit-content;max-width:100%;padding:3px 0}.lab-disciplines .selection-overlay{padding:3px 0}.lab-descent{top:var(--descent-top,61%)} @media(max-width:760px){.lab-stage{padding-right:var(--gutter)}.lab-support{margin-right:30px}} @media(max-width:760px){.agent-panel:nth-child(5) h2{;max-width:none}} /* Approved V3 refinement: restrained surfaces, assertive CTAs, compact paired bands. */ .header{border-bottom:1px solid #11111117}.header nav,.footer nav{font-weight:800} .header:not(.header-editorial) nav a.nav-cta{background:var(--blue);color:var(--paper);display:flex;align-items:center;padding:10px clamp(16px,1.8vw,26px);border-radius:0;font-weight:900} .header:not(.header-editorial) nav a.nav-cta:after{display:none} .header:not(.header-editorial) nav a.nav-cta:hover{background:#000;color:var(--paper)} .header:not(.header-editorial) nav a.nav-cta:focus-visible{outline:2px solid #fff;outline-offset:-3px} /* Editorial header links: the cream terminal-block treatment is OPT-IN via the WordPress menu item's CSS class `editorial-cta` (Appearance → Menus → CSS Classes). Items WITHOUT that class stay normal cream-on-blue links with the shared underline hover. Nothing is inferred from label, URL or position. */ .header-editorial nav a{color:var(--paper)} .header-editorial nav a:not(.editorial-cta):hover{color:#ffffff} .header-editorial nav{align-self:stretch;align-items:center} /* fill header content row (commercial parity) */ .header-editorial nav a.editorial-cta{background:#F3F0E8;color:#111111;display:flex;align-items:center;justify-content:center;padding:10px clamp(16px,1.8vw,26px);border-radius:0;font-weight:900;white-space:nowrap;align-self:stretch} .header-editorial nav a.editorial-cta:hover, .header-editorial nav a.editorial-cta:focus-visible{background:#111111;color:#F3F0E8} .header-editorial nav a.editorial-cta:focus-visible{outline:2px solid currentColor;outline-offset:-3px} .header-editorial nav a.editorial-cta:after{display:none} .header-editorial nav a.editorial-cta[aria-current='location']{background:#111111;color:#F3F0E8} @media(min-width:761px){ .header:not(.header-editorial) nav a.nav-cta, .header-editorial nav a.editorial-cta{margin-top:calc(-1*clamp(18px,2.6vh,32px));margin-bottom:calc(-1*clamp(18px,2.6vh,32px))} } .hero{padding-top:clamp(220px,34vh,410px)} .hero-support .text-link,.form-bottom .text-link{min-height:56px;min-width:230px;padding:18px 22px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);font-size:14px;font-weight:800;gap:36px;transition:background-color .2s,border-color .2s} .hero-support .text-link:hover,.form-bottom .text-link:hover{background:var(--blue);border-color:var(--blue);color:var(--paper)} .hero-support .text-link:focus-visible,.form-bottom .text-link:focus-visible{outline-offset:5px}.form-bottom .text-link:disabled{opacity:.6} .thread-hero .thread{stroke-dasharray:1;stroke-dashoffset:calc(var(--hero-progress,0)*-.035);animation:hero-thread-arrival 3.6s cubic-bezier(.2,.65,.3,1) both} @keyframes hero-thread-arrival{from{stroke-dashoffset:.36}to{stroke-dashoffset:0}} .thread-problem{top:var(--problem-route-top,12vh);left:0} .contact form{border-top:0;border-left:1px solid #11111112;padding:28px;background:#f5f2eb;box-shadow:0 2px 8px #11111108}.form-pair{gap:24px} .footer-marquees{overflow:hidden}.footer-band{width:100%;border:0;border-radius:0;text-align:left;background:var(--blue);color:var(--paper);cursor:pointer;overflow:hidden;position:relative} .footer-band.disciplines-band{background:var(--ink)}.footer-band .marquee{line-height:1.15;letter-spacing:-.04em;font-weight:850}.footer-band .marquee-track{animation:brand-drift 65s linear infinite;animation-play-state:paused} .footer-band.disciplines-band .marquee-track{animation-name:discipline-drift;animation-duration:85s} .footer-marquees.is-visible:not(.is-paused) .marquee-track{animation-play-state:running}.footer-band:focus-visible{outline:2px solid var(--paper);outline-offset:-7px} @keyframes discipline-drift{from{transform:translateX(calc(-1 * var(--marquee-unit, 50%)))}to{transform:translateX(0)}} @media(max-width:760px){.hero{padding-top:29vh}.contact form{padding:24px 20px}.hero-thread{top:max(78%,var(--hero-route-clearance,78%))}.hero-support .text-link,.form-bottom .text-link{min-width:218px;padding:17px 19px}.thread-problem{top:var(--problem-route-top,90px)}} @media(max-width:480px){.hero{padding-top:27vh}.contact form{padding:23px 16px}.form-bottom .text-link{width:100%;min-width:0}} @media(min-width:761px) and (max-height:650px){.hero{padding-top:215px}} @media(prefers-reduced-motion:reduce){.thread-hero .thread{animation:none;stroke-dashoffset:0}.footer-band .marquee-track{animation:none;transform:none}} .thread-hero .thread{animation-fill-mode:backwards} @media(prefers-reduced-motion:reduce){.footer-band .marquee-track{animation:none!important;transform:none!important}} /* Targeted precision pass: same V3 composition, refined geometry and pacing. */ .hero{min-height:max(790px,var(--hero-min-height,790px));padding-top:clamp(190px,28vh,360px)} .hero h1{;max-width:100%;line-height:1.04;color:var(--ink);white-space:normal} .hero h1>span{display:block;width:fit-content;white-space:nowrap}.hero-support{margin-top:5vh}.hero-support .text-link{border-radius:7px} .hero-thread{inset:0!important}.thread-hero .thread{animation-duration:2.5s;stroke-dashoffset:calc(var(--hero-progress,0)*-.02)} @keyframes hero-thread-arrival{from{stroke-dashoffset:.55}to{stroke-dashoffset:0}} .problem{min-height:0;padding-bottom:64px}.problem-emphasis{position:relative;display:inline-block;color:var(--ink);font-weight:inherit;font-style:normal}.problem-fill{position:absolute;inset:0;color:var(--blue);clip-path:inset(0 calc((1 - var(--comment-progress,1))*100%) 0 0);pointer-events:none} .thread-problem{inset:0;width:100%;height:100%}.statement{min-height:var(--statement-min-height,140svh);padding-top:var(--statement-top,55svh);padding-bottom:var(--statement-bottom,55svh)} .capabilities .ellipsis{margin-left:8px}.method-step:first-child{border-top:0}.method-step:last-child{border-bottom:0}.method-body{margin-top:150px}.method{min-height:0;padding-bottom:6vh}.type-motion .lab{margin-top:0} .importance-line{width:calc(100% - 40px);border-radius:4px 0 0 4px}.lab-descent{width:40px;background:none;border-top:8px solid var(--blue);border-right:8px solid var(--blue);border-radius:0 40px 0 0;transform:none;clip-path:inset(0 0 calc((1 - var(--descent,1))*100%) 0)} .footer-band{display:flex;align-items:center;height:clamp(24px,2.5vw,38px);padding:0}.footer-band .marquee{font-size:clamp(17px,1.7vw,28px)}.footer-band .marquee-track{animation-duration:var(--marquee-duration,54s)}.footer-band.disciplines-band .marquee{font-size:clamp(15px,1.4vw,23px)}.footer-band.disciplines-band .marquee-track{animation-duration:var(--marquee-duration,68s)} @media(max-width:760px){.hero{padding-top:26vh}.hero h1{;letter-spacing:-.05em}.hero-support{margin-top:48px}.method-body{margin-top:115px}.method{padding-bottom:40px}.lab{margin-top:0}.importance-line{width:calc(100% - 24px);border-radius:3px 0 0 3px}.lab-descent{width:24px;border-width:5px;border-radius:0 24px 0 0}} @media(max-width:480px){.hero{padding-top:25vh}} @media(min-width:761px) and (max-height:650px){.hero{padding-top:180px}} @media(prefers-reduced-motion:reduce){.lab-descent{clip-path:none}.type-motion .lab{margin-top:0}} /* Retain the approved header-to-Hero breathing room with the new two-line title. */ .hero{padding-top:clamp(220px,34vh,410px)} @media(max-width:760px){.hero{padding-top:29vh}} @media(max-width:480px){.hero{padding-top:27vh}} @media(min-width:761px) and (max-height:650px){.hero{padding-top:215px}} /* Display scale: one selector per element; breakpoints adjust only these tokens. */ :root{ --hero-size:clamp(48px,4.1vw,88px); --problem-size:clamp(42px,4vw,84px); --statement-size:4vw; --agent-size:clamp(44px,5.8vw,120px); --agent-long-size:clamp(40px,4.8vw,100px); --closing-size:clamp(40px,5.5vw,110px); --method-size:clamp(38px,4.2vw,88px); --company-size:clamp(50px,7vw,145px); --contact-size:clamp(35px,4.05vw,96px); } h1{font-size:var(--hero-size)}h2{font-size:clamp(32px,4.1vw,90px)} .hero h1{font-size:var(--hero-size)}.problem h2{font-size:var(--problem-size)}.statement h2{font-size:var(--statement-size)} .agent-panel h2{font-size:var(--agent-size)}.agent-panel.long h2{font-size:var(--agent-long-size)}.agent-closing h2{font-size:var(--closing-size)} .method h2{font-size:var(--method-size)}.company-sentence{font-size:var(--company-size)}.contact h2{font-size:var(--contact-size)} .lab-disciplines,.lab-disciplines .selection-overlay{font-family:var(--font-display);font-weight:900;font-size:14px!important} @media(max-width:1100px){:root{--hero-size:clamp(32px,4.1vw,48px);--problem-size:clamp(34px,4vw,44px);--statement-size:5.1vw;--agent-size:clamp(40px,5.8vw,64px);--agent-long-size:clamp(34px,4.8vw,53px);--closing-size:5.5vw;--method-size:clamp(32px,4.2vw,47px);--company-size:clamp(42px,7vw,77px)}} @media(max-width:760px){:root{--hero-size:clamp(30px,4.1vw,34px);--problem-size:6vw;--statement-size:6.6vw;--agent-size:8.8vw;--agent-long-size:7.5vw;--closing-size:8vw;--method-size:clamp(30px,4.2vw,38px);--company-size:7.5vw;--contact-size:6.6vw}.lab-disciplines,.lab-disciplines .selection-overlay{font-size:12px!important}} @media(max-width:480px){:root{--hero-size:6.8vw;--problem-size:5.9vw;--statement-size:9vw;--closing-size:9vw;--method-size:min(8vw,32px);--contact-size:9vw}} @media(max-width:360px){:root{--hero-size:6.4vw}} @media(min-width:761px) and (max-height:650px){:root{--agent-size:5.8vw;--agent-long-size:4.8vw;--closing-size:5vw}} /* Compact pills share a heavier, CSS-drawn arrow. */ .hero-support .text-link,.form-bottom .text-link{border-radius:999px} .hero-support .text-link>span,.form-bottom .text-link>span{display:block;position:relative;width:25px;height:18px;flex:none;font-size:0;line-height:0} .hero-support .text-link>span:before,.form-bottom .text-link>span:before{content:'';position:absolute;width:23px;height:3px;left:0;top:7.5px;background:currentColor} .hero-support .text-link>span:after,.form-bottom .text-link>span:after{content:'';position:absolute;width:11px;height:11px;right:1px;top:3.5px;border-top:3px solid currentColor;border-right:3px solid currentColor;transform:rotate(45deg)} .footer{display:grid;grid-template-columns:auto 1fr 48px}.footer nav{justify-self:end}.back-to-top{display:grid;place-items:center;width:48px;height:48px;justify-self:end;background:#888;color:var(--paper);border-radius:2px}.back-to-top svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.5;transition:transform .2s}.footer .back-to-top:hover{color:var(--paper);background:#747474}.back-to-top:hover svg{transform:translateY(-3px)} @media(max-width:760px){.footer{grid-template-columns:auto 1fr auto;column-gap:22px;row-gap:26px;align-items:center}.footer .brand{grid-column:1;grid-row:1;justify-self:start}.footer nav{grid-column:1 / -1;grid-row:2;justify-self:start}.back-to-top{grid-column:3;grid-row:1;justify-self:end;align-self:center;width:44px;height:44px;background:transparent;color:var(--ink);border-radius:8px;border:1px solid var(--ink)}.footer .back-to-top:hover{background:transparent;color:var(--blue);border-color:var(--blue)}.back-to-top svg{width:20px;height:20px;stroke-width:2.5}} @media(prefers-reduced-motion:reduce){.back-to-top svg{transition:none}.back-to-top:hover svg{transform:none}} @media print{.agent-panel h2{font-size:30px}.company-sentence{font-size:40px}.back-to-top{display:none}} /* Commercial architecture and editorial window. Existing scenes keep their own scale. */ .services{padding:clamp(90px,12vh,150px) var(--gutter) clamp(70px,10vh,120px)} .services>h2{max-width:900px;font-size:clamp(32px,3.6vw,62px);font-weight:800;line-height:1.06;letter-spacing:-.045em} .service-fields{margin-top:clamp(56px,7vw,110px)} .service-field{position:relative;display:grid;grid-template-columns:19% 40% 1fr;column-gap:4%;row-gap:32px;border-top:2px solid currentColor;padding:44px 0 68px} .service-field::before{content:'';position:absolute;top:-2px;left:0;right:0;height:3px;background:var(--blue);transform:scaleX(var(--service-progress,1));transform-origin:left} .service-label{font-size:14px;font-weight:800;letter-spacing:.025em;line-height:1.4} .service-field h3{font-size:clamp(28px,2.6vw,44px);font-weight:800;line-height:1.1;letter-spacing:-.04em;max-width:620px} .service-detail>p{font-size:clamp(17px,1.35vw,23px);line-height:1.5} .service-detail .service-terms{margin-top:30px;font-size:12px;font-weight:800;line-height:1.6;letter-spacing:.025em} .journal{background:#111111;color:var(--paper);padding:clamp(90px,12vh,150px) var(--gutter) clamp(80px,10vh,130px)} .journal>h2,.editorial-index>h1{font-size:clamp(30px,3vw,52px);font-weight:800;letter-spacing:-.045em;line-height:1.05;padding-bottom:30px;border-bottom:3px solid currentColor} .journal-articles{display:grid;grid-template-columns:1.65fr 1fr;grid-template-rows:repeat(3,1fr);column-gap:6%;margin-top:16px} .journal-article{padding:28px 0 34px;min-width:0;border-bottom:1px solid #f3f0e855} .journal-lead{grid-column:1;grid-row:1 / 4;border-right:1px solid #f3f0e855;padding-right:8%} .journal-article:not(.journal-lead){grid-column:2} .journal-featured{margin:0 0 28px;aspect-ratio:16 / 9} .journal-featured>a{display:block;width:100%;height:100%} .journal-featured img{display:block;width:100%;height:100%;object-fit:cover} .journal-image-placeholder{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;background:#292927;color:var(--paper);border-block:1px solid #f3f0e855;text-align:center;padding:24px} .journal-image-placeholder span:first-child{font-size:clamp(18px,1.6vw,26px);font-weight:800;letter-spacing:.04em}.journal-image-placeholder span+span{font-size:11px;font-weight:700;letter-spacing:.08em} .article-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:12.5px;font-weight:800;line-height:1.5;letter-spacing:.02em} .article-meta time{font-weight:500;letter-spacing:0} .journal-article :is(h2,h3){font-size:clamp(24px,2vw,32px);font-weight:700;line-height:1.17;letter-spacing:-.035em;margin-top:24px} .journal-lead :is(h2,h3){font-size:clamp(28px,2.7vw,44px)} .journal a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:.16em}.journal a:focus-visible{outline-color:var(--paper)} .journal .article-meta{text-transform:uppercase;letter-spacing:.06em;gap:10px 16px;color:rgba(243,240,232,.92)} .journal .article-meta time{text-transform:uppercase;font-weight:800;letter-spacing:.06em;color:inherit} .journal-link{margin:28px 0 0 auto;display:flex;width:fit-content;font-weight:800;font-size:12px} .editorial-index{padding-top:clamp(160px,21vh,240px)} .demo-note{font-size:16px;line-height:1.5;margin:24px 0 40px} .editorial-demo{padding:clamp(160px,21vh,240px) var(--gutter) 100px;max-width:1100px;min-height:80svh} .editorial-demo .article-meta{margin:50px 0 24px} .editorial-demo h1{font-size:clamp(34px,4.1vw,68px);font-weight:800;line-height:1.06} .editorial-footer{border-top:1px solid currentColor;grid-template-columns:1fr auto} @media(max-width:1100px){ .service-field{grid-template-columns:23% 1fr;gap:28px 5%} .service-detail{grid-column:2;max-width:580px} .journal-articles{column-gap:5%}.journal-lead{padding-right:8%} } @media(max-width:760px){ .services{padding-block:90px 60px}.services>h2{max-width:520px} .service-fields{margin-top:52px}.service-field{display:block;padding:26px 0 48px} .service-field h3{font-size:clamp(28px,5.5vw,36px);margin-top:26px;max-width:530px} .service-detail{margin-top:24px}.service-detail>p{font-size:17px} .service-label{font-size:12px}.service-detail .service-terms{font-size:12px;margin-top:24px} .journal{padding-block:80px}.journal>h2{font-size:clamp(29px,5.8vw,40px);padding-bottom:24px} .journal-articles{display:block;margin-top:30px}.journal-lead{border-right:0;padding-right:0} .journal-article{padding-bottom:30px}.journal-article+.journal-article{padding-top:26px} .journal-article :is(h2,h3){font-size:25px;margin-top:18px}.journal-lead :is(h2,h3){font-size:31px} .journal-link{margin-top:8px;margin-left:0}.article-meta{gap:8px 16px} .editorial-index{padding-top:180px}.editorial-demo{padding-top:180px} .editorial-footer{display:flex;flex-wrap:wrap} } @media(prefers-reduced-motion:reduce){.service-field::before{transform:none}} @media print{.services,.journal{padding:35px}.service-field{break-inside:avoid}.service-field::before{display:none}} /* Precision refinements share the approved Agent label language. */ .service-label{position:relative;width:fit-content;align-self:start;font-family:var(--font-display);font-size:14px;font-weight:800;letter-spacing:.04em;line-height:1.4} .service-label:after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;background:currentColor;transform-origin:left;transform:scaleX(var(--service-progress,1))} @media(min-width:1101px){.hero-support{width:min(100%,calc(clamp(18px,1.45vw,26px)*34))}.hero-support p{min-height:4lh;text-wrap:wrap}.hero-support-line{display:block;white-space:nowrap}} @media(max-width:1100px) and (min-width:761px){.header nav{gap:20px;font-size:13px}} @media(max-width:760px){.header nav{width:100%;justify-content:space-between;gap:10px;font-size:11px}.service-label{font-size:13px}.journal-article{border-right:0}.footer nav{flex-wrap:wrap}} @media(max-width:480px){.header nav{font-size:11px;gap:8px}.service-label{font-size:12px}} @media(prefers-reduced-motion:reduce){.problem-fill{clip-path:none}.service-label:after{transform:none}} @media(max-width:480px){.header nav{display:grid;grid-template-columns:repeat(3,max-content);justify-content:space-between;gap:0 14px}.header nav a{white-space:nowrap;padding-block:7px}} /* === Editorial system: /insights/ + archives (Phase 2 revision) === */ .editorial{padding:0 var(--gutter) clamp(44px,8vw,100px)} .editorial-masthead{border-bottom:1px solid var(--ink);padding-bottom:clamp(28px,4vw,48px)} .editorial-masthead h1{margin:0;font-weight:800;font-size:clamp(32px,3.4vw,58px);letter-spacing:-.045em;line-height:1.02} .editorial-subtitle{margin:20px 0 0;font-size:clamp(16px,1.15vw,20px);letter-spacing:-.01em;opacity:.78} /* Rubrics navigation — WordPress-managed, strong horizontal editorial rules. */ .journal-rubrics{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);margin-bottom:clamp(48px,7vw,88px);background:var(--paper)} .journal-rubrics-list{display:flex;flex-wrap:wrap;justify-content:center;gap:0 clamp(28px,4vw,64px);margin:0;padding:0;list-style:none} .journal-rubrics-list li{margin:0} .journal-rubrics-list a{display:block;padding:clamp(14px,1.7vw,22px) 0;font-size:clamp(13px,1.1vw,15px);font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);border-bottom:3px solid transparent} .journal-rubrics-list a:hover{color:var(--blue)} .journal-rubrics-list li.current-menu-item a,.journal-rubrics-list li.current_page_item a{color:var(--blue);border-bottom-color:var(--blue)} /* Editorial fixed header — restrained, publication-oriented. WordPress-managed (Appearance → Menus → "Editorial Header Navigation"), normally one action such as RETOUR AU SITE. Keeps the brand lockup, drops the commercial menu. */ .header-editorial{position:fixed;inset:0 0 auto;z-index:30;background:var(--blue);color:var(--paper);border-bottom:0;box-shadow:0 2px 0 var(--blue)} body.admin-bar .header{top:32px} body.admin-bar{--adminbar:32px} @media(max-width:782px){body.admin-bar .header{top:46px}} @media(max-width:782px){body.admin-bar{--adminbar:46px}} .header-editorial .brand,.header-editorial .brand span{color:var(--paper)} .header-editorial nav{font-weight:800;font-size:13px;letter-spacing:.05em;text-transform:uppercase} .header-editorial nav a:hover,.header-editorial nav a[aria-current='location']{color:var(--paper)} /* Featured editorial area — one coherent horizontal band. The main image, the main-story text and the secondary rail share one fixed band height, so their tops AND bottoms align on the same axes; the vertical structural rule belongs to the whole band. The lead image fills that band as a landscape cover crop (never a tall portrait), and the main story's metadata, dominant title and short excerpt sit together inside it. */ .editorial-featured{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,0.92fr);grid-template-rows:minmax(clamp(250px,26vw,340px),auto);gap:clamp(32px,4vw,56px);align-items:stretch;border-bottom:1px solid var(--ink);padding-bottom:clamp(40px,5vw,72px);margin-bottom:clamp(48px,6.5vw,92px)} .editorial-featured.is-no-media{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)} .ef-media{display:block;min-width:0;border:1px solid var(--ink);overflow:hidden} .ef-media img{display:block;width:100%;height:100%;object-fit:cover} .ef-main{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;min-width:0;overflow:hidden} .ef-title{font-size:clamp(28px,3.2vw,48px);font-weight:800;letter-spacing:-.045em;line-height:1.03;margin:16px 0 0;max-width:19ch} .ef-title a{color:inherit} .ef-title a:hover{color:var(--blue)} .ef-excerpt{margin:16px 0 0;max-width:52ch;font-size:clamp(14px,1vw,18px);line-height:1.55;letter-spacing:-.01em;opacity:.85;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .ef-rail{border-left:1px solid var(--ink);padding-left:clamp(36px,4.5vw,68px);display:grid;grid-template-rows:1fr 1fr;gap:0;min-width:0} .secondary{padding:clamp(12px,1.4vw,16px) 0 0;display:flex;flex-direction:column;min-width:0;overflow:hidden} .secondary:first-child{padding-top:0} .secondary+.secondary{border-top:1px solid var(--ink);padding-top:clamp(12px,1.4vw,16px)} .secondary-title{font-size:clamp(14.5px,1.2vw,18px);font-weight:800;letter-spacing:-.025em;line-height:1.18;margin:clamp(10px,1.2vw,14px) 0 0;max-width:24ch} /* Journal metadata system — uppercase + blue + bold in editorial contexts (homepage untouched) */ .editorial .article-meta,.single-editorial .article-sidebar .article-meta{color:var(--blue);font-weight:800;justify-content:flex-start;gap:0 1em;flex-wrap:wrap;text-transform:uppercase;letter-spacing:.06em;font-size:13px;line-height:1.6} .editorial .article-meta time,.single-editorial .article-sidebar .article-meta time{color:inherit;font-weight:800;letter-spacing:.06em} .eg-meta{color:var(--blue);opacity:1;font-weight:800;font-size:12px;letter-spacing:.07em} .secondary-title a{color:inherit} .secondary-title a:hover{color:var(--blue)} /* Regular editorial grid — 4 columns of black-outline editorial modules. Modules stay taller than wide overall, but the image is a shallow landscape strip across the upper portion (NOT a tall portrait card); metadata + title sit high in the text area that follows. */ .editorial-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,34px)} .eg-item{display:flex;flex-direction:column;border:1px solid var(--ink);background:var(--paper);padding:0 0 22px} .eg-media{margin:0;border-bottom:1px solid var(--ink)} .eg-media a{display:block} .eg-media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover} .eg-item:not(:has(.eg-media)){padding-top:20px} .eg-meta{margin:18px 18px 0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;display:flex;gap:8px;flex-wrap:wrap} .eg-title{font-size:clamp(15px,1.15vw,20px);font-weight:800;letter-spacing:-.02em;line-height:1.22;margin:12px 18px 0} .eg-title a{color:inherit} .eg-title a:hover{color:var(--blue)} .ef-title a:hover{color:var(--blue)} /* Minimal editorial pagination — 1 2 Suivants → */ .editorial-pagination{margin-top:clamp(52px,7vw,96px);display:flex;align-items:center;gap:20px;font-size:13px;font-weight:800;flex-wrap:wrap} .editorial-pagination .page-numbers{color:var(--ink);padding:8px 2px} .editorial-pagination .page-numbers.current{color:var(--blue)} .editorial-pagination a:hover{color:var(--blue)} .editorial-empty{font-size:clamp(18px,1.3vw,22px)} @media(max-width:1024px){.editorial-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:900px){ .editorial-featured{grid-template-columns:1fr;grid-template-rows:auto;gap:32px} .editorial-featured.is-no-media{grid-template-columns:1fr} .ef-media{min-height:0} .ef-media img{height:auto;aspect-ratio:16/9} .ef-main{overflow:visible} .ef-rail{border-left:0;border-top:1px solid var(--ink);padding-left:0;padding-top:clamp(24px,3vw,36px);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:0 clamp(24px,4vw,48px)} .secondary+.secondary{border-top:0} .journal-rubrics-list{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start} .journal-rubrics-list li{flex:0 0 auto} } @media(max-width:760px){.editorial-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){ .editorial-grid{grid-template-columns:1fr} .ef-rail{grid-template-columns:1fr;grid-template-rows:auto} .secondary+.secondary{border-top:1px solid var(--ink)} .header-editorial nav{font-size:10px}} } /* Single article: full-width editorial hero + page-width reading. The hero spans the whole canvas below the persistent header; the body then uses the broad gutter width with the article on the left ~2/3 and a sticky 1/3 rail. */ .single-editorial{min-height:80svh} .single-editorial .article{padding:calc(clamp(18px,2.6vh,32px) + clamp(18px,2.6vh,32px) + 37px) 0 clamp(36px,5.5vw,70px);max-width:none} .article-hero{position:relative;margin-bottom:clamp(40px,5vw,72px)} .article-hero-media{position:relative;height:clamp(440px,min(74vh,66vw),760px);overflow:hidden;background:var(--ink)} .article-hero-media img{display:block;width:100%;height:100%;object-fit:cover} .article-hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,12,.08) 0%,rgba(10,10,12,.16) 34%,rgba(10,10,12,.38) 54%,rgba(10,10,12,.74) 78%,rgba(10,10,12,.97) 100%)} .article-hero-content{position:absolute;left:0;right:0;bottom:0;color:var(--paper);padding:clamp(26px,4vw,64px) var(--gutter) clamp(52px,9vw,116px);z-index:1} .article-hero-content .article-meta{color:rgba(243,240,232,.92);justify-content:flex-start;gap:0 1.1em;flex-wrap:wrap;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:13px;margin-bottom:clamp(24px,2.6vw,40px)} .article-hero-content .article-meta time{font-weight:800;text-transform:uppercase;letter-spacing:.06em} .article-hero-content .article-title{color:var(--paper)} .article-hero-plain{padding:clamp(34px,5vw,64px) var(--gutter) clamp(34px,5vw,56px);border-bottom:1px solid var(--ink)} .article-hero-plain .article-meta{color:var(--blue);font-weight:800;justify-content:flex-start;gap:0 1.1em;flex-wrap:wrap;margin-bottom:26px;text-transform:uppercase;letter-spacing:.06em;font-size:13px} .article-hero-plain .article-meta time{color:inherit;font-weight:800} .article-title{font-size:clamp(34px,4.6vw,64px);font-weight:850;letter-spacing:-.05em;line-height:1.04;max-width:20ch} .article-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);gap:clamp(48px,6vw,96px);align-items:start;padding:clamp(40px,6vw,72px) var(--gutter) 0} .article-body{min-width:0} .article-body p{font-size:19px;line-height:1.75;letter-spacing:0;max-width:46em} .article-body>*+*{margin-top:1.4em} .article-body h2{margin-top:2em;font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.12} .article-body h3{margin-top:1.8em;font-size:clamp(20px,1.9vw,26px);font-weight:750;letter-spacing:-.02em;line-height:1.2} .article-body strong{font-weight:600} .article-body a{text-decoration:underline;text-underline-offset:.14em} .article-body a:hover{color:var(--blue)} .article-body ul,.article-body ol{padding-left:1.3em;line-height:1.7} .article-body li+li{margin-top:.5em} .article-body .wp-block-separator{display:none} .article-body blockquote{margin:2em 0;padding-left:1.4em;border-left:3px solid var(--blue);font-size:22px;line-height:1.5;font-weight:500;letter-spacing:-.015em} .article-body blockquote p{font-size:22px} .article-body img{max-width:100%;height:auto} .article-body figure{margin:2em 0} .article-body figcaption{margin-top:12px;font-size:13px;letter-spacing:.02em;opacity:.7} .article-body .wp-block-image img{width:100%} .article-nav{margin:clamp(36px,5.5vw,70px) var(--gutter) 0;padding:0;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.05em} .article-nav a{color:var(--blue)} .article-nav a:hover{color:#111;text-decoration:underline;text-underline-offset:.14em} .article-sidebar{border-top:1px solid var(--ink);position:sticky;top:calc(clamp(18px,2.6vh,32px) + clamp(18px,2.6vh,32px) + 53px + var(--adminbar,0px));max-height:calc(100vh - clamp(18px,2.6vh,32px) - clamp(18px,2.6vh,32px) - 77px - var(--adminbar,0px));display:flex;flex-direction:column;overflow:hidden} .sidebar-list{flex:1 1 auto;min-height:0;overflow-y:auto} .sidebar-label{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.6;padding:6px 0 12px;border-bottom:1px solid var(--ink);margin:0;flex:0 0 auto} .sidebar-item{padding:13px 0;border-bottom:1px solid var(--ink)} .sidebar-item:last-child{border-bottom:0} .sidebar-item .article-meta{margin-bottom:9px;font-size:12.5px} .sidebar-title{font-size:17px;font-weight:800;letter-spacing:-.025em;line-height:1.22} .sidebar-title a:hover{color:var(--blue)} @media(max-width:900px){ .article-layout{grid-template-columns:1fr} .article-sidebar{position:static;margin-top:clamp(40px,6vw,64px);max-height:none;overflow:visible;display:block} .sidebar-list{overflow:visible} } @media(max-width:760px){ .insight-row{grid-template-columns:1fr;gap:20px} .insight-lead-title,.insight-row-title{max-width:none} .single-editorial .article{padding-bottom:clamp(36px,5.5vw,70px)} .single-editorial .article{padding-top:99px} .article-hero-media{aspect-ratio:auto;min-height:400px} .article-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .article-hero-content,.article-hero-plain{left:0;right:0;padding-left:var(--gutter);padding-right:var(--gutter)} .article-layout{padding-left:var(--gutter);padding-right:var(--gutter)} .article-title{font-size:clamp(28px,7vw,42px)} } /* Contact validation errors — functional state, text + color, never color alone. */ .field-error{display:block;margin:8px 0 0;font-size:13px;font-weight:600;line-height:1.4;letter-spacing:0;color:var(--red)} .contact .field input[aria-invalid='true'],.contact .field textarea[aria-invalid='true']{border-color:var(--red)} @media(prefers-reduced-motion:reduce){.field-error{transition:none}} /* === Commercial header: responsive continuum (pre-production correction) === The desktop single-row header fits from ~1040px up but overflows in two intermediate bands. Rather than forcing the desktop row narrower, we adapt the approved wrapped/composed header EARLIER, following the existing ≤760px pattern. Scope is restricted to the commercial header (.header:not(.header- editorial)); the editorial header keeps its exact appearance. • ≤960px — header wraps: brand on row 1, the navigation (5 links + the terminal LE JOURNAL DU LAB block) on a full-width row 2, still space-between with the CTA at the right edge. • 481-560px — navigation itself becomes the approved 3-column grid so it never exceeds the available width (mirrors the existing ≤480px pattern) before 480px takes over. Above 960px the header returns to the single-row desktop composition. */ @media(min-width:481px) and (max-width:960px){ .header:not(.header-editorial){flex-wrap:wrap;row-gap:9px} .header:not(.header-editorial) nav{width:100%;justify-content:space-between} } @media(min-width:481px) and (max-width:560px){ .header:not(.header-editorial) nav{display:grid;grid-template-columns:repeat(3,max-content);justify-content:space-between} .header:not(.header-editorial) nav a{white-space:nowrap;padding-block:7px} } /* Footer navigation — native WordPress menu (location: footer_navigation). wp_nav_menu() emits a